![[2021/12/15]국비지원 HTML5 코딩툴 기본학습 7-(4) 기타 요소](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FxU0uA%2Fbtrr2sCLzk3%2FAAAAAAAAAAAAAAAAAAAAADpEcjKehCfDW1VvqXIGZ-tnEnve7QNYEZOnay-kTZHH%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1759244399%26allow_ip%3D%26allow_referer%3D%26signature%3DmIsppwkNAVezLMR7SEdGwrL1EHA%253D)
이 날의 과정
1. form 복습 + form 예제 이미지 마크업 해서 수업 중 과제로 제출
2. video 태그
3. audio 태그
4. 기타 요소 태그
5. 한국남부발전공사 공지사항 페이지 마크업
기타 요소 태그
ⓐ ins : 글 추가
ⓑ del : 글삭
ⓒ sup : 윗 첨자
ⓓ sub : 아랫 첨자
ⓔ 특수기호 일부 : &, <, >, ", ', ©, ·
ⓕ abbr : 축약어. Abbreviation의 약자.
ⓖ pre : Preformatted Text의 약자. pre태그 내에 입력한 형태 그대로 문장을 출력시켜 주는 기능.
p태그에서 enter효과를 출력하려면 br을 입력해야 하지만, pre태그에서는 툴에서 enter 친 그대로를 출력함
ⓗ code : 어떤 코드를 썼는지 설명하려고 할 때 쓰면 딱 그대로 출력이 되는 태그
ⓘ time요소 : datetime="년-월-일T시:분:초.밀리초Z국제표준시, ± 지역 표준시"
ⓙ mark : 키워드 강조
ⓚ i : Italic체. 외국어, 분류학적 용어, 기술용어, 대본 지문, 자신의 생각 or 수기 등 구별되는 텍스트
ⓛ b : bold체. bold 효과 한정
ⓜ small : 글씨 크기 작게. footer 안의 정보, 이용약관, 단서 등의 세부사항 및 부가 주석을 짧은 문장으로 표시할 때
ⓝ progress : loading... 과 같은 진행상황을 바로 표현하는 태그
ⓞ meter : progress와 같은 바 형태이지만, 어떤 대상의 특정 비율을 표현하는 태그
ⓟ figure : 차트, 그래프, 그림, 소스코드, 다이어그램 같은 이미지로 출력되는 데이터를 불러오는 태그.
figcaption : figure에 불러온 이미지에 대한 설명 겸 이미지의 title이 될 수 있는 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><title>
</head>
<body>
<!-- ins 추가글, del 삭제글 -->
<p>
<ins>할인가:1,000원</ins>
<br>
<del>판매원가:5,000원</del>
</p>
<hr>
<!-- sup 윗첨자, sub 아랫첨자 -->
<p>
X<sup>2</sup>, H<sub>2</sub>O
</p>
<!-- 특수기호 &,<,>,",',©,·-->
<p>
&
<
>
"
'
©
·
</p>
<!-- abbr 축약어 -->
<p>
<abbr title="Aprtment">Apt</abbr>
<abbr title="Information Technology">IT</abbr>
</p>
<!-- pre -->
<pre>
봄
여름 가을
겨울
</pre>
<p>
<code>td{width:100px;height:100px}</code>
</p>
<!-- time요소, datetime속성="년월일T시분초.밀리초(1000분의1초)z국제표준시, +-지역표준시" -->
<time datetime="2021-12-15T12:19:15.000Z">2021-12-15</time>
<!-- mark요소, 키워드 강조 -->
<p>
<mark>html5</mark>웹 표준 기관인 월드와이드웹 컨소시엄(W3C)이 만들고 있는 차세대 웹 언어 규격이다.
HTML5는 문서 작성 중심으로 구성된 기존 표준에 그림, 동영상, 음악 등을 실행하는 기능까지 포함시켰다.
</p>
<!-- i요소:기울임, b요소:굵게, small요소:작은글씨 -->
<p><i>
기울임, 외국어, 분류학적 용어, 기술 용어, 대본 지문, 생각이나 손으로 직접 쓴 글
등 다른 텍스트와 구별하기 위해
</i></p>
<p><b>중요하지 않지만 굵게 보이게 하려고</b></p>
<p><small>작은 글씨. footer 안에 정보, 이용약관, 단서와 세부사항 같은 부가주석, 짧은 문장 사용</small></p>
<!-- progress:다운로드 진행표시줄로 사용,
meter요소: 디스크사용량 등 범위가 지정된 요소를 표시할 때 사용 -->
<p>
다운로드 상태 :
<progress max="100" value="52"><span>0</span>%</progress>
</p>
<p>
현재 디스크 총 사용량:
<meter min="0" max="320" value="60" low="50" high="250" optimum="320">64GB</meter>
</p>
<!--figure, figcaption: 차트, 그래프, 이미지, 소스코드, 다이어그램 표시하는 figure/설명:figcaption -->
<figure>
<img src="cat.png" alt="고양이">
<figcaption>고양이 사진</figcaption>
</figure>
<figure>
<img src="computer-mouse-pic.png" alt="컴퓨터마우스그림">
<figcaption>컴퓨터 마우스 그림</figcaption>
</figure>
</body>
</html>
결과물
