w3.css
목록
기본 목록
w3-ul 클래스는 기본 목록을 표시하는 데 사용된다.
- 이브
- 아담
예제
<ul class="w3-ul"> <li>Eve</li> <li>Adam</li> </ul>
경계가 있는 목록
w3 -border 클래스는 목록 주위에 테두리를 추가한다.
- 이브
- 아담
예제
<ul class="w3-ul w3-border"> <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>Eve</li> <li>Adam</li> </ul>
중심 목록
w3-center 클래스를 사용하여 목록 항목을 목록의 중앙에 배치할 수 있다.
- 이브
- 아담
예제
<ul class="w3-ul w3-center"> <li>Eve</li> <li>Adam</li> </ul>
컬러 목록
w3-color 클래스를 사용하여 목록에 색상을 추가할 수 있다.
- 이브
- 아담
예제
<ul class="w3-ul w3-red"> <li>Eve</li> <li>Adam</li> </ul>
컬러 목록 항목
w3-color 클래스를 사용하여 목록 항목에 색상을 추가할 수 있다.
- 이브
- 아담
예제
<ul class="w3-ul"> <li class="w3-blue">Eve</li> <li>Adam</li> </ul>
호버링 가능한 목록
w3-hoverable 클래스는 마우스 오버 시 각 목록 항목에 회색 배경색을 추가한다.
- 이브
- 아담
예제
<ul class="w3-ul w3-hoverable"> <li>Eve</li> <li>Adam</li> </ul>
특정 호버 색상을 원하는 경우 각 <li> 요소에 w3-hover-color 클래스를 추가한다.
- 이브
- 아담
예제
<ul class="w3-ul"> <li class="w3-hover-blue">Eve</li> <li class="w3-hover-green">Adam</li> </ul>
닫을 수 있는 목록 항목
목록 항목을 닫거나 숨기려면 “x”를 클릭한다.
- 아담
- 이브
예제
<li class="w3-display-container">Eve <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">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%다. 이를 변경하려면 width 속성을 사용해야한다.
30% 너비:
- 이브
- 아담
50& 너비:
- 이브
- 아담
80% 너비:
- 처녀
- 아담
예제
<ul class="w3-ul" style="width:30%"> <li>Eve</li> <li>Adam</li> </ul>
초소형 목록
초소형 목록을 표시하려면 w3-tiny 클래스를 사용한다.
- 이브
- 아담
예제
<ul class="w3-ul w3-tiny"> <li>Eve</li> <li>Adam</li> </ul>
작은 목록
작은 목록을 표시하려면 w3-small 클래스를 사용한다.
- 이브
- 아담
예제
<ul class="w3-ul w3-small"> <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>Eve</li> <li>Adam</li> </ul>
특특대형 목록
특특대형 목록을 표시하려면 w3-xxlarge 클래스를 사용한다.
- 이브
- 아담
예제
<ul class="w3-ul w3-xxlarge"> <li>Eve</li> <li>Adam</li> </ul>
특특특대형 목록
특특특대형 목록을 표시하려면 w3-xxxlarge 클래스를 사용한다.
- 이브
- 아담
예제
<ul class="w3-ul w3-xxxlarge"> <li>Eve</li> <li>Adam</li> </ul>
점보 목록
거대한 “점보” 목록을 표시하려면 w3-jumbo 클래스를 사용한다.
- 이브
- 아담
예제
<ul class="w3-ul w3-jumbo"> <li>Eve</li> <li>Adam</li> </ul>