Grouping Content

출처 위니브

HTML 작성시 가장 중요한 것들 중 하나는 항상 그룹핑(박스모델 이라고도 한다.)을 잘 해야 한다는 건다.

 

 

이렇게 해야 하는 이유는 크게 두가지 이다.

• CSS styling시 가장 효율적인 방식으로 작업을 가능하게 하기 위해서.
• 각 태그가 가진 의미들로, Semantic HTML을 작성하기 위해서.

 

---

header

• 보통 해당 페이지에서 가장 중요한 h1태그를 포함하는 경우가 많다.
• 보통 웹사이트에서 윗부분에 웹사이트의 이름, 검색창, nav 태그들과 함께 들어있다.
• 네이버로 예를 들면 아래 사진처럼 네이버 로고와 검색창, 아래 메뉴바들을 포함한 곳이 되겠다.

 

nav

• 보통 웹페이지 header 안에서 메뉴바, 혹은 카테고리를 만들어주는게 가장 흔하게 사용되는 방식이다(이 외에도 여려군데서 쓰임)
• ul>li  를 감싸고 있는 경우가 많다. 

 

article

• 사실 article이 좀 모호하다. 
• 그 자체로 헤더/바디/푸터를 담고있을 정도로 하나의 아티클은 독립적이며, 그렇기 때문에 똑 떼서 다른 사이트에 갖다 놔도 이상하지 않아야 한다고 한다.
• 헷갈리면 section 쓰자.

 

section

• article보다 흔하게 사용하게 될 section. 구역을 나눠줄 때 사용한다.
• 큰 구역을 묶어주는것도 가능하고, section 안에 작은 section들로 여러개 넣어주어도 된다.

 

 

footer

• 보통 페이지 하단에 본문의 컨텐츠가 끝나고 나오는 부분들이다.

 

div

• 실무에서 가장 남발하게 되는 태크인 div태그는 문단을 나누는 것 이외에는 아무 의미도 부여하지 않는 태그이니 사용을 지양한다.