티스토리 뷰

일반적으로 HTML5 의 공간은... 다음의 둘로 나뉩니다.

(block속성을 가진 놈을 inline 처럼 취급하는 inline-block도 있기는 합니다만)


block (한 줄을 죄다 차지하는 속성을 가진 녀석) : div 등

inline (한 줄에 올망졸망 나란히 늘어서는 속성을 가진 녀석) : span


이건 정말로 해당 공간을 표시하는 것 뿐이고, 

문서 전체에서 해당 요소가 어떤 컨텍스트로 사용되고 있는지를 알려주는 것은 아닙니다.

시멘틱 코딩을 위해서는 문서의 컨텍스트를 알려주는 것이 매우 중요합니다.

이번 포스팅에서는 컨텍스트에 따른 공간을 지정하기 위한 태그들을 알아보겠습니다.


먼저...


header : 문서의 가장 윗부분을 나타냅니다. 일반적으로 nav , logo, util-menu 또는 top-menu가 포함되어 있지만,

반드시 그런 것은 아닙니다.


footer : 문서의 가장 아랫부분을 나타냅니다. 일반적으로 주소, 하단 logo, 저작권표시 등이 포함되어 있지만, 

이 또한, 반드시 그런 것은 아닙니다.

 

nav : 네비게이션 역할을 하는 링크가 포함되는 영역입니다.


section : 일정한 주제로 묶일 수 있는 하나의 컨텐츠를 나타낼 때 사용되는 태그이며, 

해당 섹션의 제목이 되는 서브제목(메인제목은 보통 페이지전체에 해당되는 것이므로)가 포함됩니다.


<section>

<h2>커뮤니티</h2>

<div> blah blah </div>

</section>


section과 많이 혼동되는 것으로 article이 있습니다.

사실 구분하지 않아도 별로 크게... 기능상의 차이를 보이지는 않지만, 

article은 section보다 작은 단위로, 하나의 글을 표시할 때 사용됩니다.

즉... section 안에는 여러개의 article들이 포함될 수 있습니다.


예를 들어...

[ 경제 ]라는 section 에는 

원하는 경제분야를 선택할 수 있는 <select> 태그나 경제기사를 모아 놓은 리스트 <ul>, 가장 화제가 되고 있는 어떤 <article>들이 포함될 수 있습니다.

하지만 article은, 말 그대로 [ 글 ] 인거죠. 즉 블로그의 포스트목록을 클릭하고 들어갔을 때 나타나는 상세페이지의 본문에 해당합니다.




지금까지 div만 줄창 사용해오셨다면, 

위의 공간분할 태그를 통해서 간단하게, 오늘부터 시멘틱~ 해보시는 건 어떠세요?





댓글
댓글쓰기 폼
Total
81,335
Today
0
Yesterday
216
«   2019/07   »
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31