- Posted
- Filed under 컴퓨터
후우. 정말 오랜만에 이 글을 쓰는군요. -_-; 제 블로그 계속 보신 분들은 아시겠지만 그동안 상당히 바빴습니다. 그렇다고 무한정 안 쓸 수는 없으니 계속 진행해야겠지요.
오늘 다룰 내용은 문서의 구조를 잡는 것입니다. 전에도 말했듯 웹페이지는 하나의 문서입니다. 그렇다면 '문서'에 들어가는 논리적인 구조가 어떤 것이 있을까요? 학창시절의 국어 시간으로 돌아가, '글'을 구성하는 요소가 무엇이었는지 생각해봅시다.
- 글
- 제목
- 도입
- 본문
- 맺음말
- 참고 자료
이렇게 나누어질 수 있고 실제 글 내용을 이루는 도입-본문-맺음말은 소제목이 달려 있기도 합니다.
자, 그럼 이걸 XHTML 문서에서는 어떻게 해 줄까요? Heading과 Division을 사용합니다. Heading은 논리적인 제목, Division은 논리적인 문서 의미 영역을 정하는 것을 뜻합니다. 각각은 h1, h2, h3, ...류의 태그와 div, p 태그 등으로 이루어지지요. h? 태그는 제목을, div는 논리적인 영역 구분을, p는 문단 구분을 합니다.
조금 복잡하긴 하겠지만, 지금 보고 계시는 이 블로그의 소스 보기를 해 보십시오. 그러면 어떤 식으로 구성하는지 금방 아실 수 있을 겁니다. (가능하면 메모장보다는, 태그 문법 강조 기능이 있는 AcroEdit나 UltraEdit 등에서 보시는 게 좋습니다)
<body>
<div id="header">
<h1>전체 제목</h1>
</div>
<div id="page">
<h2>중간 제목</h2>
<p>내용</p>
</div>
<div id="sidebar">
<h2>메뉴</h2>
<ul>
<li>메뉴 항목 1</li>
<li>메뉴 항목 2</li>
</ul>
</div>
<div id="footer">
<p>copyright</p>
</div>
</body>
똑같지는 않지만 이런 식입니다. 중간 중간에 들어간 id 속성은 나중에 CSS를 이용하여 실제 디자인을 정의할 때 사용하게 되며, 또한 똑같은 이름의 태그더라도 문서에서 어떤 역할을 하는지 표시해 줍니다. 여기서, id 속성의 값은 이 페이지 내에서 유일해야 합니다. (사이트 전체에서 유일할 필요는 없구요) id 속성은 Javascript로 XHTML 문서 구조에 접근하고자 할 때 고유 식별자로 이용됩니다. 비슷한 기능의 속성으로 class가 있는데 이건 해당 태그가 어떤 부류인지를 나타냅니다. 가령 블로그의 post 들은 여러 개가 나올 수 있고 하나로 분류할 수 있는 공통적인 특성을 가지므로 <div class="post">포스트 내용</div>과 같이 반복되는 경우에 주로 사용합니다.
제 블로그에서 스타일시트를 제거하고 보시면 그 차이를 확 아실 수 있습니다. IE의 인쇄 미리보기를 해 보세요. 그러면 거의 기본 스타일대로 나오는데, heading에 따라 구조가 잘 분리되어 있음을 볼 수 있습니다. (보통 h1은 한 페이지에서 한 번만 쓰이고, 그 하위 제목으로 h2, 또 h2의 하위 제목으로 h3, 이런 식이죠)
어쨌든, class 지정과 id 지정, 그리고 문서 구조를 구분하는 적절한 태그를 사용하면 나중에 CSS로 작업할 때 굉장히 편해집니다. 자기 자신의 상위 태그가 특정 id나 class를 가지는 경우 css에서 바로 접근할 수 있기 때문인데, 이건 추후 따로 다루도록 하겠습니다.
다음 번에는 글 작성 시 주로 사용되는 링크, 글자 속성을 바꾸는 태그들에 대해 알아보겠습니다.
덧/ 보통 줄바꿈을 하기 위해 br 태그를 많이 쓰죠. 그런데 사실 문단의 의미를 살리는 p 태그를 쓰다보면 소스코드를 적는 경우를 제외하고는 거의 br 태그를 쓸 일이 없습니다. br 태그를 최대한 줄여보는 습관을 가지면 XHTML을 구조적으로 짜는 데 조금 더 보탬이 될 것입니다.
