📌진행도
progress
<progress></progress><progress value="0"></progress><br>
<progress value="0.2"></progress><br>
<progress value="0.4"></progress><br>
<progress value="0.6"></progress><br>
<progress value="0.7"></progress><br>
<progress value="1"></progress><br>
progress 컨트롤로 진행 중이라는 것을 화면상에 표시할 수 있다.
progress에 value 속성을 넣어서 진행도를 나타내는 게 일반적이다.
<progress value="" max="100"></progress><br>
max 최댓값 속성으로 진행도를 수치화시켜 화면에 표시할 수 있다.
meter
<meter></meter><br>
<meter value="0"></meter><br>
<meter value="0.5"></meter><br>
<meter value="1"></meter><br>
progress와 비슷한 것으로 meter 컨트롤이 있다.
meter는 모든 수치(숫자)를 막대그래프로 표시할 수 있도록 만들어 둔 것이다.
<meter></meter><br>
<meter value="0" min="-100" max="100" high="80" low="20"></meter><br>
<meter value="50" min="-100" max="100" high="80" low="20"></meter><br>
<meter value="100" min="-100" max="100" high="80" low="20"></meter><br>
min과 max를 사용하여 숫자 범위를 조절할 수 있다.
또한, high와 low로 적정 수준의 범위에 따라서 색을 다르게 표시할 수 있다.
📌세부사항
detail
<details>
<summary>자바란?</summary>
<p>자바는 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구</p>
</details>
<summary>에는 보통 키워드를 작성한다.
그리고 <p>에는 키워드의 콘텐츠를 작성한다.
📌폼 컨트롤 그룹화
fieldset
<fieldset>은 폼 컨트롤들을 그룹화하는 태그이다.
<legend> 태그를 가질 수 있어서 제목 비슷한 태그를 출력할 수 있다.
<fieldset>
<legend>로그인</legend>
아이디: <input type="text" size="10">
</fieldset><fieldset>
<legend align="center">로그인</legend>
아이디: <input type="text" size="10">
</fieldset>
align 속성으로 <legend>를 정렬할 수 있다.
📌스크롤링 효과
marquee
<marquee>뉴스 속보입니다. 오늘 점심 메뉴는 돈까스입니다. 맛있을 거 같습니다.</marquee>
<marquee behavior="scroll">뉴스 속보입니다. 오늘 점심 메뉴는 돈까스입니다. 맛있을 거 같습니다.</marquee>
<marquee behavior="slide" scrolldelay="60">뉴스 속보입니다. 오늘 점심 메뉴는 돈까스입니다. 맛있을 거 같습니다.</marquee>
<marquee behavior="alternate">뉴스 속보입니다. 오늘 점심 메뉴는 돈까스입니다. 맛있을 거 같습니다.</marquee><marquee behavior="scroll" scrolldelay="60" scrollamount="10" direction="down" loop="10">뉴스 속보입니다. 오늘 점심 메뉴는 돈까스입니다. 맛있을 거 같습니다.</marquee>
behavior로 속성을 줄 수 있으며, scrolldelay로 속도를 조절할 수 있다.
그리고 scrollamount를 지정하여 속도를 더 빠르게 보이게 할 수 있고, direction으로 방향을 조절할 수 있으며, loop로 몇 번 보이게 할지 설정할 수 있다. 이때 loop의 기본값은 '-1'로 이는 무한 루프이다.
📌오디오
audio
<audio></audio>
📌비디오
video
<video src="./video/비행기 MR.mp4" controls autoplay muted width="300" height="300"></video>
controls 옵션을 넣으면 사용자가 비디오에 대한 설정이 가능하다.
autoplay 속성으로 영상이 자동 재생되게 할 수 있다. 이때 자동 재생이 되게 하려면 autoplay muted로 소리를 꺼주어야 한다.
width와 height로 영상의 종횡비를 설정할 수 있다.
📌아무 기능이 없는 태그
div, span
<div>aaa</div>
<div>aaa</div>
<div>aaa</div>
<span>bbb</span>
<span>bbb</span>
<span>bbb</span>
div
- 블럭 태그
span
- 인라인 태그
색을 입힐 수 있기 때문에 아무 기능이 없음에도 가장 많이 사용하는 태그이다.
<div>와 <span>은 순수 HTML만으로는 쓸모가 없지만, CSS로 디자인을 하고 JavaScript로 프로그램 기능을 입히면 활용도가 높아진다.
