|
|
|
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 02편 : HTML 문서의 기본구조
|
#1. HTML문서의 기본 구조
앞에서도 이야기 했지만 HTML문서는 태그의 나열로 이루어집니다.
기본적으로는 마음대로 순서를 정해서 쌓으면 되지만,
HTML문서 전체의 기본 구조가 단 한가지 존재합니다. 아래를 보시죠.
(예)
<html>
<head>
설정
</head>
<body>
내용
</body>
</html> |
처음 나온 소스인데 겁먹지 말고 침착하게 보세요.
우선 앞에 빈 공백이 있는 것들은 '보기 쉽게' 표현하기 위한 공백입니다.
이렇게 되어있을 때보면 '내용'만 안으로 들어가있죠?
body태그의 사이에 내용이 들어가있다는 것을 직관적으로 보여주기 위함입니다.
앞의 공백은 없어도 됩니다. 아무 의미도 없죠. 단지 내용이 많아지면 헷갈리니까 저렇게 하는 것입니다.
저 공백은 실재로도 저렇게 사용하며 파일이 실행되는데 아무 문제도 없습니다.
공백을 넣는 방법은 메모장 기준으로 키보드의 'tab'키를 누르는 것입니다.
내용으로 돌아가죠. 다시 한 번 쓰겠습니다.
(예)
<html>
<head>
설정
</head>
<body>
내용
</body>
</html> |
모든 HTML문서는 이 기본 구조를 갖습니다. 물론 우리가 직접 손으로 쳐줘야합니다.
가장 바깥에는 html태그가 열리고 닫혀있는데, 그 안의 내용이 HTML이란 것을 뜻합니다.
그 안에 보면 head태그가 열리고 닫혔고, 다시 body태그가 열리고 닫혔습니다.
head태그는 그 안에 웹페이지의 설정이 들어갑니다.
일반적으로 이 부분은 웹브라우져에서는 보여지지 않습니다. 하지만 아래의 body태그에 들어가는 내용에 영향을 미치죠.
body태그는 그 안에 저희가 실재로 눈으로 보는 내용이 들어갑니다.
저희가 앞으로 태그와 내용을 쓰면서 상자쌓기 놀이를 할 부분이 바로 여기입니다.
이 기본 구조는 사실 생략해도 되는 부분이 많지만, 특별한 이유가 없는 한 그러지마세요.
태그 또한 마찬가지인데 열었다가 닫지 않아도 문제가 없는 태그도 많습니다. 대표적으로 방금 본 html태그도 그렇죠.
하지만 이건 아주 안 좋은 습관입니다. 웹브라우져의 종류에 따라서는 문제가 생길 수도 있고,
내용이 길어질 경우에는 닫지 않은 태그 때문에 전체 내용이 오작동 할 수도 있습니다.
만약에 앞으로 작업을 하시다가 별거 안 했는데 페이지 전체, 혹은 일부가 아예 안 보이는 등의 문제가 생기면
십중팔구는 무언가를 열었다가 안 닫았을 경우일 것입니다.
#2. 태그 사용 시 주의사항
끝내기 전에 태그의 사용법에 대해서 간단히 주의사항을 알아봅시다.
위에서 보셨듯이 태그 안에 태그가 들어갈 수 있다는 것을 아셨을 겁니다. 이것은 얼마든지 가능합니다.
태그 안에 태그 안에 태그 안에... 태그가 있어도 되죠.
하지만 이렇게 쓰시면 안됩니다. 아래의 예를 보시죠.
(예)
<태그1><태그2></태그1></태그2> |
이렇게 태그가 서로 교차되면 안됩니다. 반드시 열고 닫힌 태그 안에 열고 닫힌 태그가 있어야합니다. 아래처럼요.
(예)
<태그1><태그2></태그2></태그1>
|
이건 틀리면 안 되는 부분이니 주의하세요.
이번에는 여기까지만 하죠.
앞으로 body태그 안에서 작업을 할 거라는 것만 알아두시면 OK.
특별한 언급이 없는 한 그냥 body태그 안에서 작업한다고 생각하세요.
물론 위의 기본 형태는 항상 잡아주셔야합니다.
(설마 '설정'이나 '내용'이라는 글자까지 그대로 쓰시지는 않겠죠?)
여기까지 보셨으면 HTML에 대해서 이해하는 것에 아무 문제 없을 겁니다. 참 쉽죠?
다음부터는 이제 안 봐주고 본격적으로 진도 나갑니다.
|
|
猫愛 - MyoAe - Homepage Mode
Ver. 1.45
by Aierse | |
|