안녕하세요. 이번 시간에는 HTML의 기본 구조와 태그에 대해 알아보겠습니다. HTML은 다음과 같은 기본 구조를 가지고 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>제목</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Hello</h1>
<div>
<p>Welcome to HTML world! 저와 함께 html을 배워봅시다.</p>
<img src="http://www.gravatar.com/avatar/edc1de56da658ae0b919a2d2ee28e26c?s=32&d=retro" />
</div>
</body>
</html>간단하게 표현해 봤는데요. 위의 내용을 메모장에 붙여넣고 hello.html로 저장해보세요. (확장자가 txt가 아니라 html이어야 합니다) 그리고 실행하면 위의 내용이 보일겁니다. 아직은 좀 허접하죠?
F12를 눌러 Elements 탭을 한 번 봐보세요. 제 페이지의 html이 나와있습니다. 엄청 복잡하죠? 여러분도 처음에는 간단한 html부터 시작해서 저의 홈페이지처럼 복잡한 html을 만들 수 있게 될 겁니다.
HTML은 태그(tag)로 이루어져있습니다. 태그에는 몇 가지 규칙이 있습니다. 태그는 여는태그와 닫는태그로 이루어져 있습니다. 닫는 태그는 없는 경우도 있습니다.
<여는태그 속성명="속성값">내용</닫는태그>위의 예시에서 태그들을 찾아보세요. html, head, title, body, h1, p, img 등이 있네요. 모두 저마다 고유한 기능을 합니다. 마지막 img 태그는 좀 특이하죠? 내용이 없는 대신 태그 안에 src라는 게 들어 있습니다. 이것을 속성이라고 합니다. 태그의 속성을 정해주는 부분입니다. 속성명을 적고 뒤에 속성값을 따옴표 안에 적어줍니다. 따옴표는 큰따옴표든 작은따옴표든 상관 없습니다. src 속성이 뭔지는 아래 img 태그를 설명할 때 알려드리겠습니다.
내용이 없을 때는 닫는태그 대신 여는태그 마지막 부분에 />를 넣어 끝내줍니다. (안 넣어도 됩니다만 저는 닫는 게 있어야 마음이 편합니다)
<여는태그 속성명="속성값" />태그 안에는 태그가 들어가도 되지만, 반드시 여는태그와 닫는태그의 순서가 일치해야합니다.
<div><p>굿!</p><div>위의 경우 div 태그가 온전히 p 태그를 감싸고 있습니다.
<div><p>에러</div></p>위의 경우 p와 div가 꼬여있습니다. 이런 것은 잘못된 겁니다. 단, html에서는 위의 경우 에러를 직접적으로 표시하지 않습니다. html은 좀 관대한 언어입니다. 그래서 오히려 에러를 잡아내지 못해 헤매는 경우가 많습니다. 그래서 항상 바르게 태그를 사용할 수 있도록 주의하세요.
그리고 권장사항도 있습니다. 태그는 소문자로 쓰는 게 좋고, 속성명은 큰따옴표(")로 감싸주는 게 좋습니다.
이제 위의 태그들에 대해 알아볼까요? 그에 앞서 <!DOCTYPE html>부터 알아보겠습니다. 이건 태그처럼 생겼긴 한데 닫는태그도 없고, 그렇다고 여는태그에 />가 붙어있지도 않습니다. 이것의 역할이 뭘까요? 바로 HTML5를 사용함을 브라우저에 알려주는 겁니다. HTML에는 여러 버전이 있습니다. 예전에는 4를 썼지만 요즘은 다 5를 사용하죠. 2014년에 나온 따끈따끈한 버전입니다. 브라우저는 스스로 HTML 문서의 버전을 판단하기 어렵기 때문에 우리가 직접 알려줘야 합니다. 이제 태그들을 살펴보죠.
- html: 전체 html 문서를 감싸는 태그입니다. 하나만 존재해야 하고 html 바깥에 DOCTYPE을 제외한 다른 태그가 있으면 안 됩니다.
- head: html 문서에 대한 정보를 나타내는 부분입니다. 하나만 존재해야하고, html 바로 아래에 있어야합니다.
- body: html 문서에서 실제적으로 보여지는 부분을 나타냅니다. 하나만 존재해야 하고, html 바로 아래, head 다음에 위치해야 합니다.
- title: head 안에 들어가는 태그로 제목표시줄의 내용을 나타냅니다. 제 홈페이지의 title은 ZeroCho Blog입니다.
- meta: 문서에 대한 설명을 표시합니다. 사람에게는 보이지 않고, 브라우저만 읽을 수 있습니다. 속성으로 charset="utf-8"이라고 한 것은 브라우저에게 한글 인코딩을 UTF-8로 설정하라고 알린 겁니다. 이 부분이 있어야 한글이 깨지지 않습니다.
- h1: body 안에서 제목을 표시하는 태그입니다. 중요도에 따라 h1부터 h2, h3, ..., h6까지 있습니다.
- div: 구역을 표시하는 태그입니다. 눈에 보이지는 않지만 p와 img 태그를 하나의 구역으로 묶었습니다.
- p: 문단을 표시하는 태그입니다. 여기 안에 글의 내용을 넣으면 됩니다.
- img: 이미지를 표시하는 태그입니다. 아까 src라는 속성이 있었는데 src는 이미지 파일의 경로(위치)를 지정하는 속성입니다.
이번 시간은 맛보기였고요. 다음 시간에는 본격적으로 태그들에 대해 알아봅시다.
Uginim
ZeroCho