시맨틱 요소

1. 시맨틱 웹을 위한 구획/구분 요소 (논리적인 구획 구분을 위함)

  ㅇ 웹페이지 레이아웃에, 의미적인(Semantic) 마크업을 써서, 구획화하는(Sectioning) 요소들
     - 웹페이지 전체 또는 일정 영역을, 의미적으로 구획,분할할 때, 사용되는 요소들


2. 시맨틱 요소 종류

  ㅇ 종류 : header, nav, main, section, article, aside, footer

  ㅇ 개략적인 구획 例)
        

  ㅇ header 요소
     - 해당 문서의 머리글 (주로, 제목)
        . 통상, 웹페이지 상단에, 로고 이미지,사이트 제목,네비게이션 등을 위치시킬 때 사용
        . 또한, section 요소 내 제목을 줄 때도 사용

  ㅇ nav 요소
     - 해당 사이트의 주 네비게이션용(탐색용) 링크를 제공할 때 사용
        . 통상, header 요소 내에 둘 때 좋음

  ㅇ main 요소
     - 메인 콘텐츠에 해당되어, body 요소에 포함되지만, 섹션 요소는 아님 
        . 2 이상 존재 가능하지만, 문서에서 단 1개만 보여짐 (나머지는 hidden 속성으로 감춰짐)
     - 섹션 요소들인 section, article, asdie, nav 요소들을 포함 가능
     - 단, header, footer 요소는 main 요소 내부에 직접 포함하면 안됨

  ㅇ section 요소
     - 주제별로 그룹화(섹션화)시키거나, 장이나 절로써 구분시키는 글
        . 즉, 연관된 컨텐츠를 묶는데 사용됨
        . 통상, 각 섹션은 머리글과 콘텐츠들로 구성됨

  ㅇ article 요소
     - 독립된 단편 글 또는 재사용 가능한 글
        . 例) 잡지/신문 등의 기사, 블로그의 포스트, 주석 등
        . 독립시켜 보았을 때도 의미 전달에 여전히 문제가 없는 글

  ㅇ aside 요소 
     - 본문 내용 중에 추가 설명 또는 분리된 컨텐츠 표현이 필요할 때,
        . 통상, 본문 또는 주변 콘텐트와 크게 관계가 없는 내용을 사이드바 영역으로 표시하는데 유용
     - 따라서, 비록 aside 요소가 없더라도 컨텐츠 내용 전달에 문제가 없는 경우

  ㅇ footer 요소
     - 문서의 바닥글
        . 통상, 저작자,저작권,연관 링크 등과 같은 정보를 보여줌
        . 또한, section 요소 내 바닥글을 줄 때도 사용

1. ▷ Top (분류 펼침)      :     1,594개 분류    6,533건 해설 분류 검색 ^New