CSS 리스트
HTML 리스트 및 CSS 리스트 속성
HTML에서 리스트에는 두 가지 주요 유형이 있습니다.
- 순서가 지정되지 않은 리스트(
<ul>) - 리스트 항목이 글머리 기호로 표시됩니다. - 순서 리스트(
<ol>) - 리스트 항목이 숫자 또는 문자로 표시됩니다.
CSS 목록 속성을 통해 다음을 수행할 수 있습니다.
- 순서 리스트에 대해 다른 리스트 항목 마커 설정
- 순서가 지정되지 않은 리스트에 대해 다른 리스트 항목 표시 설정
- 이미지를 리스트 항목 마커로 설정
- 리스트 및 리스트 항목에 배경 색상 추가
다른 리스트 항목 마커
list-style-type 속성은 리스트 항목 마커 유형을 지정합니다.
다음은 사용 가능한 리스트 항목 마커 중 일부를 보여 주는 예입니다.
예제 1
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
Note: 일부 값은 순서가 매겨지지 않은 리스트에 대한 값이고, 일부는 순서가 매겨진 리스트에 대한 값입니다.
리스트 항목 마커로서의 이미지
list-style-image 속성은 이미지를 목록 항목 마커로 지정합니다.
예제 2
ul {
list-style-image: url('sqpurple.gif');
}
리스트 항목 마커 위치
list-style-position 속성은 리스트 항목 마커(글머리 기호)의 위치를 지정합니다.
list-style-position: outside;는 글머리 기호 점이 목록 항목 외부에 있음을 의미합니다. 목록 항목의 각 줄의 시작 부분이 수직으로 정렬됩니다.
list-style-position: inside;는 글머리 기호 점이 목록 항목 안에 있음을 의미합니다. 이 항목은 목록 항목의 일부이므로 텍스트의 일부가 됩니다.
예제 3
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
기본 설정 제거
list-style-type: none; 속성을 사용하여 마커/글머리글을 제거할 수도 있습니다. 목록에는 기본 여백과 패딩도 있습니다. 이를 제거하려면 margin: 0;과 padding: 0;을 <ul> 또는 <ol>에 추가합니다.
예제 4
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
list 축약 속성
list-style 속성은 축약 속성입니다. 하나의 선언에서 모든 리스트 속성을 설정하는 데 사용됩니다.
예제 5
ul {
list-style: square inside url("sqpurple.gif");
}
축약 속성을 사용할 때 속성 값의 순서는 다음과 같습니다.
list-style-type(list-style-image가 지정된 경우 어떤 이유로 인해 이미지를 표시할 수 없는 경우 이 속성의 값이 표시됩니다.)list-style-position(리스트 항목 마커를 내용 흐름의 내부 또는 외부에 표시할지 여부를 지정합니다.)list-style-image(이미지를 리스트 항목 마커로 지정합니다.)
색상을 이용한 리스트 스타일링
색상으로 목록을 스타일링하여 좀 더 다르게 보이도록 할 수 있다.
<ol> 또는 <ul> 태그에 추가된 것은 전체 목록에 영향을 미치며, <li> 태그에 추가된 속성은 개별 리스트 항목에 영향을 미칩니다.
예제 6
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
color: darkblue;
margin: 5px;
}