■ 요약
▶ HTML <ul> 요소를 사용하여 정렬되지 않은 목록을 정의한다.
▶ CSS "list-style-type" 속성을 사용하여 목록의 항목에 글머리 기호를 정의한다.
▶ HTML <li> 요소를 사용하여 목록의 항목을 정의한다.
▶ 목록은 중첩될 수 있다.
▶ 목록의 항목은 다른 HTML 요소를 포함할 수 있다.
▶ CSS 속성 "float:left" 를 사용하여 목록을 가로로 표시할 수 있다.
▶ HTML <ul> 태그는 정렬되지 않은 목록을 정의한다.
■ 정렬되지 않은 HTML 목록
▶ 정렬되지 않은 목록은 <ul> 태그로 시작한다.
▶ 각 목록의 항목은 <li> 태그로 시작한다.
▶ 목록의 항목은 기본적으로 글머리 기호(작은 검은색 원)로 표시된다.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_unordered2
■ 정렬되지 않은 HTML 목록 - 목록의 항목 글머리 기호 선택
▶ CSS "list-style-type" 속성은 목록의 항목 글머리 기호의에 스타일를 정의하는데 사용된다.
▶ 아래 값 중 하나를 사용하면 된다.
▷ "disc" 값 : (기본) : 글머리 기호를 작은 검은색 공(bullet)으로 설정한다.
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_unordered_disc
▷ "circle" 값 : 글머리 기호를 동그라미로 설정한다.
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_unordered_circle
▷ "square" 값 : 글머리 기호를 사각형으로 설정한다.
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_unordered_square
▷ "none" 값 : 글머리 기호가 표시되지 않는다.
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_unordered_none
■ 중첩 리스트
▶ 리스트는 중첩될 수 있다.
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_nested
※ 목록의 항목(<li>)는 이미와 링크 등 다른 요소와 새 목록을 포함할 수 있다.
■ CSS로 수평 목록
▶ HTML 목록은 CSS를 사용해 다양한 방법으로 스타일을 지정할 수 있다.
▶ 인기있는 방법 중 하나는 목록을 가로로 스타일을 지정하여 메뉴를 만드는 것이다.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu
출처 : https://www.w3schools.com/html/html_lists_unordered.asp
HTML Unordered Lists
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'HTML' 카테고리의 다른 글
| HTML / (32) 다른 목록 (0) | 2023.02.22 |
|---|---|
| HTML / (31) 정렬된 목록 (0) | 2023.02.22 |
| HTML / (29) 리스트 (0) | 2023.02.21 |
| HTMP / (28) 표 Colgroup (0) | 2023.02.21 |
| HTML / (27) 표 Styling (0) | 2023.02.21 |