Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
관리 메뉴

나만의공간

유용한 HTML Tag 정리 본문

JavaScript/HTML

유용한 HTML Tag 정리

밥알이 2022. 1. 18. 09:12

Web 개발을 처음 시작할때 배운 HTML Tag들은 기본적인 Tag를 알고 나서 모든 기능들은 CSS / Javascript / Jquery등으로 동적 페이지를 만들고 했었습니다.
그 동안 기술이 발전하고 기능들이 많이 추가 되면서 개발자들이 가끔 혹은 자주 사용하는 기능을 HTML Tag 만으로 간단히 구현 할수 있는 Tag가 있어 이번에 소개 하고자 합니다.

progress Tag

작업의 완료정도를 나타내며, 주로 진행 표시줄의 형태를 표현 합니다.

meter Tag

특정 범위 내에서의 스칼라 값, 또는 백분율 값을 나타냅니다.

value
-. 현재의 값. 최소와 최댓값(min과 max 특성)을 지정한 경우, 그 사이여야 합니다. 
지정하지 않았거나 잘못된 값인 경우 0으로 간주합니다. 지정했으나 범위 바깥인 경우, 
범위에 맞춰 나머지 값을 버립니다.

min
-. 측정 범위의 가능한 최솟값. 지정할 경우 최댓값(max 특성) 미만이어야 합니다. 지정하지 않은 경우 0입니다.

max
-. 측정 범위의 가능한 최댓값. 지정할 경우 최솟값(min 특성)을 초과해야 합니다. 지정하지 않은 경우 1입니다.

low
-. 측정 범위 중 낮은 범위의 최댓값. 지정할 경우 전체 범위 최솟값(min 특성)을 초과해야 하며, 높은 범위 최댓값과 전체 범위 최댓값(각각 high와 max 특성) 미만이어야 합니다. 지정하지 않았거나 전체 범위 최솟값 미만인 경우, 전체 범위 최솟값과 같아집니다.

high
-. 측정 범위 중 높은 범위의 최솟값. 지정할 경우 전체 범위 최댓값(max 특성) 미만이어야 하며, 낮은 범위의 최댓값과 전체 범위 최솟값(각각 low와 min 특성)을 초과해야 합니다. 지정하지 않았거나 전체 범위 최댓값을 초과할 경우 전체 범위 최댓값과 같아집니다.

optimum
-. 이상적인 값. min과 max 특성으로 정의한 범위 내에 위치해야 합니다. 
low와 high 특성을 함께 사용한 경우, optimum은 어느 범위가 이상적인지 나타냅니다. 
예를 들어, 값이 min과 low 사이에 위치한 경우, 측정 범위 중 낮은 범위가 이상적인 범위입니다.

details / summary Tag

details tag는 "열림" 상태일 때만 내부정보를 보여주는 정보 공개 위젯을 생성합니다.
요약이나 레이블은 summary tag를 통해 제공할 수 있습니다.

datalist Tag (자동완성기능 멋진 기능입니다.)

datalist tag는 다른 컨트롤에서 고를수 있는 가능한, 혹은 추천하는 선택지를 나타내는 option 여러개를 가집니다.

각 기능별로 구현한 소스 입니다.

내용 복사 붙이기 하셔서 임의에 html 파일로 만들어서 브라우저에서 보시면 됩니다.
IE는 미지원 하는 Tag가 있으니 크롬,파복등에 브라우저를 이용하세요.

<html>
<head>
<style>

	/* Meter Tag Css 추가 */
	meter {
	  width: 500px;
	  height: 25px;
	}
	meter::-webkit-meter-bar {
	  background: none; /* Required to get rid of the default background property */
	  background-color: whiteSmoke;
	  box-shadow: 0 5px 5px -5px #333 inset;
	}
</style>
</head>

<body onload="fnMeter();">
	<!--
		HTML 태그만으로 구현 가능한 유용한 Tag들
	-->
	<b>프로그레스바</b>
	<progress value="10" min="0" max="100"> </progress>
	<br/>

	프로그래스바와 비슷한 바
	<meter id="meterTest" min="0" max="100" low="25" high="95" optimum="50" value="0" ></meter>
	<br/>

	클릭시 펼침 기능
	<details>
		<summary>
			점심시간은 언제 일까?
		</summary>
		<span>
			한시야~~
		</span>

	</details>

	<br/>
	시간을 표시함
	<input type="time">
	<br/>

	날짜를 표시함
	<input type="week">
	<br/>

	사용자 접속 기기 해상도에 따라서 이미지를 다르게 보염주
	<picture>
		<source srcset="https://t1.kakaocdn.net/kakaocorp/kakaocorp/admin/service/a85d0594017900001.jpg" media="(min-width: 700px)" >
		<source srcset="http://img.marieclairekorea.com/2017/01/mck_586f5348d5a77.gif" media="(min-width: 450px)" >
		<source srcset="https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=mieein&logNo=220922061440#" media="(min-width: 350px)" >
		<img src="https://studio-jt.co.kr/wp-content/uploads/2015/10/jtlife-03-img-03.jpg">
	</picture>
	<br/>

	자동완성 기능
	<label for="ice-cream-choice">Choose a flavor:</label>
	<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

	<datalist id="ice-cream-flavors">
	    <option value="Chocolate">
	    <option value="Coconut">
	    <option value="Mint">
	    <option value="Strawberry">
	    <option value="Vanilla">
	    <option value="홍길동">
	</datalist>

</body>

	<script>
		var num=0;
		var timerId = null;

		function fnMeter() {
			timerId = setInterval(fmMeterValue,500);
		}

		function fmMeterValue() {
			document.getElementById("meterTest").value = num;
			num++;
			if (num >= 80) {
				clearInterval(timerId);
			}
		}
	</script>

</html>

 

Comments