HTML?
HTML은 웹페이지를 만들기 위한 마크업 언어입니다. 프로그래밍 언어이기는 하지만 웹페이지의 구조나 형태를 만들기 위한 언어인데요. HTML로 만든 파일은 HTML문서라고도 합니다. 그러니까 HTML은 문서를 작성하는 언어라고 생각하면 되겠네요. 그 문서는 웹 페이지가 되는 것이고요.
태그
HTML 문서는 태그로 이루어져 있습니다. 그렇다면 태그는 무엇일까요?
태그는 <>로 감싸져 있는 형태를 하고 있습니다. 태그는 시작 태그와 종료 태그(혹은 닫는 태그), 그 사이에 내용(contents)을 가지고 HTML요소를 구성하게 됩니다.
<!DOCTYPE HTML>
<html>
<!-- head 요소-->
<head> <!-- 시작 태그-->
<!-- 내용 -->
</head> <!-- 종료 태그-->
<body>
</body>
</html>태그의 내용은 텍스트를 담을 수도 있고, 태그를 담을 수도 있습니다. 이때 태그를 내용으로 넣게되면 하위 태그를 자식 태그라고 하고, 상위 태그를 부모 태그라고 할 수 있습니다.
<!DOCTYPE HTML>
<html>
<!-- head 요소-->
<head> <!-- 시작 태그-->
<meta charset='utf-8' /> <!-- 태그를 담았다. -->
</head> <!-- 종료 태그-->
<body>
<div>
text <!-- 텍스트를 담았다. -->
</div>
</body>
</html>위에는 <head>태그가 자식태그로 <meta>태그를 가지고 있네요. 그런데 <meta>태그는 닫는 태그가 없습니다. 이렇게 닫는 태그가 없이 사용될 수 있는 태그들도 있으니 알고 계시면 되겠습니다. 이런 태그들을 내용이 비었다고 해서 빈 태그(빈 요소)라고 합니다.
보통 빈 태그는 태그 마지막에 /로 끝났음을 표시합니다. 없어도 동작은 하지만 있는 것이 보기에 훨씬 좋겠죠.
중첩 요소
위에서 태그를 중첩해서 사용할 수 있다고 했습니다. 중첩을 하는 경우는 닫는 태그가 있을 경우 그 안에 사용을 하는 방식이죠. 이렇게 중첩하는 방식으로 HTML문서를 작성하기 때문에 트리 구조라고 합니다. 중첩된 요소는 서로 부모 자식 관계로 설명할 수 있습니다.
자식 태그를 포함해서 그 하위의 태그들을 모두 합쳐 후손 태그라고 할 수 있습니다.
자식 태그는 자신의 바로 밑의 하위 태그들을 말하고, 후손 태그는 자식 태그를 포함하여 더 하위의 태그들을 모두 포함하는 것임을 기억하세요.
그렇다면, 같은 위치에 있는 요소들은 무엇이라고 할까요? 서로 같은 부모의 자식이니까 형제 요소라고 합니다. 이렇게 HTML의 요소들은 특정 관계를 가지고 있습니다. 이는 CSS에서 HTML요소의 태그를 선택할 때 사용될 것이니 알고 있는게 좋습니다.
<!DOCTYPE HTML>
<html>
<!-- head 요소-->
<head> <!-- meta 태그의 부모 태그-->
<meta charset='utf-8' /> <!-- head태그의 자식 태그 -->
</head>
<body>
<div>
sibling <!-- 아래의 div와 서로 형제 태그 -->
</div>
<div>
sibling <!-- 위의 div와 서로 형제 태그 -->
</div>
</body>
</html>위 문서를 보면 최상위 태그는 <html>태그이고, 그 자식은 <head>와 <body>태그가 있습니다. <html>의 후손을 따지면 <meta>, <div>도 포함되는 것입니다.
보통 태그의 이름은 소문자로 사용하는 것이 좋습니다. 대소문자 구분을 하지 않지만, 소문자로 하는 습관을 가지는 것이 좋죠.
자주 사용하는 태그
HTML문서를 작성할 때 자주 사용하는 태그들이 있는데, 이에 대해서 알아봅시다.
<div></div>
<span></span>
<img />
<a></a>
<ul><li></li></ul>
<input/>
<textarea></textarea>
<button><button>위의 태그들은 자주 사용된다는 것을 기억해두세요.
먼저 <div>태그는 의미를 가지고 있는 태그는 아닙니다. 하지만, 구조를 잡을 때 사용하기 좋기 때문에 정말 많이 사용됩니다. 이 태그는 웹 페이지에서 보았을 때 한 줄을 차지하게 됩니다.
<span>태그의 경우도 <div>와 마찬가지로 자주 사용되지만 큰 의미를 담고 있는 태그는 아닙니다. 단순한 텍스트를 담을 때 사용되기도 하죠. 이 태그는 콘텐츠 내용만큼의 크기를 차지합니다.
<img>태그는 이름 그대로 이미지를 삽입하기 위한 태그입니다. 보통 src속성에 이미지 주소를 넣어주어 사용합니다.
<a>태그는 링크 태그입니다. 클릭 시 href속성에 있는 주소로 페이지가 이동하게 됩니다.
<ul> / <li>태그는 순서가 없는 리스트를 의미합니다. Unordered List의 줄임말이죠. li는 리스트의 아이템들을 의미합니다. 목록과 관련된 내용은 이 태그를 이용하면 됩니다.
순서가 없는 리스트라는 것은 순서가 있는 리스트를 표현하는 태그도 있다는 소리겠죠? 이 경우는 <ol>을 사용합니다. 리스트의 아이템은 똑같이 <li>를 이용하는데, 이때 아이템들의 순서가 같이 표시되게 됩니다. 이는 예시를 통해 보여드릴게요.
<input/>태그는 사용자로부터 입력을 받는 경우 사용됩니다. type속성으로 텍스트, 패스워드, 체크박스 등의 형태를 정할 수 있습니다. 텍스트를 입력받을 때는 한 줄로 입력을 받게 됩니다. 보통 button태그와 함께 사용하여 사용자 입력을 다루게 됩니다.
<textarea>태그도 입력을 받는 태그이지만, 이름에서 알 수 있듯이 텍스트를 입력받기 위한 태그입니다. 여러 줄의 텍스트 입력을 다룰 수 있습니다.
<button>태그는 버튼을 만들 때 사용합니다. <input>의 타입을 submit으로 했을 떄도 버튼으로 표현되지만, <button>태그는 콘텐츠를 가질 수 있는 비어있지 않은 태그이기 때문에 자식 태그가 필요한 경우 사용할 수 있다는 장점이 있겠죠?
그렇다면 위의 태그들을 실제 웹페이지에서 어떻게 보이는지 확인해봅시다.
