코딩(기초 입문)/HTML

HTML 목록 태그

uiux4503 2024. 11. 7. 13:50
반응형
SMALL

1. ul 태그(unordered list)
 - 순서가 필요 없는 목록을 만들 때 사용
- <ul> 태그 내부에 <li> 요소를 사용하여 각 항목을 표시

<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<ul>
    	<li>list_1</li>
        <li>리스트</li>
        <li>과일</li>
    </ul>
</body>
</html>

 

2. ol 태그

- 순서가 있는 목록을 만들기 위해서 사용
- <ul>과 동일하게 <li>로 리스트를 작성
- 대부분 브라우저에서 리스트를 숫자(기본값)로 표현하며, 속성을 지정하여 변경 가능
- <ol>의 리스트에는 type, start, reserved 같은 속성 사용 가능

속성 설명
type - 목록에 사용될 마커 지정
1) 숫자(기본값) : 1
2) 영어 대문자 : A
3) 영어 소문자 : a
4) 로마숫자 소문자 : i
5) 로마숫자 대문자 : I
start 시작 목록의 순번 지정
- 숫자로 순번 을 지정
ex) <ol start ="2">
<li>숫자</li>
</ol> = 2. 숫자로 실행화면이 뜸
reversed 항목을 역순으로 표시 
<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<ol>
    	<li>list_1</li>
        <li>리스트</li>
        <li>과일</li>
    </ol>
</body>
</html>

 

< ol 속성을 활용할 때 나오는 예시 >

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <ol type="a" start="3">
        <li>list_1</li>
        <li>list_2</li>
        <li>list_3</li>
    </ol>
</body>
</html>

실행화면

 

3. dl,dt,dd 태그

- dl,dt,dd 태그 모두 block요소의 속성을 가지고 있다.

속성 설명
dl(definition list) - 정의 목록을 나타내는 태그
- 제목과 설명이 한 쌍인 설명 목록을 만들 때 사용
dt(definition term) - 정의 되는 용어에 대한 제목
dd(definition description) - 정의된 제목에 대한 설명 
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <dl>
       <dt>정의 제목</dt>
       <dd>정의 설명</dd>
    </dl>
</body>
</html>

실행화면

→ 별도의 스타일을(css)를 주지 않은 상태에서는 dd태그는 들여 쓰기가 된 상태로 보임
→ 원하는 화면을 만들기 위해서는 margin 값 혹은 float, display 등으로 조정 가능