HTML 순서 없는 목록 만들기 ul, li 태그 사용법

HTML

HTML 순서 없는 목록 만들기 ul, li 태그 사용법

 

환경: HTML5

 

<ul> 태그는 Unordered List 약자로 머리 기호에 번호 없이 기호를 붙이는 태그입니다. <ul> 을 단독으로 사용하는 것이 아니라 내부에 <li> 태그로 목록을 추가하게 됩니다. <li> 태그 하나하나가 목록이 되며 list-style-type 속성으로 기호를 결정하게 됩니다.

 

<ul> <li> 태그로 기호가 붙은 리스트 목록을 만들어 보겠습니다. <li> 는 줄바꿈 기능이 포함되어 있으며 기호의 종류는 list-style-type 속성으로 결정이 됩니다. list-style-type 의 값은 disc (검은원), circle(흰색원), square(사각형) 이 있습니다.

아래 샘플에 적용된 스타일은 기본적으로 적용되는 값입니다. 그러니까 CSS 값을 아무것도 적용하지 않고 태그만 사용하게 되면 아래 설정한 값이 들어가는 것입니다. 목록에서 들여쓰기의 크기는 padding-left 로 조절하시면 됩니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>HTML</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	ul { 
list-style-type: disc;
	    display: block;
	    margin-top: 1em;
	    margin-bottom: 1 em;
	    margin-left: 0;
	    margin-right: 0;
	    padding-left: 40px; 
	} 
</style>
</head>
<body>
	<h3>소설책 제목</h3>
	<ul>
		<li>오만과 편견</li>		
		<li>오디세이</li>
		<li>위대한 개츠비</li>
		<li>이방인</li>
		<li>일리야드</li>
	</ul>
</body>
</html>

 

HTML 순서 없는 목록 만들기 ul, li 태그 사용법

 

아래 샘플은 3가지 속성값을 목록 별로 다르게 적용해 보았습니다. 어떤 식으로 나타나는지 확인해 보세요.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>HTML</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
</style>
</head>
<body>
	<h3>소설책 제목</h3>
	<ul style="list-style-type:disc;">
		<li>오만과 편견</li>		
		<li>오디세이</li>
		<li>위대한 개츠비</li>
		<li>이방인</li>
		<li>일리야드</li>
	</ul>
	<h3>소설책 제목</h3>
	<ul style="list-style-type:circle;">
		<li>오만과 편견</li>		
		<li>오디세이</li>
		<li>위대한 개츠비</li>
		<li>이방인</li>
		<li>일리야드</li>
	</ul>
	<h3>소설책 제목</h3>
	<ul style="list-style-type:square;">
		<li>오만과 편견</li>		
		<li>오디세이</li>
		<li>위대한 개츠비</li>
		<li>이방인</li>
		<li>일리야드</li>
	</ul>
</body>
</html>

HTML 순서 없는 목록 만들기 ul, li 태그 사용법

 

저작자 표시 비영리 변경 금지
신고
Posted by 녹두장군