W3.CSS 목록
기본 목록
w3-ul 클래스는 기본 목록을 표시하는 데 사용됩니다 .
- 처녀
- 이브
- 아담
예시
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
경계 목록
w3-border 클래스는 목록 주위에 테두리를 추가합니다 .
- 처녀
- 이브
- 아담
예시
<ul class="w3-ul w3-border">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
목록 헤더
목록 항목 내부에 표제 요소를 추가하는 방법의 예:
이름
- 처녀
- 이브
- 아담
예시
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
카드로 나열
w3- card- number 클래스를 사용하여 목록을 카드로 표시할 수 있습니다 .
- 처녀
- 이브
- 아담
예시
<ul class="w3-ul w3-card-4" style="width:50%">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
중앙 목록
w3-center 클래스를 사용하여 목록 항목을 목록의 중앙에 배치할 수 있습니다 .
- 처녀
- 이브
- 아담
예시
<ul class="w3-ul w3-center">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
컬러리스트
w3- 색상 클래스를 사용하여 목록에 색상을 추가할 수 있습니다 .
- 처녀
- 이브
- 아담
예시
<ul class="w3-ul w3-red">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
컬러 목록 항목
w3- 색상 클래스 를 사용하여 목록 항목에 색상을 추가할 수 있습니다.
- 처녀
- 이브
- 아담
예시
<ul class="w3-ul">
<li class="w3-blue">Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
호버블 목록
w3-hoverable 클래스 는 마우스 오버 시 각 목록 항목에 회색 배경색을 추가합니다.
- 처녀
- 이브
- 아담
예시
<ul class="w3-ul w3-hoverable">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
특정 호버 색상을 원하면 각 <li> 요소 에 w3- hover- color 클래스를 추가하십시오.
- 처녀
- 이브
- 아담
예시
<ul class="w3-ul">
<li class="w3-hover-red">Jill</li>
<li class="w3-hover-blue">Eve</li>
<li class="w3-hover-green">Adam</li>
</ul>
닫을 수 있는 목록 항목
목록 항목을 닫거나 숨기려면 "x"를 클릭하십시오.
- 처녀
- 아담
- 이브
예시
<li class="w3-display-container">Jill
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-right">×</span>
</li>
팁: HTML × 엔터티는 닫기 버튼의 기본 아이콘입니다(문자 "X" 대신).
패딩이 있는 목록
w3-padding 클래스를 사용하여 목록 항목에 패딩을 추가할 수 있습니다 .
- 처녀
- 이브
- 아담
- 처녀
- 이브
- 아담
예시
<ul class="w3-ul">
<li class="w3-padding-small">Jill</li>
<li
class="w3-padding-small">Eve</li>
<li class="w3-padding-small">Adam</li>
</ul>
아바타 목록
예시
<li class="w3-bar">
<span onclick="this.parentElement.style.display='none'"
class="w3-bar-item w3-button w3-xlarge w3-right">×</span>
<img src="img_avatar2.png" class="w3-bar-item w3-circle" style="width:85px">
<div class="w3-bar-item">
<span
class="w3-large">Mike</span><br>
<span>Web
Designer</span>
</div>
</li>
목록 너비
목록의 너비는 기본적으로 100%입니다. 이를 변경하려면 너비 속성을 사용하십시오.
예시
<ul class="w3-ul" style="width:30%">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
30% 너비:
- 처녀
- 아담
50% 너비:
- 처녀
- 아담
80% 너비:
- 처녀
- 아담
작은 목록
w3-tiny 클래스를 사용 하여 작은 목록을 표시합니다.
- 처녀
- 이브
- 아담
예시
<ul class="w3-ul w3-tiny">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
작은 목록
w3-small 클래스를 사용 하여 작은 목록을 표시합니다.
- 처녀
- 이브
- 아담
예시
<ul class="w3-ul w3-small">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
큰 목록
w3-large 클래스를 사용 하여 큰 목록을 표시합니다.
- 처녀
- 이브
- 아담
예시
<ul class="w3-ul w3-large">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
큰 목록
w3-xlarge 클래스를 사용 하여 매우 큰 목록을 표시합니다.
- 처녀
- 이브
- 아담
예시
<ul class="w3-ul w3-xlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
XX큰 목록
w3-xxlarge 클래스를 사용하여 XXXarge 목록을 표시합니다.
- 처녀
- 이브
- 아담
예시
<ul class="w3-ul w3-xxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
XXX큰 목록
w3-xxxlarge 클래스를 사용 하여 XXXLarge 목록을 표시합니다.
- 처녀
- 이브
- 아담
예시
<ul class="w3-ul w3-xxxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
점보 목록
w3-jumbo 클래스를 사용 하여 거대한 "점보" 목록을 표시합니다.
- 처녀
- 이브
- 아담
예시
<ul class="w3-ul w3-jumbo">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>