WeniVooks

검색

HTML/CSS 에센셜

그 외 다양한 태그들

정도를 표현하는 태그

1. <meter>

특정 범위 내에서의 값을 시각적으로 표시하는 게이지입니다. 예를 들어 투표 결과, 디스크 사용량, 설문 조사 결과 등을 표시할 때 유용합니다.

  • 값이 높고 낮음에 따라 색상이 변합니다.

  • 사용량, 특정 후보를 선택한 투표 인구의 비율 등을 시각적으로 보여주고 싶을 때 <meter> 요소를 사용할 수 있습니다.

속성

  • value 현재값(필수)

  • min 최소값 (기본값: 0).

  • max 최대값 (기본값: 1)

  • low 낮다고 간주되는 값의 범위

  • high 높다고 간주되는 값의 범위

  • optimum 최적의 값

  • 내부 컨텐츠는 스크린리더에 적용하기 위해 작성해줍니다

2. <progress>

<progress> 태그는 작업의 진행 상황을 나타낼 때 사용됩니다. 이는 파일 업로드, 다운로드, 또는 작업의 완료 비율을 나타내는 데 유용합니다.

속성

  • value 현재 진행 상황을 지정합니다.
  • max 작업의 총량을 지정합니다. 기본값은 1입니다.
  • 내부 컨텐츠는 스크린리더에 적용하기 위해 작성해줍니다
meter vs progress?
  1. 용도
    • <meter> 어떠한 변화도 없는 고정된 값의 상태 나타낼 때 사용 ex) 게임 캐릭터 기본 능력치, 미세먼지의 수준
    • <progress> 진행상황 및 변화의 정도를 동적으로 나타낼 때 사용 ex) 파일 업로드 진행 상황, 다운로드 진행 상황 등.
  2. 속성
    • <meter>는 low, high, optimum과 같은 속성을 가질 수 있으며, 특정 범위를 정의할 수 있습니다.
    • <progress>는 value와 max 속성만을 가집니다.

3. <dialog>

  • <dialog> 는 대화 상자나 모달 창(modal window) 같은 대화형 컴포넌트를 만드는 데 사용됩니다. 사용자의 주의를 끌거나 추가 정보 입력을 요청하는 팝업 요소를 만들 때 유용합니다.
  • <dialog> 요소는 기본적으로는 화면에 보이지 않으며, JavaScript를 사용하여 표시하거나 숨길 수 있습니다
  • 접근성 측면에서도 유용합니다. 전통적 방식에서는 키보드 접근성, 포커스 관리 등을 직접 구현해야 하는 반면, 기본적인 접근성 기능(키보드 탐색, 포커스 관리 등)이 내장되어 있습니다.

속성

  • open
    • 대화 상자가 열려 있는 상태를 나타냅니다. 이 속성을 추가하면 대화 상자가 표시되고, 제거하면 숨겨집니다.

JS 메서드 (나중에 JS 배울때 다시 와서 보기!)

  • show(): 대화 상자를 비모달 상태로 표시합니다.
  • showModal(): 대화 상자를 모달 상태로 표시합니다.
  • close(): 대화 상자를 닫습니다.

4. <template>

