[HTML] HTML5의 새로운 기능② (progress, meter, details, fieldset, marquee,video)

WEB/HTML

[HTML] HTML5의 새로운 기능② (progress, meter, details, fieldset, marquee,video)

developer of the night sky 2023. 9. 24. 14:02

🔻HTML5의 새로운 기능②🔻

HTML5로 버전업하면서 기존에는 코드로 구현하던 기능들이 속성이나 옵션으로 생겨 간단하게 구현 가능해졌다.

1. progress (진행율)

진행 중인 작업의 진행 상태를 시각적으로 나타낸다.
value: 0부터 1까지의 값으로, 백분율을 나타낸다.
최대값 설정을 통해 진행의 범위를 조절할 수 있다.
진행 상태를 나타내므로 최소값 설정은 필요하지 않다.
디자인 커스터마이징이 어려우며, 일반적으로 외부 라이브러리의 품질이 더 높다.

<body>
	<progress value="0"></progress><br>
	<progress value="0.2"></progress><br>
	<progress value="0.5"></progress><br>
	<progress value="0.7"></progress><br>
	<progress value="1"></progress><br>
</body>

2. meter

숫자를 막대 그래프 형태로 나타낸다.
속성
- min : 최소값을 설정할 수 있다.
- high : 미터의 값이 특정 상한값을 넘었을 때 시각적으로 강조한다.
- low : 미터의 값이 특정 하한값 이하일 때 시각적으로 강조한다.

<body>
	<meter value="0.5"></meter><br>
	<meter value="-50" min=-100 max="100"></meter><br>
	<br>
	<b>value</b> &lt; low <meter value="-50" min=-100 max="100" high="80" low="20"></meter><br>	
	low &lt; <b>value</b> &gt; high <meter value="50" min=-100 max="100" high="80" low="20"></meter><br>	<!--  -->
	<b>value</b> &gt; high <meter value="90" min=-100 max="100" high="80" low="20"></meter><br>	<!--  -->
	
</body>

3. details

주로 summary 요소와 함께 사용하여 정보를 펼치거나 숨길 수 있는 영역을 생성한다.
p 태그와 같이 사용하여 부가적인 정보를 제공할 수 있다.

<body>
	<details>
		<summary>자바란</summary>
		<p>자바는 C언어에 객체 지향적 기능을 추가하여 만든 C++과 달리, 처음부터 객체 지향 언어로 개발된 프로그래밍 언어이다. 자바는 자바 가상 머신(JVM, Java Virtual Machine)을 사용하여 운영체제와 독립적으로 동작할 수 있다. 

따라서 자바는 어느 운영체제에서나 같은 형태로 실행 될 수 있다.</p>
	</details>
</body>

4. fieldset

폼 컨트롤들의 그룹을 묶기 위한 태그이다.
입력 받는 정보를 시각적으로 그룹화한다.
legend 태그를 사용하여 그룹의 제목을 설정할 수 있다.

<body>
	<fieldset>
		<legend align="left">로그인</legend>
		아이디: <input type="text" size=10><br>
		아이디: <input type="text" size=10>
	</fieldset>
</body>

5. marquee

현재는 잘 사용되지 않는다.
좁은 공간에서 다량의 텍스트를 스크롤링하여 출력할 수 있다.
속성:
- behavior: 스크롤링 동작을 설정한다.
- loop: 스크롤링을 반복할지 여부를 결정한다.
  - 기본값은 -1로, 무한루프이다.
- direction: 스크롤링 방향을 설정한다.
- scrolldelay : 스크롤이 한 번 움직이는데 걸리는 시간(밀리초)을 지정한다.
  - 값이 작을수록 스크롤이 빨라지고, 값이 클수록 스크롤이 느려진다.
- scrollamount : 한 번에 몇 픽셀씩 스크롤할지를 지정한다.

<body>
	<marquee>22일 미국 증시를 따라 약 1% 하락 출발한 코스피는 오전 9시 2분 현재 코스피는 전날 종가보다 22.56포인트(0.90%) 떨어진 2,492.41이다.</marquee>
	<marquee scrolldelay="60" >22일 미국 증시를 따라 약 1% 하락 출발한 코스피는 오전 9시 2분 현재 코스피는 전날 종가보다 22.56포인트(0.90%) 떨어진 2,492.41이다.</marquee>
	<marquee scrollamount="10">22일 미국 증시를 따라 약 1% 하락 출발한 코스피는 오전 9시 2분 현재 코스피는 전날 종가보다 22.56포인트(0.90%) 떨어진 2,492.41이다.</marquee>
</body>

6. video

동영상을 재생하기 위한 태그로, 다양한 속성을 활용하여 동영상을 컨트롤하고 제어할 수 있다.
속성
- controls : 동영상을 재생, 일시정지, 스킵, 볼륨 조절 등을 할 수 있게 컨트롤 창이 뜬다.
- autoplay
  - 동영상을 자동으로 재생하도록 설정한다.
  - 다만, 크롬과 사파리에서는 이 속성만으로는 적용되지 않으므로, muted 속성과 함께 사용한다. (<video autoplay muted>)
- muted : 동영상의 소리를 음소거한다.
- width, height : 동영상의 가로와 세로 크기를 지정한다.
  - 값을 픽셀 단위로 지정하거나, 상대적인 단위인 %를 사용할 수 있다.

<body>
	<video src="./video/1.mp4" controls autoplay muted></video>
</body>

저작자표시 (새창열림)