반응형
|
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>
▼ 아래 샘플은 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' 카테고리의 다른 글
| HTML 입력양식 input 태그 기본 적인 타입에 대한 설명 (0) | 2019.04.26 |
|---|---|
| HTML 입력양식 input 태그 HTML5 추가된 속성에 대한 설명 (1) | 2019.04.11 |
| HTML 하이퍼링크 텍스트의 색상 상태에 따라 별도 지정하기 (0) | 2019.01.14 |
| HTML 이미지 관리를 위한 img 태그 기본적인 내용 (0) | 2019.01.03 |
| HTML address 태그 이용해서 제작자, 주소, 연락처 입력하기 (0) | 2018.10.13 |
| 스타일 시트 CSS 글자의 두께를 조절하는 font-weight 사용하는 방법 (0) | 2018.06.06 |
| HTML 텍스트 입력할 때 이용되는 태그들 사용법 (0) | 2018.05.02 |
| HTML 텍스트 크기를 조절하는 제목 태그 Hn 사용하기 (0) | 2018.03.20 |
