HTML로 리스트를 표현하고 싶으면 어떻게 해야 할까요?
단순히 - , 1. 2. 이렇게 글자로 표현하는게 맞을까요?
물론 이방법도 있지만 우리는 더 HTML 스럽게 표현 하도록 배워보도록 하겠습니다.
이렇게 표현되게 작성 되어있는 태그는 <li> </li> 입니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
<h1> HTML 기초배우기 </h1>
<li>서울</li>
<li>대전</li>
<li>대구</li>
<li>부산</li>
</body>
</html>
그리고 이번엔 리스트가 여러개가 붙어있는데 이리스트를 분류를 해보겠습니다.
만약 서울, 대전이랑 대구랑 부산을 분류를 하고싶을땐 어떻게 해야할까요
그건 <ul> </ul>태그입니다. ul 태그안에 li 태그를 각각 분류해서 넣어보겠습니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
<h1> HTML 기초배우기 </h1>
<ul>
<li>서울</li>
<li>대전</li>
</ul>
<ul>
<li>대구</li>
<li>부산</li>
</ul>
</body>
</html>
이렇게 태그를 분리할수있습니다.
그러면 1. 2. 3. 4. 를 번호를 붙일수 있는 리스트는 어떻게 할까요
바로 <ol> </ol> 태그입니다 ul태그와 사용법이 같습니다. 대구 부산만 ol 태그를 묶어보도록하겠습니다.
이렇게 번호가 붙어있는걸 확인 할수있습니다.
'개발 > HTML' 카테고리의 다른 글
HTML (박스 모델) 기초 5-2편 (0) | 2021.04.12 |
---|---|
HTML (박스 모델) 기초 5-1편 (0) | 2021.04.11 |
HTML (밑줄, 기울기, 줄바꿈, 굵기)기초 2편 (0) | 2021.04.09 |
HTML( 제목, 단락) 기초 1편 (0) | 2021.04.08 |
HTML 의 구조 (0) | 2021.04.07 |