progress 태그
진행 정도 나타내는 바를 만드는 태그
<progress> </progress>
<progress value ="0.4"> </progress>
0~1 백분률로 진행사항을 나타낸다. 0.4를 value로 입력하여 40% 표시할 수 있다.
<progress value ="20" max="50"></progress>
max를 전체로 보았을 때 value에 해당하는 정도를 나타낼 수도 있다.
figure 태그
사진, 이미지, 다이어그램 등을 감싸는 태그
figcation으로 figure 태그 안에 있는 내용에 대한 설명을 나타낼 수 있다.
figcation은 제일 처음이나 마지막에 위치시킨다. (table의 caption과 유사)
<figure>
<figcaption> 이미지 그룹 제목</figcaption>
<img src="/Step02/img/grill1.jpg" alt="">
<img src="/Step02/img/grill1.jpg" alt="">
<img src="/Step02/img/grill1.jpg" alt=""></figure>
blockquote 태그
삽입 문장을 인용문으로 정의하기 위한 태그
<blockquote> 인용 내용 </blockquote>
글을 인용할 경우, <blockquote> 태그를 이용할 수 있다.
이때 태그 안의 인용문장은 다른 텍스트 안으로 들여쓰기가 된다.
dl / dt / dd 태그
1. <dl> 태그 (Definition List)
정의 목록을 나타내는 태그
2. <dt> 태그 (Definition Term)
정의 되는 용어에 대한 제목
3. <dd> 태그 (Definition Description)
정의된 제목에 대한 설명
<dl>
<dt>제목</dt>
<dd>내용</dd>
<dt>제목</dt>
<dd>내용</dd>
<dt>제목</dt>
<dd>내용</dd>
</dl>
pre 태그 (Preformatted Text)
미리 정의된 형식(preformatted)의 텍스트를 정의할 때 사용하는 태그
<pre> </pre> 사이에 입력한 문장은 입력한 형태 그대로 브라우저에 표현할 수 있다.
HTML 형태가 여백과 줄바꿈 등 그대로 표현된다.
mark 태그
형광펜으로 칠한 것처럼 하이라이트된(highlighted) 텍스트를 정의할 때 사용하는 태그
<mark> 내용 </mark>
'WEB > HTML' 카테고리의 다른 글
본문 : 섹션(Section) 요소 (시맨틱 태그) - body, header, nav, section, aside, article, footer (0) | 2022.06.07 |
---|---|
이미지맵 태그 - img, map, area (0) | 2022.05.27 |
HTML input 태그 : form / input / label / select / textarea (1) | 2022.05.27 |
HTML 표(Table) 만들기 - table, tr, th, td 태그 (1) | 2022.05.26 |
하이퍼링크로 북마크 연결하기 (2) | 2022.05.25 |