[HTML] 블록, 인라인 시맨틱 태그: figure, details, summary, mark, time, meter, progress

 시맨틱 태그는 크롤봇에게 단서를 알려주는 '주석'입니다. 문서의 구조(header, section, article, footer) 외에도 시맨틱 태그를 통해서 어떤 내용을 담고 있는지 알려줄 수 있습니다.

 

2022.04.27 - [Web] - [HTML] 시맨틱 태그, 웹페이지의 구조를 알려주는 주석

[HTML] 시맨틱 태그, 웹페이지의 구조를 알려주는 주석

 시맨틱 태그에 대한 자세한 설명은 위 글을 참조해주세요.

 

[ Contents ]

 

 

1. 블록 시맨틱 태그

1) figure - figcaption

  <figure>
    <figcaption>애드블록 예외 요청</figcaption>
    <img src="Adblock_alert.png" alt="adblock img">
  </figure>

 figure 태그는 '그림이나 차트, 삽화, 소스 코드'를 감싸는 시맨틱 태그입니다. figcaption 태그를 통해, 그림의 캡션도 달 수 있습니다.

 

 

 

2) details - summary

펼치기

접기

  <details>
    <summary>
      요약
    </summary>
    <p>사실은....</p>
  </details>

 details - summary 태그를 이용해서 '접은글'을 만들 수 있습니다. summary에는 '설명', '더보기' 등을 적어두고, summary 밖에다가 자세한 설명, 정보를 적습니다.

 기본값은 '접은 상태'이며, <details open>태그를 사용하면 펼친 상태로 만들 수 있습니다. 

 

 

 

2. 인라인 시맨틱 태그

1) mark

<mark>star가 되고나서</mark> Tistory

 mark는 중요한 텍스트를 의미하며, 형광팬으로 칠한 듯이 노란색 음영이 됩니다. 보통은 mark 태그에 CSS 스타일을 입혀서 다르게 강조하는 경우가 많습니다.

 

 

 

2) time

 

<time>09:31</time>

 시간을 나타내는 텍스트임을 알려주는 시맨틱 태그입니다. 별다른 CSS 효과는 없습니다.

 

 

 

3) meter

<meter value="90" min="0" max="100"></meter>

 범위(min, max)를 설정하고, 해당 값이 어느 정도인지 bar 형태로 알려주는 태그입니다. 특정 값을 시각화하는 데에 용이합니다.

 

 

 

4) progress

완성도 <progress value="70" max="100">90%</progress>

 meter와 비슷하지만, progress는 작업의 진행 정도를 나타내는 시맨틱 태그입니다. 시맨틱 태그는 '의미'가 중요한 만큼, meter와 progress의 쓰임을 잘 구분해서 사용하면 좋습니다.