<template> 태그는 재사용 가능한 HTML 코드 블록을 정의할 수 있습니다. <template> 태그 안의 내용은 렌더링되지 않지만, JavaScript를 통해 클론하여 사용할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>템플릿을 사용한 동적 테이블 행 추가</title>
    <style>
      form {
        margin-bottom: 20px;
      }
      table {
        width: 100%;
        border-collapse: collapse;
      }
      table,
      th,
      td {
        border: 1px solid black;
      }
      th,
      td {
        padding: 8px;
        text-align: left;
      }
      thead {
        background-color: antiquewhite;
      }
    </style>
  </head>
  <body>
    <h1>테이블 행 동적으로 추가하기</h1>
    <form id="data-form">
      <label for="name">이름:</label>
      <input type="text" id="name" name="name" required />
      <label for="age">나이:</label>
      <input type="number" id="age" name="age" required />
      <button type="submit">행 추가</button>
    </form>
 
    <table id="data-table">
      <thead>
        <tr>
          <th>이름</th>
          <th>나이</th>
        </tr>
      </thead>
      <tbody>
        <!-- 새로운 행이 여기에 추가됩니다 -->
      </tbody>
    </table>
 
    <template id="row-template">
      <tr>
        <td class="name"></td>
        <td class="age"></td>
      </tr>
    </template>
 
    <script>
      document
        .getElementById('data-form')
        .addEventListener('submit', function (event) {
          event.preventDefault();
 
          const name = document.getElementById('name').value;
          const age = document.getElementById('age').value;
 
          const template = document.getElementById('row-template');
          const clone = template.content.cloneNode(true);
 
          clone.querySelector('.name').textContent = name;
          clone.querySelector('.age').textContent = age;
 
          document.querySelector('#data-table tbody').appendChild(clone);
 
          // 폼 초기화
          document.getElementById('data-form').reset();
        });
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>템플릿을 사용한 동적 테이블 행 추가</title>
    <style>
      form {
        margin-bottom: 20px;
      }
      table {
        width: 100%;
        border-collapse: collapse;
      }
      table,
      th,
      td {
        border: 1px solid black;
      }
      th,
      td {
        padding: 8px;
        text-align: left;
      }
      thead {
        background-color: antiquewhite;
      }
    </style>
  </head>
  <body>
    <h1>테이블 행 동적으로 추가하기</h1>
    <form id="data-form">
      <label for="name">이름:</label>
      <input type="text" id="name" name="name" required />
      <label for="age">나이:</label>
      <input type="number" id="age" name="age" required />
      <button type="submit">행 추가</button>
    </form>
 
    <table id="data-table">
      <thead>
        <tr>
          <th>이름</th>
          <th>나이</th>
        </tr>
      </thead>
      <tbody>
        <!-- 새로운 행이 여기에 추가됩니다 -->
      </tbody>
    </table>
 
    <template id="row-template">
      <tr>
        <td class="name"></td>
        <td class="age"></td>
      </tr>
    </template>
 
    <script>
      document
        .getElementById('data-form')
        .addEventListener('submit', function (event) {
          event.preventDefault();
 
          const name = document.getElementById('name').value;
          const age = document.getElementById('age').value;
 
          const template = document.getElementById('row-template');
          const clone = template.content.cloneNode(true);
 
          clone.querySelector('.name').textContent = name;
          clone.querySelector('.age').textContent = age;
 
          document.querySelector('#data-table tbody').appendChild(clone);
 
          // 폼 초기화
          document.getElementById('data-form').reset();
        });
    </script>
  </body>
</html>
  • 템플릿 내의 콘텐츠는 브라우저에 의해 파싱되지만 초기에는 DOM에 추가되지 않기 때문에 메모리 사용을 줄이고 성능을 향상시킵니다. 필요할 때마다 클론하여 사용함으로써 효율적으로 재사용할 수 있습니다.
  • 템플릿을 사용하여 재사용 가능한 UI 컴포넌트를 쉽게 정의할 수 있습니다. 이는 모듈화된 코드를 작성하는 데 도움이 되며, 다양한 부분에서 동일한 템플릿을 사용할 수 있습니다.

5. <details> , <summary>

유저의 클릭으로 정보를 보여주고 숨기는 토글 UI를 제공합니다. 일반적으로 JS로 구현했지만 이제는 HTML 태그로도 구현 가능합니다.

  • <details> 태그는 사용자가 클릭하여 내용을 열고 닫을 수 있는 위젯을 만듭니다.
  • <summary> 태그는 해당 콘텐츠의 제목을 정의합니다.

6. <picture>

장치나 환경에 따라 각기 다른 버전의 이미지를 표시할 수 있습니다. 다양한 크기나 포맷의 이미지를 제공하여, 사용자의 장치와 화면 해상도에 따라 가장 적합한 이미지를 선택할 수 있도록 합니다. <source> 태그, <img>태그와 함께 쓰입니다. 페이지 로딩 속도와 관련 있습니다.

  • <source> 태그

    • 속성
      • srcset : 사용할 이미지 파일의 경로를 지정합니다. 여러 해상도의 이미지를 쉼표로 구분하여 지정할 수 있습니다.
      • media : 미디어 쿼리를 지정하여 언제 이 소스를 사용할지 결정합니다.
      • type : 이미지 형식을 명시합니다.

  • <img> 태그

    • 기본 이미지를 정의합니다. 브라우저가 picture나 source를 지원하지 않는 경우에 표시되는 폴백(fallback) 이미지 역할을 합니다.<img>는 <picture> 내에서 반드시 포함되어야 하는 필수 요소입니다.
