Page-Structure

 

●Page-Structure Elements

 ▷웹 사이트에서 구역을 정의하는 블록수준의 요소들.

 ▷기본적으로는 아무 기능도 없다. (CSS에서 디자인을 정의해야 함)

 

 

○header (<header> ~ </header>)

 ▷일반적으로 큰 제목, 로고 등이 있는 큰 띠.

 

○navigation bar (<nav> ~ <nav>)

 ▷홈 페이지의 메인 섹션으로 연결을 도와주는 bar

 ▷대부분 메뉴 버튼이나 링크, 탭으로 표현됨.

 

○main content (<main> ~ </main>) (<article>, <section>, <div> 등도 사용됨,)

 ▷웹 페이지의 중심으로, 보여주고 싶은 내용을 보여줌.

  ▷article (<article> ~ </article>) : 주로 외부에서 가져온 내용

  ▷section (<section> ~ </section>) : 구획

 

○side bar (<aside> ~ </aside>) (주로 main안에서 나타남)

 ▷웹 페이지 주변(옆)의 링크, 인용부, 광고 등

 

○footer (<footer> ~ </footer>)

 ▷페이지의 바닥 줄로, 주로 작은 정보들, 저작권, 연락처 등을 표시)

 

 

 

○mark (<mark> ~ </mark>)

 ▷내용이 중요함을 알림.

 

○wbr (<wbr>)

 ○페이지의 줄바꿈 규칙을 무시하고, 줄을 바꿀 수 있는 위치

 

○figure (<figure> ~ </figure>)

 ▷이미지가 나올 때, 이를 설명하는 내용과 함께 나온다.

 ▷설명 내용 : <figcaption> ~ </figcaption>

 

○detail(<detail> ~ </detail>)

 ▷기본적으로 안의 내용을 숨기고 있으며, summary (<summary> ~ </summary>)내의 내용만 보여줌.

 ▷클릭하여 내용을 보고 숨길수있음.

 

○meter(<meter> ~ </meter>)

 ▷Range를 이용하여 길이를 보여줌.

 ▶속성 - range와 유사함.

 

※Inline-level element / Block-level element

 ○Inline-level element

  ▷문서의 흐름을 바꾸지 않음 (따로 박스를 생성하지 않음)

  ▶종류 (예시) : img, a, em, strong, span - CSS를 위한 그룹화 요소,non-semantic

 ○Block-level element

  ▷자신이 따로 글자 박스를 만듬. 

  ▶종류 (예시) : p, all headings(h1~h6), div - CSS를 위한 그룹화 요소,non-semantic