마크업 일반 구조 형태

마크업을 할 때에, 일반적인 구조를 포스팅 하려고 한다.

주로 이렇게 한다.

 

일반적으로 div로 영역을 구분 해놓은 것이다.

 

보면 왜 section, article 이런거 안쓰냐고? 뭐 써도 된다.

쓴다면 아래와 같이 되겠다.

 

물론 위의 마크업 같은 모양은, 그냥 보통 하는것이다.

정말 특별한 이유가 없다면, 위의 마크업을 지켜주는게 시멘틱한 마크업을 하는 것이라고 생각한다.

몇가지만 짚고 넘어가보면,

 

사람들이 많이 헷갈리는 것 중에 하나가, section 과 article 이다.

article = 그냥 article 자체만 남아있을때 독립적인가? 라는 부분. 예를들어 포스트나 뉴스나 그런것들을 할때 보통 article을 사용한다.

section = 그냥 구분용. 그렇다고 div같은 영역 나누기의 개념이 아닌 하나의 고유 타이틀을 가지고 자를수 있는 문단 같은 느낌이라 보면 된다.

둘다 헤딩태그(h1, h2, ...)가 들어가야 한다. 

aside = 컨텐츠와 별 상관이 없는 애들, 광고라던지 배너라던지 하는것들. 즉 삭제해도 상관없는 것들을 aside로 마크업한다.

nav = 주로 네비게이션 등을 마크업할때 쓰며,

header = 보통 헤더의 역할을 하는 부분의 마크업, 헤딩태그는 써도 안써도 되는데, 보통은 로고에 h1을 붙이거나 페이지의 타이틀h1으로 보통 삽입한다.

footer = 일반적으로 카피라잇, 어드레스 뭐 이런거 담겨있는 부분의 마크업.

 

더 많은 태그가 있지만, 실제로 꼭 알고 있어야 하는것들은 위의 6개 정도가 되겠다.