3-2 시멘틱 요소

 

시멘틱 요소

-semantic : "의미 있는", "의미의"

-> 표현 중심이 아닌 의미 있는 구조의 문서 작성을 위한 요소

 

-HTML 문서에 의미 부여가 가능

-> 사람이 읽고 이해하는 것이 용이

-> 검색 엔진, 문서 해석기 등에 의한 자동적인 문서 처리/해석도 가능

 

-문서 구조화 : header, nav, section, article, aside, footer

-블록 요소 : main, figure ~ figcaption, details ~ summary

-인라인 요소 : time, meter, progress, ruby ~ rt, wbr

 

 

 

기존의 문서 구조화 방식

 

 

 

 

문서 구조화를 위한 요소

header	머리말(로고, 사이트 이름 등)을 나타내는 요소
nav	메뉴 영역을 나타내는 요소
section	제목/주제별로 나눌 수 있는 문서의 내용 영역을 구성하는 요소
article	개별 콘텐츠를 나타내는 요소
aside	좌우측의 보조 콘텐츠 영역을 나타내는 요소
footer	꼬리말(제작자 정보 및 저작권 정보 등)을 나타내는 요소

 

 

 

 

 

header, footer

: 위치 무관

: 내용 중간(section/article)에서 사용되는 경우 -> 머리글/바닥글 역할

: section, header, footer 요소 포함 불가

 

 

 

nav 요소

: 주로 웹 페이지 전체에 적용되는 상단의 메뉴를 표시하기 위한 링크를 모아 놓은 곳

-> 페이지의 모든 링크를 포함하는 것은 아님

 

입력)

 

 

출력)

 

 

 

aside 요소

: 주요 콘텐츠 이외에 남아 있는 콘텐츠나 참고가 되는 콘텐츠 등을 나타낼 때 사용

-> 본문과는 직접 관련이 없지만 링크나 관련 정보를 표현

-> 주로 웹 페이지의 왼쪽 또는 오른쪽에 위치

 

 

 

section 요소

: 하나의 주제로 구성된 문서의 내용 영역을 표현

-> 하나의 section 요소에는 오직 하나의 헤딩 요소(h1~h6)만 사용

 

- 하나의 주제 안에 다른 세부 주제가 존재하는 경우

 

 

-하나의 요소에 2개 이상의 헤딩 요소가 사용된 경우 : 헤딩 요소의 레벨에 따라 묵시적으로 결정

1. 같은 레벨의 해딩 요소 사용

 

2. 다른 레벨의 헤딩 요소 사용

 

article 요소

: 독립적으로 분배 및 재사용이 가능한 개별 콘텐츠(뉴스 기사, 블로그 포스트 등)을 나타낼 때 사용

-> section 요소와 분리하여 개별적으로 사용 가능 -> article 요소 안에 section 또는 article 요소 포함 가능

 

 

입력)

 

 

출력)

 

 

 

시멘틱 블록 요소

- 주요 콘텐츠 블록을 지정하는 main 요소

: 문서 body 영역의 주요 콘텐츠 블록을 지정할 때 사용

-> 문서 전체에서 반복적으로 사용되는 콘텐츠는 포함 불가

ex) 사이드바, 내비게이션 링크, 저작권 정보, 사이트 로고, 검색 폼 등

-> 문서에서 유일한 부분을 의미 -> 오직 한 번만 사용

-> 문서의 전체적인 레이아웃에는 아무런 영향을 주지 않음

-> article, aside, header, footer, nav 요소의 하위 요소로 사용 불가

 

입력)

 

출력)

// 출력에는 아무런 영향을 주지 않음.  문서구조에 의미를 부여하는 기능.

 

 

 

: 삽입 그림을 블록화하는 figure 요소 -> 하위 요소 : figcaption

-본문에서 삽입된 독립적인 콘텐츠(그림, 다이어그램, 사진, 소스 코드, 동영상 등)를 하나로 묶어 블록을 형성하고, 캡션을 포함시켜 서로의 관계를 명확히 구조화시킬 때 사용

-> 요소의 위치는 주요 콘텐츠와 독립적 : 삭제하더라도 문서의 흐름에는 아무런 영향을 주지 않음

-figcaption 요소

: figure 요소에 대한 캡션을 표시하는 자식 요소

: 위치 -> figure 요소 바로 다음 또는 맨 마지막

 

입력)

 

 

출력)

 

 

 

: 세부정보를 선택적으로 표시하는 details 요소 -> 하위 요소 : summary

-사용자의 요구에 따라 추가적인 세부정보를 보여주거나 숨기는 형태의 상호작용을 지원하는 요소

-> 세부정보는 어떤 종류의 콘텐츠도 가능

-> open 속성 : 세부정보가 사용자에게 보여지도록 지정

-summary 요소 

:세부정보에 대한 캡션을 지정하는 details 요소의 자식 요소

:캡션의 클릭을 통해서도 세부정보의 표시 여부의 선택이 가능

: 미사용 -> "세부정보"라는 기본 제목 표시

 

입력)

 

출력)

// css에는 입력에서 open속성을 사용했기 때문에 세부 정보가 펼쳐져 보임.

// HTML, JavaScript도 화살표를 클릭하면 세부 정보를 펼칠 수 있음.

 

 

 

시멘틱 인라인 요소

-time : 시간/날짜를 지정하는 요소

: 시스템이 인식할 수 있도록 정확한 형식의 시간/날짜를 지정하는 datetime 속성

 

입력)

 

출력)

 

 

 

-meter : 주어진 값이나 비율을 나타내는 요소

: 현재 디스크 사용량과 같이 일정 시점에서 주어진 (정적인) 양을 표시하는 "측정기" gauge

-> value 속성 : (필수) 실제로 측정한 현재의 값

-> min, max 속성 : 요소가 인식하는 최소값(0.0)과 최대값(1.0)

-> low, high 속성: 허용되는 범위의 최소값/최대값

-> optimum 속성 : 최적의 값

 

입력)

 

출력)

 

 

-progress : 작업의 진행률을 나타내는 요소

-> 파일 복사, 다운로드 등과 같이 동적으로 변하는 작업의 진행 정도를 표현할 때 유용

-> value 속성 : 완료된 작업의 양을 나타내는 현재 상태의 값(0.0 ~ 1.0 또는 0.0 ~ max)

-> max 속성 : 작업에 필요한 작업량의 최대값(1.0)

 

ex)

// 현재 진행 중인 상태의 값(value)의 지속적인 업데이트가 필요 -> 반드시 자바스크립트와의 연동이 필요

 

 

 

-ruby : 루비 주석을 지정하는 요소 -> 하위 요소 : rt

-> 루비 주석 : 일본어/한자의 기본 문자열 주변에 발음법이나 의미를 나타내기 위해 추가되는 짧은 텍스트

-> ruby 요소 : 하나 이상의 문자로 구성되는 기본 텍스트를 작성

-> rt 요소 : ruby요소의 자식 요소. rt 요소 바로 앞에 오는 하나 이상의 구문에 대한 루비 주석 표시

 

입력)

 

출력)

// 자동 줄바꿈X.

 

 

 

-wbr : 줄바꿈의 허용 위치를 지정하는 요소

-> 텍스트에서 줄바꿈을 허용할 위치를 지정할 때 사용

-> "허용 위치" : 줄바꿈이 수행되어도 괜찮은 지점

: 해당 위치에서 실제로 줄바꿈이 무조건 수행되는 것이 아니라 레이아웃의 배치 상황에 따라 결정

-> 긴 URL 또는 단어/텍스트를 표시할 때 유용

 

입력)

 

출력)