그 외 다양한 태그들
정도를 표현하는 태그
1. <meter>
값의 수준을 보여줍니다. 이는 성능, 진행 상황 또는 기타 연속적 데이터를 시각적으로 표현하는 데 유용합니다. <meter> 태그는 주로 "정량적 값"을 나타내는 데 사용됩니다.
-
값이 높고 낮음에 따라 색상이 변합니다.
-
사용량, 특정 후보를 선택한 투표 인구의 비율 등을 시각적으로 보여주고 싶을 때
<meter>요소를 사용할 수 있습니다.
속성
-
value(필수): 현재 측정된 값을 지정합니다. -
min(선택): 값의 최솟값을 지정합니다. 기본값은 0입니다. -
max(선택): 값의 최댓값을 지정합니다. 기본값은 1입니다. -
low(선택): '낮음' 범위의 임계값을 지정합니다. -
high(선택): '높음' 범위의 임계값을 지정합니다. -
optimum(선택): '이상적' 범위의 임계값을 지정합니다. -
내부 컨텐츠는 스크린리더에 적용하기 위해 작성해줍니다
2. <progress>
<progress> 태그는 작업의 진행 상황을 나타낼 때 사용됩니다. 이는 파일 업로드, 다운로드, 또는 작업의 완료 비율을 나타내는 데 유용합니다.
속성
value(선택): 현재 진행 상황을 지정합니다.max(선택): 작업의 최댓값을 지정합니다. 기본값은 1입니다.
- 내부 컨텐츠는 스크린리더에 적용하기 위해 작성해줍니다
meter vs progress?
- 용도
<meter>어떠한 변화도 없는 고정된 값의 상태 나타낼 때 사용 ex) 게임 캐릭터 기본 능력치, 미세먼지의 수준<progress>진행상황 및 변화를 나타낼 때 사용 ex) 파일 업로드 진행 상황, 다운로드 진행 상황 등.
- 속성
<meter>는low,high,optimum과 같은 속성을 가질 수 있으며, 특정 범위를 정의할 수 있습니다.<progress>는value와max속성만을 가집니다.
3. <dialog>
<dialog> 태그는 대화 상자(dialog box)를 쉽게 구현할 수 있게 해주는 태그입니다. 기본적으로 사용자와 상호작용하는 모달 창을 만드는 데 사용됩니다.
속성
- 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>5. <details> , <summary>
유저의 클릭으로 정보를 보여주고 숨기는 UI를 제공합니다.
<details> 태그는 사용자가 클릭하여 내용을 열고 닫을 수 있는 위젯을 만듭니다. <summary> 태그는 해당 콘텐츠의 제목을 정의합니다.
속성
- details는 CSS open 속성으로 스타일 지정 가능
6. <picture>
장치나 환경에 따라 각기 다른 버전의 이미지를 표시할 수 있습니다. 다양한 크기나 포맷의 이미지를 제공하여, 사용자의 장치와 화면 해상도에 따라 가장 적합한 이미지를 선택할 수 있도록 합니다. source 태그, img태그와 함께 쓰입니다.
-
페이지 로딩 속도와 관련 있습니다.
-
<source>태그- 속성
- srcset : 사용할 이미지 파일의 경로를 지정합니다. 여러 해상도의 이미지를 쉼표로 구분하여 지정할 수 있습니다.
- media : 미디어 조건을 정의합니다.
- type : 이미지 형식을 명시합니다.
- 속성
-
<img>태그- 기본 이미지를 정의합니다. 브라우저가 picture나 source를 지원하지 않는 경우에 표시되는 폴백(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="Description of the image" /> </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="Description of the image" /> </picture><!-- 화면 크기에 따라 다른 이미지 구성을 제공하는 예제 (아트디렉션) --> <picture> <source srcset="image-narrow.jpg" media="(max-width: 600px)" /> <source srcset="image-wide.jpg" media="(min-width: 601px)" /> <img src="image-default.jpg" alt="Art direction example" /> </picture><!-- 화면 크기에 따라 다른 이미지 구성을 제공하는 예제 (아트디렉션) --> <picture> <source srcset="image-narrow.jpg" media="(max-width: 600px)" /> <source srcset="image-wide.jpg" media="(min-width: 601px)" /> <img src="image-default.jpg" alt="Art direction example" /> </picture>
7. <output>
계산 결과나 사용자 동작의 결과를 나타낼 때 사용됩니다. 주로 폼과 함께 사용되어 사용자 입력에 따른 결과를 실시간으로 보여주는 데 유용합니다. <output> 태그는 접근성을 고려한 태그로, 스크린 리더와 같은 보조 기술이 쉽게 인식할 수 있도록 합니다.
8. <time>
<time> 태그는 특정 시간 또는 날짜를 나타내는 데 사용됩니다. 브라우저에서 표시될 때 특별히 시각적으로 변화를 주지는 않습니다.
datetime속성 (선택적으로 사용하면 됩니다. 웹 접근성을 위해 사용하는 것을 권장합니다.)- YYYY: 4자리 연도 / MM: 2자리 월 / DD: 2자리 일
- T: 날짜와 시간 구분자
- hh: 2자리 시간 (24시간 형식)/ mm: 2자리 분/ ss: 2자리 초
- TZD: 시간대 (선택사항, 예: +09:00)