[HTML] 1. 노마드코더 HTML 강의 간단 요약

HTML 정리

## 본 글은 노마드코더 코코아톡 클론 코딩 챌린지를 성공하기 위해 복습 겸 내용 정리를 위해 쓰는 글입니다. ##

HyperText Markup Language
Hypertext란 '웹페이지를 다른 페이지로 연결하는 링크' 를 뜻한다.
Markup Language는 문서의 논리 구조와 배치 양식에 대한 정보를 표현하는 언어이다. 문장과 그림, 표는 어떻게 배치되고 글자는 어떤 크기와 모양을 가지며, 들여쓰기와 줄 간격, 여백 등에 대한 정보를 포함한다.
일반적인 웹사이트는 2-3가지의 언어로 이루어져있다. (HTML, CSS, JavaScript)
브라우저에게 웹사이트의 content가 어떻게 이루어져있는지 설명할 때 사용한다. (뼈대)
CSS는 웹페이지의 외형과 표현을 서술하고, JavaScript는 기능과 동작을 서술한다.

<link href="styles.css" rel="stylesheet">

href 속성은 파일의 위치를 표시해주며 rel 속성은 파일이 어떤 타입인지 알려준다.

<a> : anchor(닻). 주로 <a href="링크 주소"> 텍스트 </a> 와 같이 사용한다.
<h1> : HTML의 제목 요소. h1부터 h6까지 있다.
<ol> : ordered list. 순서가 있는 리스트 태그이다. 태그 안에 <li></li> 로 리스트 내용을 적는다.
<ul> : unordered list. 순서가 없는 리스트 태그이다. 태그 안에 <li></li> 로 리스트 내용을 적는다.
<img> : 이미지 삽입 태그. src(source) 라는 attribute 를 사용한다. self-closing 태그이다.
<p> : paragraph. 글의 한 문단을 표현할 때 사용한다.
<video> : 웹 페이지의 영상 파일을 가져오고 재생시킬 때 사용한다.
<table> : 표를 만들 때 사용한다.
<div> : block 요소. 박스. 한 줄 전체 공간을 차지한다. CSS로 즐겨 사용한다.
<span> : Inline 요소. 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 정해진 공간만 차지한다.
<input> : 버튼, 패스워드, 이메일 등 다양한 속성을 가질 수 있는 self-closing 태그. 자세한 설명은 따로 글을 작성할 예정이다.
<form> : 정보를 제출하기 위한 폼을 만드는 태그. input 이라 label 태그를 주로 사용한다.
<label> : input 폼 양식에 이름(설명)을 붙이는 태그. for 이라는 attribute를 통해 input 과 연결시킬 수 있다.

이 외에도 '시맨틱 태그' 라는 개념이 있는데, 추후에 다른 글로 설명을 적어보고자 한다.

[HTML, CSS] 4. HTML, CSS 유용한 사이트 정리 (by Nomad Coders) (0)	2021.04.21
[HTML] 3. <form> 태그와 관련 태그들 정리 (0)	2021.04.20
[HTML] 2. Netflix, Nomad Coder 홈페이지로 <meta> 태그 알아보기 (0)	2021.04.13