HTML 태그 : progress, figure, blockquote, dl/dt/dd, pre, mark

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>