...
이번 포스팅은 HTML5을 배우는데 있어 접하지 못한 독특한 엘리먼트들을 소개해 보는 시간을 가져볼 것이다. 기존의 태그와 자바스크립트를 조합하여 힘들게 구현해야 하는 컴포넌트들을 태그 하나로만 구현할수 있어, 비록 아주 자주 사용될 녀석들이 아니지만 한번 쯤 훑어보고 존재 정도만 머리에 각인시키고 있다면, 추후에 도움이 될 것이다. 각 요소의 속성 상세 스펙은 MDN을 참고하면 된다.
progress 태그
progress 요소는 진행 정도를 나타내는 바를 만드는 태그이다. 주로 자신의 스킬 퍼센티지를 표기하거나 api 사용량을 표현하는데 자주 애용된다.
엘리먼트의 max 에 따른 value 속성값에 따라 bar의 게이지가 포함되는 원리이다.
<progress value="50" max="100"></progress>
See the Pen progress by barzz12 (@inpaSkyrim) on CodePen.
meter 태그
meter 태그는 progress 요소와 같이 진행 정도 바를 표현하지만, progress는 값의 상태만 전달 할 수 있는 것에 비해 meter은 속성에 따라 값이 높고 낮을때 색상을 다르게 설정하여 작업의 진행 상태를 세세하게 표현이 가능하다.
value, min, max, low, high, optimum 속성을 통해 진행정도에 따른 색상변경이 가능하다. 기본적으로 값의 포화도에 따라 초록색 → 노란색 → 빨간색으로 색상이 변경된다.
- value : 현재 측정값 지정
- min : 범위의 하한을 지정
- max : 범위의 상한을 지정
- low : 낮은 값 범위 지정
- high : 높은 값 범위 지정
- optimum : 최상의 또는 최적의 숫자 범위를 지정
<meter value="15" min="0" max="100" low="20" high="65" optimum="15" id="meter"></meter>
See the Pen meter by barzz12 (@inpaSkyrim) on CodePen.
map & area 태그
이미지맵을 만들 수 있는 엘리먼트이다. 이미지맵이란 이미지에 여러가지 클릭 가능한 영역을 말하는 것이다.
쉽게 예를 들어 각 국가별 코로나 발생 현황 사이트를 만든다고 했을때, 세계지도에 국가 영토 위치별로 해당 링크 요소를 이미지에 여러개 위치 시켜주고 싶을때 이용된다고 보면 된다. 바로 아래 예제를 통해 한눈에 이해할 수 있을 것이다.
<map name="continents_map">
<area shape="circle" coords="70,70,10" href="#north_america"> <!-- 이미지의 좌표 70,70,10 에 링크를 표시 -->
<area shape="circle" coords="133,185,10" href="#south_america">
<area shape="circle" coords="270,137,10" href="#africa">
<area shape="circle" coords="292,44,10" href="#europe">
<area shape="circle" coords="469,201,10" href="#australia">
<area shape="circle" coords="374,65,10" href="#asia">
<area shape="circle" coords="340,267,10" href="#antartica">
</map>
<!-- usemap 속성을 통해 map & area 기능을 사용할 이미지를 상호작용한다 (continents_map) -->
<img usemap="#continents_map" src=https://bit.ly/2bgFrvL width="600px" />
See the Pen Image map by Preethi Sam (@rpsthecoder) on CodePen.
picture 태그
이미 <img> 태그로 이미지를 문서에 표현 해왔겠지만, <picture> 태그는 특정 화면 크기, 해상도에 따라 여러 이미지 지정이 가능하여, 개발자는 특정 화면 크기, 해상도 또는 기타 미디어 조건에 가장 적합한 이미지를 제공할 수 있다는 특징이 있다. 즉, 환경에 맞는 이미지를 다운로드 해서 보여줄 수 있으므로, 페이지 로딩 속도를 높일 수 있게 된다.
반응형 홈페이지의 경우 최적화를 위해 모바일 이미지와 PC화면의 이미지를 다르게 설정하여 모바일 사용자가 쓸데없이 큰 이미지를 다운로드 받지 않게 하기 위해 이용된다고 보면 된다.
아래와 같이 설정하면 각 media 사이즈에서 각 해당 이미지 보여주게 된다.
<picture>
<source srcset="src/01.jpeg" media="(min-width:1200px)" type="image/jpeg"/>
<source srcset="src/02.jpeg" media="(min-width:900px)" type="image/jpeg"/>
<source srcset="src/03.jpeg" media="(min-width:500px)" type="image/jpeg"/>
<img src="src/04.jpeg" />
</picture>
<picture>요소 내의<source>요소는 다양한 유형의 장치 또는 브라우저에 대해 다양한 버전의 이미지를 제공하는 데 사용된다<source>요소의srcset속성은 이미지의 소스를 지정한다.<source>요소의type속성은 이미지 유형을 지정한다.- 마지막
<img>요소는 만일 브라우저가<picture>요소를 지원하지 않는 경우에 대한 방지책으로 넣어준다.
detail & summary 태그
클릭으로 정보를 보여주고 숨기는 기능으로서, 일종의 '접은 글' 기능을 간단한 태그로만 구현하는 것으로 보면 된다. 원래 자바스크립트로 복잡하게 구현해야 될 사항을 이런식으로 별도의 엘리먼트로 공식 지원해주는 것이다.
<summary> 태그 안에는 클릭 하기 전의 내용이 보여지게 되고, 클릭 시 펼쳐질 내용을 다음에 입력하면 된니다. css로는 [open] 이라는 CSS선택자를 통해 스타일 변경 가능 하다.
<details>
<summary>클릭 전 볼 수 있는 영역</summary>
<span>클릭 후에만 표시되는 영역</span>
</details>
details[open] {
background-color: sky;
}
See the Pen Untitled by barzz12 (@inpaSkyrim) on CodePen.
input 태그 속성
달력 날짜 속성
input 태그의 type 속성으로 달력 및 일일, 주, 월별 그룹 지정도 가능하다. 브라우저 환경에 따라 달력 위젯의 형태는 달라질 수 있다
<input type="date"/>
<input type="week"/>
<input type="month"/>
<input type="time"/>
See the Pen 달력, 날짜 선택기 by barzz12 (@inpaSkyrim) on CodePen.
색상 선택기
만일 color picker 기능이 웹페이지에 필요하다면 무거운 라이브러리 없이 정말 간단하게 구현이 가능하다.
<input id="color_picker" type="color" onchange="showHex();">
<h1>COLOR ME !</h1>
function showHex(){
document.querySelector("h1").style.color = document.querySelector("#color_picker").value;
}
See the Pen Untitled by barzz12 (@inpaSkyrim) on CodePen.
datalist 태그
자바스크립트 없이 auto complete(자동 완성 기능) 를 사용 가능하게 해주는 요소이다. 또한 타이핑에 따른 메뉴 필터 기능 제공한다.
사용법은 아래와 같은데 이때 유의해야 할점은, <input>의 list 속성값과 <datalist>의 id명을 똑같이 맞춰주어야 동작된다.
<!-- input의 list와 datalist의 id 명칭은 동일해야 된다 -->
<label for="movie">What is your favourite movie?</label>
<input type="text" list="movie-options"/>
<datalist id="movie-options">
<option value="Dune"/>
<option value="Dark waters"/>
<option value="The Artist"/>
<option value="The Avengers"/>
<option value="Iron Man"/>
<option value="Iron Man II"/>
<option value="Matrix"/>
</datalist>
See the Pen datalist 태그 by barzz12 (@inpaSkyrim) on CodePen.
template 태그
동적으로 복잡한 엘리먼트 요소를 DOM에 삽입할때 보통 문자열 형태로 만들고 innerHTML이나 제이쿼리 함수로 삽입 할 것이다. 나쁘지 않은 방법이지만 문자열은 하이라이트도 안되서 가독이 좋지 않는 다는 한계점이 있다.
이를 극복하기 위해 아예 html에 <template> 태그로 감싸면 이 요소는 문서 표시가 아닌 템플릿용으로 취급되게 하는 템플릿 태그가 추가 되었다. 템플릿 요소 내부의 모든 콘텐츠는 비활성화되며 렌더링 되지 않는다.
예를 들어 아래 <table> 행을 버튼을 누르면 스크립트로 동적으로 추가하고 싶다면, <template> 요소를 자바스크립트로 호출하여 템플릿 태그 내부에서 마크업을 복사하고 테이블 마크업에 추가하는 식으로 구성 할 수 있다.
<table id="myTable">
<tr>
<th>Sl. No.</th>
<th>Input</th>
</tr>
<tr>
<td>1.</td>
<td>
<input type="text" />
</td>
</tr>
</table>
<!-- 버튼 클릭하면 자바스크립트 실행 -->
<input type="button" value="New Row" onclick="addRow()">
<!-- 테이블에 추가할 테이블 내부 템플릿 -->
<template id="rowTemplate">
<tr>
<td></td>
<td>
<input type="text" />
</td>
</tr>
</template>
function addRow() {
// 템플릿 요소 가져오기
const template = document.querySelector('#rowTemplate');
// 템플릿을 추가할 요소 가져오기
const tbl = document.querySelector('#myTable');
// 템플릿의 content 속성과 그의 자식 모든 요소를 복사
const clone = template.content.cloneNode(true);
// 기존 요소에 복사한 템플릿을 추가
tbl.appendChild(clone);
}
See the Pen template 태그 by barzz12 (@inpaSkyrim) on CodePen.
optgroup 태그
선택 상자를 구현하기 위해 <select> 태그와 내부 리스트인 <option> 태그를 사용할 텐데, 이 리스트를 그룹으로 묶어 표현할때 사용된다. 예를 들어 영화 목록을 시간별로 그룹화해야 하는 경우 다음과 같이 구성될 수 있다.
<label for="showtimes">Showtimes</label>
<select id="showtimes" name="showtimes">
<optgroup label="1PM">
<option value="titanic">Twister</option>
<option value="nd">Napoleon Dynamite</option>
<option value="wab">What About Bob?</option>
</optgroup>
<optgroup label="2PM">
<option value="bkrw">Be Kind Rewind</option>
<option value="stf">Stranger Than Fiction</option>
</optgroup>
</select>
See the Pen optgroup 태그 by barzz12 (@inpaSkyrim) on CodePen.
# 참고자료
노마드 코더 - 개발자가 모르는 신박한 HTML 태그 5개
https://velog.io/@jiseon-han/%EC%8B%A0%EA%B8%B0%ED%95%9C-HTML-%ED%83%9C%EA%B7%B8-5%EA%B0%9C
이 글이 좋으셨다면 구독 & 좋아요
여러분의 구독과 좋아요는
저자에게 큰 힘이 됩니다.