새로 알게된 태그들

김민서·2024년 6월 11일

HTML & CSS

목록 보기

4/6

meter

스칼라 값 또는 측정값을 시각적으로 표현하는 데 사용된다.
범위 내에서 값의 수준을 나타내며, 성능, 진행 상황 또는 기타 연속적 데이터를 시각적으로 표현한다. 특정 값이 미리 정의된 범위 내에서 어느 위치에 있는지를 나타낸다.

<meter value="0.6">60%</meter>

태그 안 내부 컨텐츠는 스크린 리더에 적용하기 위해 작성한다.

속성

value (필수): meter 요소에 의해 나타내어지는 값
min: 값의 최소 범위 지정 (기본값: 0)
max: 값의 최대 범위 지정 (기본값: 1)
low: 낮은 값의 경계 지정. 이 값 아래는 낮은 범위로 간주됨.
high: 높은 값의 경계 지정. 이 값 이상은 높은 범위로 간주됨.
optimum: 최적의 값 지정. 최적의 범위 내에 값이 들어가면 시각적으로 더 긍정적으로 표현될 수 있음
form (선택): meter 요소가 속한 폼의 ID 지정

progress

말 그대로 작업의 진행 상황을 나타내는 데 사용된다. 파일 다운로드, 업로드, 페이지 로드, 작업 완료 등을 시각적으로 표시하는 데 유용하다.

<progress value="70" max="100">70%</progress>

속성

value (선택): 진행 상황의 현재 값을 나타냄. 선택적 속성이지만, 설정하지 않으면 indeterminate 상태로 간주됨
interminate 상태:
max: 작업의 최대 값 지정 (기본값: 1)

dialog

사용자와 상호작용하는 대화 상자를 나타낸다. 모달 형식의 대화 상태를 만들 때 사용된다.

<dialog>
    <p>이것은 대화 상자입니다.</p>
    <button>닫기</button>
</dialog>

속성

open: 대화 상자가 열려 있는지 여부를 나타냅니다. 이 속성이 있으면 대화 상자가 열립니다.

template

클라이언트 측 렌더링 엔진에서 처리되지 않는 마크업을 정의하는 데 사용된다. 이를 통해 클라이언트 측 스크립트로 동적으로 생성되거나 복제될 수 있는 마크업을 정의할 수 있다. template 요소는 그 내용이 렌더링되지 않고 페이지 로드 시에만 파싱되기 때문에 화면에 표시되지 않는다.

<template id="example">
    <h1>Hello, World!</h1>
</template>

동적으로 생성되는 콘텐츠를 정의할 때 사용된다.
예를 들어, JavaScript로 표 데이터를 생성하거나 리스트 항목을 만들 때, 프레임워크 및 라이브러리에서 컴포넌트를 생성할 때, 서버 측 렌더링 없이 클라이언트 측에서 HTML 마크업을 템플릿으로 사용된다.

details, summary

접히고 펼쳐지는 세부 정보를 제공하는 데 사용된다.(토글) 사용자가 클릭하면 세부 정보가 펼쳐지거나 접힌다.

세부 정보 펼치기 전 세부 정보 펼친 후

<details>
    <summary>세부 정보</summary>
    <p>여기에 세부 정보를 입력합니다.</p>
</details>

속성

open: 세부 정보가 열려 있는지 여부 (설정 시 페이지 로드 시 세부 정보를 열어둘 수 있음)

picture

다양한 미디어 유형과 미디어 쿼리를 사용하여 다양한 환경에서 최적화된 이미지를 제공하는 데 사용된다. 주로 반응형 웹 디자인에서 사용되며, 다양한 디바이스 및 화면 크기에 맞춰 이미지를 선택하여 제공할 수 있다.

<picture>
  <source media="(min-width: 650px)" srcset="large.jpg">
  <source media="(min-width: 465px)" srcset="medium.jpg">
  <img src="small.jpg" alt="A rad wolf">
</picture>

속성

source
- media: 미디어 쿼리를 정의하여 특정 조건에 맞는 경우에만 해당 이미지를 사용
- srcset: 이미지의 경로와 이미지의 크기 지정
- type: source 요소의 MIME 유형을 지정
img: source 요소에서 지정된 모든 이미지가 로드되지 않는 경우를 대비하여 기본 이미지를 제공 (대부분 img 요소는 picture 요소 내 마지막에 위치함)

다양한 해상도와 화면 크기를 지원하기 위해 이미지를 선택하는 경우, 다양한 이미지 포맷을 지원하는 경우 사용된다.
특히 모바일 장치 및 느린 네트워크 연결에서 유용하게 사용된다.

output

사용자 입력 또는 스크립트 연산의 결과를 나타내는 데 사용된다.
주로 폼 요소와 함께 사용되며, 사용자가 어떤 작업을 수행하면 해당 작업의 결과를 표시하는 데 유용하다.

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" id="a" value="0"> +
  <input type="number" id="b" value="0"> =
  <output name="result" for="a b">0</output>
</form>