제목 그대로 목록을 만들어주는 태그이다.
우리가 목록을 일반태그로 구현하려면 <br> <p>등을 이용하여 불필요한 반복작업을 해줘야한다. 그렇지만 태그의 의미적으로는 <p>태그는 단락을 나타내주는 태그이지 목록을 위한 태그는 아니다. <br>도 단순 줄바꿈일뿐이다.
그래서 목록을 나타내줄때 별도로 사용하는 태그가 바로 목록태그이다.
목록태는 <ul> 또는 <ol> 또는 <dl>을 사용해준다.
<ul> 태그는 unordered list, 비 순서형 목록 태그이다. 순서가 없는 목록을 표현할때 사용하는 태그이다.
<ul>태그 그리고 <ol> 태그 안에는 <li> 태그가 존재한다. List item이라는 뜻으로 <ul> 태그와 <ol> 태그에서 목록을 추가할때 <li> 태그를 이용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>오늘의 할일</h1>
<ul>
<li>잠자기</li>
<li>장보기</li>
<li>밥하기</li>
<li>게임하기</li>
</ul>
</body>
</html>오늘의 할일
- 잠자기
- 장보기
- 밥하기
- 게임하기
기본적으로 <li>를 이용하면 자동으로 들여쓰기가 되고, 목록 앞에 점이 표시되면서 좀더 리스트 다운 모습으로 나타내준다. 점으로 표시되는 기호는 나중에 CSS로 스타일을 변경해줄수 있다.
순서가 있는 목록은 <ol> 태그로 나타내준다 ordered List라는 뜻으로 순서형 목록 태그이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>수업일정표</h1>
<ol>
<li>1교시:자바</li>
<li>2교시:HTML</li>
<li>3교시:javascript</li>
<li>4교시:CSS</li>
</ol>
</body>
</html>수업일정표
- 1교시:자바
- 2교시:HTML
- 3교시:javascript
- 4교시:CSS
<ul> 태그와는 다르게 순서가 존재하기때문에 기호로 리스트를 구별해 주는것이 아닌 순차적으로 숫자로 표현해준다.
<ol>태그는 type이라는 속성을 이용하여 숫자뿐만 아닌 알파벳순서, 로마자 순서 표기로도 변경해줄수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>수업일정표</h1>
<ol type="A">
<li>1교시:자바</li>
<li>2교시:HTML</li>
<li>3교시:javascript</li>
<li>4교시:CSS</li>
</ol>
</body>
</html>수업일정표
- 1교시:자바
- 2교시:HTML
- 3교시:javascript
- 4교시:CSS
<dl>태그는 정의형 목록 태그로 definition list라는 의미를 가지고 있다. 앞서 살펴본 <ul>과 <ol>과는 사용법이 살짝 다르다.
<dl>태그는 자식태그로 <dt><dd>태그를 가질수가 있다. <dt>는 definition title, <dd>는 definition data라는 의미로
<dt>태그는 용어의 정의, <dd>태그는 용어의 설명을 할때 사용한다.
따라서 목록태그이긴 하지만, <ul>과 <ol>과는 쓰임새가 약간 다르다. 예를들면
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>마포고 듀오</h1>
<dl>
<dt>Deft</dt>
<dd>이름은 김혁규이며, DK의 원딜러, 2022 월즈 우승.</dd>
<dt>faker</dt>
<dd>이름은 이상혁이며, T1의 미드라이너, 2022 월즈 준우승, LOL계에서는 위대한 선수이다.</dd>
</dl>
</body>
</html>
마포고 듀오
- Deft
- 이름은 김혁규이며, DK의 원딜러, 2022 월즈 우승.
- faker
- 이름은 이상혁이며, T1의 미드라이너, 2022 월즈 준우승, LOL계에서는 위대한 선수이다.
이런식으로 무엇에 대한 정의와, 설명을 나타내줄때 사용된다.
'Study > HTML&CSS' 카테고리의 다른 글
| Input type text의 속성 readonly와 disabled의 사용법 그리고 차이점 (0) | 2023.06.15 |
|---|---|
| HTML <Select> 태그 사용법 (0) | 2023.06.12 |
| HTML Form태그 Post Method 이용시 한글깨짐 처리 방법(Feat. 이클립스) (0) | 2022.12.25 |
| HTML <STRONG> 태그와 <EM> 태그 (0) | 2022.12.13 |
| HTML의 <H(n)>, <P>,<BR> 태그 (0) | 2022.12.12 |
