시멘틱 인라인 요소
mark 요소
시각적 및 의미적으로 특정 문구/단어를 강조
- mark는 "표시하다"라는 의미이다.
- 강조되는 부분을 노란색 형광펜으로 표시
- html5 이전에는 <strong>요소로 사용했다. 단지 굵은 형태로 표현됐다.
time 요소
시간/날짜 표현이란 의미 부여
- 시간/날짜를 지정해서 기계가 읽을 수 있는 형태로 변환하기 위해 datetime이란 속성이 있다.
meter 요소
일정 범위의 측정값이나 분포 비율 등 표시
디스크 사용률 <meter max=100 value=70></meter>
영화 예매율 <meter min=0 max=100 value=95></meter>
선거 투표율 <meter value=0.35></meter>디스크 사용률
영화 예매율
선거 투표율
- 일정 시점에서 주어진 양을 표시
- 속성 value : 실제 측정한 데이터 값
- min, max : 요소가 인식하는 최소값, 최대값을 지정해줄 수 있음
- low, hight : 허용되는 범위의 최소값과 최대값
- optimum : 최적의 기대치
progress 요소
작업의 현재 진행 상태를 표시
<progress value="25" max="100"></progress>- 파일 복사나 다운로드 할 때 진행 정도를 표시할 때 유용하게 쓸 수 있다.
- value(현재 진행 중인 작업의 상태 값)와 max(작업이 얼마나 필요한지 전체적으로 나타내는 최대 값)
- 다운로드 되는 동안 25, 26, 27 ... 계속 value가 지속적으로 업데이트 되어야 한다. 그래서 반드시 자바스크립트와 연동이 필요하다.
ruby 요소
일본어/한자의 기본 문자열 주변에 발음법이나 의미를 나타내기 위해 추가되는 짧은 텍스트
<ruby>大韓民國<rt>대한민국</rt></ruby>大韓民國
- 하위 요소로 rt, rp
- ruby 요소에 기본 텍스트, rt 요소에는 주석을 작성한다
- rp 루비 텍스트 주변에 괄호를 둠으로써 루비 주석을 지원하지 않는 브라우저를 위해 사용된다
시멘틱 블록 요소
main 요소
문서 body 영역의 주요 콘텐츠 블록을 지정할 때 사용한다.
<body>
<main>
<h1>타이틀</h1>
<p>내용</p>
<article>
컨텐츠 내용
</article>
...
</main>
</body>- 문서 전체에서 반복적으로 사용되는 콘텐츠는 포함 불가 (사이드바, 내비게이션 링크, 저작권 정보, 사이트 로고, 검색 폼 등)
- 문서에서 유일한 부분이므로 body 요소 내에서 딱 한번만 사용해야 한다.
- article, aside, footer, header, nav 요소의 하위 요소로 사용 불가
figure 요소
독립적인 콘텐츠 묶어 블록 형성하고, 캡션을 포함시켜 구조화 할 때 사용
- 그림, 다이어그램, 사진, 소스 코드, 동영상 등이 주요 콘텐츠와 독립적일 때
- figcation 하위 요소로 써서 캡션을 줄 수 있다.
- figure 태그 바로 아래, 혹은 종료 태그 바로 앞에서 사용 된다.
details 요소
사용자의 요구에 따라 세부 정보를 보여주거나 숨기는 상호작용 지원한다
<details>
<summary>HTML5</summary>
<p>details 요소</p>
</details>
<details open>
<summary>CSS</summary>
<p>open</p>
</details>HTML5
details 요소
CSS
open
- 세부정보 어떤 종류의 콘텐츠도 가능
- open 속성, 세부정보가 사용자에게 보여지도록 지정
- summary 하위 요소: 세부정보에 대한 내용, details 요소의 첫 번째 자식 요소로 사용해야 한다.
반응형
'HTML' 카테고리의 다른 글
| html5 시멘틱(semantic) 요소 (0) | 2021.09.04 |
|---|