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

+ Recent posts