본문 바로가기

웹프로그래밍/HTML

HTML 태그 기초2

1. <ul> ,<li>

- <ul>은 Unordered List의 약자 

- <li>은 list item의 약자

- <ul>은 리스트의 시작과 끝을 알려주는 역할은 한다.

그림1. ul, li 태그 활용

2. <ol>

- <ol>은 Ordered List의 약자

- 순서를 부여한다.

그림2. ol 태그 활용

 

3. <dl>, <dt>, <dd>

- <dl>은 Definition List의 약자

- <dt>은 Definition Term의 약자 (단어)

- <dd>은 Definition Desciption의 약자 (단어의 설명)

 

그림3. dl, dt, dd 태그 활용

4. <q>

- <q>은 Quote의 약자

- 인용문

그림4. q 태그 활용

5. <time>, <datetime>

- time은 날짜, 시간을 나타낸다.

- datatime은 time과 기능은 같지만, 기계가 잘 이해하기 위해 특정 형식을 쓴다. (YYYY-MM-DD)

- datatime을 이용해 시간을 비교해 기능을 쓴다던지 활용가능 

그림5. time, datetime 활용

6.  <code>, <br>, <pre>

- code은 코드를 보여주고 싶을 때 사용한다.

- br은 line breaker의 약자, 줄바꿈을 한다.

- pre은 preformatted text의 약자, 입력한 그대로 문장을 표현해준다.

그림 6-1. code 활용

 

 

그림6-2. br 활용

 

 

그림6-3. pre 활용

7. <sub>, <sup>, <small>

- <sub>은 subscript의 약자, 아래첨자

- <sup>은 superscipt의 약자, 위의 첨자

- <small>은 작게 표현하고 싶을 때 사용한다.

 

그림7. sub, sup, small 활용

'웹프로그래밍 > HTML' 카테고리의 다른 글

[HTML] 오디오, 비디오, 자막  (0) 2022.03.23
[HTML] 이미지 태그 활용과 그래픽  (0) 2022.03.20
[HTML] 링크와 네비게이션 태그  (0) 2022.03.19
HTML 태그 기초1  (0) 2022.03.15