HTML 순서 없는 목록
HTML <ul>태그는 순서가 지정되지 않은(글머리 기호) 목록을 정의합니다.
정렬되지 않은 HTML 목록
순서가 지정되지 않은 목록은 <ul>태그로 시작합니다. 각 목록 항목은
<li>태그로 시작합니다.
목록 항목은 기본적으로 글머리 기호(작은 검은색 원)로 표시됩니다.
예시
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
정렬되지 않은 HTML 목록 - 목록 항목 마커 선택
CSS list-style-type속성은 목록 항목 마커의 스타일을 정의하는 데 사용됩니다. 다음 값 중 하나를 가질 수 있습니다.
| Value | Description |
|---|---|
| disc | Sets the list item marker to a bullet (default) |
| circle | Sets the list item marker to a circle |
| square | Sets the list item marker to a square |
| none | The list items will not be marked |
예 - 디스크
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
예 - 원
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
예 - 정사각형
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
예 - 없음
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
중첩 HTML 목록
목록은 중첩될 수 있습니다(목록 내부 목록):
예시
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
참고: 목록 항목( <li>)에는 새 목록과 이미지 및 링크 등과 같은 기타 HTML 요소가 포함될 수 있습니다.
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>
팁: CSS 튜토리얼 에서 CSS에 대해 더 많이 배울 수 있습니다 .
단원 요약
- HTML
<ul>요소를 사용하여 정렬되지 않은 목록 정의 - CSS
list-style-type속성을 사용하여 목록 항목 마커 정의 - HTML
<li>요소를 사용하여 목록 항목 정의 - 목록을 중첩할 수 있습니다.
- 목록 항목에는 다른 HTML 요소가 포함될 수 있습니다.
- CSS 속성
float:left을 사용하여 목록을 가로로 표시
HTML 목록 태그
| Tag | Description |
|---|---|
| <ul> | Defines an unordered list |
| <ol> | Defines an ordered list |
| <li> | Defines a list item |
| <dl> | Defines a description list |
| <dt> | Defines a term in a description list |
| <dd> | Describes the term in a description list |
사용 가능한 모든 HTML 태그의 전체 목록을 보려면 HTML 태그 참조 를 방문하십시오 .