티스토리 뷰
HTML 입문자를 위해 간단히 HTML 문법을 정리해 보겠습니다.
다른 코드를 보고 이게 정상적인 HTML이 맞는지 검증하는 데는 별 관심이 없습니다.
실제로 html, head, body 태그가 생략 가능하다거나 li, dt, dd, p 닫는 태그가 생략 가능하다거나, 혹은 XML같은 네임스페이스라거나 하는... 기타 등등 별 이상한 것도 쓸 수는 있겠지만,
좋은 코드를 짜는 데 있어서 그딴 거 필요 없습니다.
HTML 문법을 꿰는 것이 아니라, 좋은 HTML 코드를 짜는 것이 목표입니다.
자세히 들어가지는 않고, 간단히 필요한 문법만 보겠습니다.
"굳이 나는 모든 문법을 자세히 알아야겠다!" 하는 분이 계시다면 여기로...
우선 간단한 샘플 페이지를 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>페이지 제목</title>
</head>
<body>
<h1>테스트</h1>
줄바꿈
테스트
123<br />123
</body>
</html>직접 html로 저장해서 브라우저로 열어보면 결과를 확인할 수 있습니다.
<!DOCTYPE html>HTML5 문서의 시작이라는 뜻입니다. 무조건 맨 앞에 이렇게 시작할 것입니다.
딱히 이해해야 할 부분은 없습니다. 그냥 외우고 넘어가도 무방합니다.
<태그명>내용</태그명>
<태그명>
<다른태그>내용</다른태그>
내용
내용
</태그명>실제로 태그명이나 다른태그라는 태그가 있는 것은 아니지만, 편의상 있다고 칩시다.
<태그명>은 그 태그를 열고 (여는 태그) </태그명>은 그 태그를 닫습니다. (닫는 태그)
태그 안에는 내용이 들어갈 수 있고, 내용에는 또 다른 태그들이 들어갈 수도 있습니다.
위 샘플 페이지에서 html, head, body, title, h1같은 태그를 볼 수 있습니다.
그런데 meta나 br같은 건 다른 태그들이랑 좀 다르게 생겼죠? 닫는 태그가 따로 없네요
<닫는태그없음 />
<닫는태그없음 />
<닫는태그없음>이번에도 편의상 닫는태그없음이라는 태그가 있다고 칠게요.
다른 태그들은 여는 태그(<태그이름>) ,닫는 태그(</태그이름>)가 따로 있었지만
meta, br, input, link, base 등 몇몇 태그는 닫는 태그가 따로 없습니다.
XML과 호환되게 하려면 <태그이름 />으로 써야 하지만, 아니면 <태그이름>으로만 써도 됩니다.
(커스텀 태그도 있지만, 그거 말고는.) HTML은 태그가 이미 정해져 있습니다.
닫는 태그가 따로 없는 태그(self-closing tag)도 이미 정해져 있으니 안심하고 쓰셔도 됩니다.
<태그이름 속성1="속성1값" 속성2="속성2값"></태그이름>
<닫는태그없음 속성3="속성3값" />태그에는 이렇게 속성을 줄 수 있습니다.
위 샘플에서 <meta charset="utf-8">는 <meta>에 charset이라는 속성을 utf-8로 준 것입니다.
charset이 그 속성 이름, utf-8이 charset이라는 속성의 값. 어렵지 않죠?
속성은 선택사항입니다. 줘야 할 때만 주면 됩니다.
속성1, 속성2, 속성3도 사실 없는 속성이고, 태그와 마찬가지로 속성 이름도 이미 정해져 있습니다.
주의해서 읽어보셨다면 아마 이런 의문이 생길 것입니다.
"저는 <test>를 내용으로 쓰고 싶은데, 내용을 <test>라고 하면 태그가 되지 않나요?"
네, 맞습니다. HTML에서 <와 >는 특별한 의미로 쓰이죠. 사실 그거 말고 &도 특별한 의미고요.
부등호를 내용에 쓰려면 <는 <로, >는 >로 바꿔서 써야 합니다.
태그인지 텍스트인지 헷갈리지 않게 하기 위해 꼭 필요합니다. 이렇게 바꾸는 것을 escape라고 합니다.
lt는 less than, gt는 greater than이라는 뜻입니다. 부등호 방향이 헷갈릴 때는 뜻을 생각해 보세요
HTML은 <이나 >같은 특수문자를 escape하기 위해 &가 사용됩니다. (&무언가;)
그래서 &도 escape가 필요한데, &는 &로 escape합니다.
속성 값에 따옴표를 써야 하는 경우에는... 따욤표 안에서는 따옴표(") 대신 "라고 쓰면 됩니다.
그리고 진짜 탐구심을 갖고 자세히 보신 분이라면 이런 의문도 가질 수 있을 거에요.
줄바꿈
테스트
123<br />123"위 샘플 내용인데요, 왜 줄바꿈이랑 테스트 사이에 줄바꿈이 안 되나요?"
HTML은 공백 한 개나 공백 여러 개나 똑같이 처리합니다. 줄바꿈 포함해서요. 그냥 무시해버려요.
"그러면 줄바꿈은 어떻게 해야 하나요?"
<br /> 태그를 쓰면 줄바꿈이 되긴 하지만... 줄바꿈에 대해서는 나중에 따로 글을 남기도록 하겠습니다.
"그러면 띄어쓰기 여러개는 어떻게 써야 하나요?"
띄어쓰기 비슷하게 로 쓰면 띄어쓰기 여러개와 비슷한 효과를 낼 수 있습니다.
사실 는 띄어쓰기()랑은 다른, NBSP(Non-breaking space, 줄 바꿈 없는 공백)입니다. 정말 똑같이 생겼죠?
독자 여러분이 설마 그럴 거라고 생각하지는 않지만...! 그냥 혹시나 해서...
<a>
<b>
내용
</b>
</a>여기서 <a>의 내용은 <b>내용</b>입니다. a부터 열고 b를 열었으니 a보다 b를 먼저 닫는 게 맞습니다.
<a>
<b>
내용
</a>
</b>이렇게 열고 닫는 순서가 틀리게 쓰는 실수를 하기도 하는데요,
b 태그는 닫지도 않았는데 a 태그를 닫아버리는, b 태그를 닫으려는데 닫으려는 태그는 없는 이상한 코드가 되어 버립니다! 이건 정상적인 HTML 코드가 아니에요.
혹시 제 글을 보고 이해가 안 되는 부분이 있으시거나 틀린 부분이 있다면 댓글로 피드백 부탁드립니다!