<!-- 화면 크기별로 최적화된 이미지 제공하는 예제 (반응형) -->
<picture>
  <source srcset="image-320w.jpg" media="(max-width: 320px)" />
  <source srcset="image-800w.jpg" media="(max-width: 800px)" />
  <img src="image-default.jpg" alt="기본 이미지" />
</picture>
<!-- 브라우저는 위에서부터 아래로 <source> 요소를 평가하고 첫 번째로 조건이 일치하는 소스를 선택합니다. 일치하는 소스가 없으면 <img> 요소가 폴백(fallback)으로 사용됩니다. -->
<!-- 화면 크기별로 최적화된 이미지 제공하는 예제 (반응형) -->
<picture>
  <source srcset="image-320w.jpg" media="(max-width: 320px)" />
  <source srcset="image-800w.jpg" media="(max-width: 800px)" />
  <img src="image-default.jpg" alt="기본 이미지" />
</picture>
<!-- 브라우저는 위에서부터 아래로 <source> 요소를 평가하고 첫 번째로 조건이 일치하는 소스를 선택합니다. 일치하는 소스가 없으면 <img> 요소가 폴백(fallback)으로 사용됩니다. -->
<!-- 디바이스나 화면 크기에 따라 다른 비율이나 구도의 이미지를 제공합니다(아트디렉션) -->
<picture>
  <!-- 모바일용 세로 방향 이미지 -->
  <source srcset="portrait.jpg" media="(max-width: 600px)" />
  <!-- 데스크톱용 가로 방향 이미지 -->
  <img src="landscape.jpg" alt="풍경 이미지" />
</picture>
<!-- 디바이스나 화면 크기에 따라 다른 비율이나 구도의 이미지를 제공합니다(아트디렉션) -->
<picture>
  <!-- 모바일용 세로 방향 이미지 -->
  <source srcset="portrait.jpg" media="(max-width: 600px)" />
  <!-- 데스크톱용 가로 방향 이미지 -->
  <img src="landscape.jpg" alt="풍경 이미지" />
</picture>

7. <output>

계산 결과나 사용자 동작의 결과를 나타낼 때 사용됩니다. 주로 폼과 함께 사용되어 사용자 입력에 따른 결과를 실시간으로 보여주는 데 유용합니다. <output> 태그는 접근성을 고려한 태그로, 스크린 리더와 같은 보조 기술이 쉽게 인식할 수 있도록 합니다.

8. <time>

<time> 태그는 특정 시간 또는 날짜를 시멘틱하게 나타내는 데 사용됩니다. 이 태그는 기계가 읽을 수 있는 형식으로 날짜와 시간 정보를 마크업할 수 있게 해줍니다. 브라우저에서 표시될 때 특별히 시각적으로 변화를 주지는 않습니다.

<time datetime="YYYY-MM-DDThh:mm:ssTZD">표시할 텍스트</time>
<time datetime="YYYY-MM-DDThh:mm:ssTZD">표시할 텍스트</time>
  • datetime 속성 (선택적으로 사용하면 됩니다. 웹 접근성을 위해 사용하는 것을 권장합니다.)
    • 기계가 읽을 수 있는 형식의 날짜/시간을 지정합니다
    • YYYY: 4자리 연도 / MM: 2자리 월 / DD: 2자리 일
    • T: 날짜와 시간 구분자
    • hh: 2자리 시간 (24시간 형식)/ mm: 2자리 분/ ss: 2자리 초
    • TZD: 시간대 (선택사항, 예: +09:00)
  • 검색 엔진이 콘텐츠의 시간 정보를 더 정확히 이해할 수 있으며, 스크린 리더와 같은 보조 기술이 시간 정보를 더 정확하게 해석할 수 있습니다.
  • 캘린더 추가, 알림 설정 등의 기능을 위해 시간 데이터를 자동으로 추출할 수 있고 CSS를 사용해 시간 요소를 특별히 스타일링할 수 있습니다.
7.7 (해보기) <form>로그인 모달 완성하기8장 검색도 잘되게 해보자