우리는 앞선 과정에서 <ul>, <ol>, <li>를 사용한 목록 리스트에 대해서 살펴본 적이 있습니다. 사실 이것은 단순히 워드 프로그램에서의 순서를 나타내는 기능 정도로만 생각했겠지만, 사실 상용 웹사이트에서의 대부분 메뉴 바 디자인이나 목록 들은 이 목록에 디자인을 접목하여 구현하는 기능입니다. 생각보다 활용도가 높다는 이야기죠.
이번 아티클에서는 이 목록의 스타일과 관련한 스타일 속성과 응용 패턴을 살펴보도록 하겠습니다.
○ list-style-type : <ul>태그 불릿 모양 / 번호 스타일을 지정
<ul> 태그를 사용하여 목록을 만들게 될 경우, 원이나 네모 모양 혹은 숫자 / 알파벳을 통해 각 목록의 리스팅을 만들 수 있는데 이 불릿 모양을 지정할 수 있습니다. 즉, 해당 속성을 통해 <ul> 하위 <li> 리스트의 불릿 모양을 지정하게 됩니다. 사용할 수 있는 불릿 모양의 속성은 아래와 같습니다. 해당 속성은 <ul> 태그에 적용한다고 생각하시면 됩니다.
· disc : 채운 원 모양 (●)
· circle : 빈 원 모양 (○)
· square : 채운 사각형 모양 (■)
· decimal : 1부터 시작하는 10진수 (1, 2, 3...)
· decimal-leading-zero : 0이 앞에 붙는 10진수 (01, 02, 03...)
· lower-roman : 로마 숫자 소문자 (i, ii, iii...)
· upper-roman : 로마 숫자 대문자 (I, II, III...)
· lower-alpha | lower-latin : 알파벳 소문자 (a, b, c...)
· upper-alpha | upper-latin : 알파벳 대문자 (A, B, C...)
· none : 불릿 또는 숫자를 없앤다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.list1 {
list-style-type: none;
}
.list2 {
list-style-type: upper-alpha;
}
</style>
</head>
<body>
<h1>리스트 불릿 예시</h1>
<ul class="list1">
<li>불릿 없음 1</li>
<li>불릿 없음 2</li>
<li>불릿 없음 3</li>
</ul>
<ul class="list2">
<li>알파벳 대문자1</li>
<li>알파벳 대문자2</li>
<li>알파벳 대문자3</li>
</ul>
</body>
</html>
○ list-style-image: <ul>태그 불릿 이미지 적용
위에서 배운 list-style-type을 통해서 사용할 수 있는 불릿의 모양은 실제로 세 개뿐입니다. 그래서 이러한 불릿의 모양을 직접 이미지로 구현하고 싶을 경우 사용하게 되는 속성입니다. 사용 방법은 아래와 같습니다.
선택자 {
list-style-image: url('이미지 경로') | none
}
위의 경우 none은 굳이 사용할 일은 많지 않지만, 저기서 none을 사용하게 되면 list-syle-type에서 지정한 형태로 표시하게 된다는 점을 참고하시면 됩니다.
○ list-style-position: 불릿 또는 번호 위치의 들여쓰기
해당 속성을 사용하게 되면, 해당 리스트를 기본 값에서 한번 더 들여 쓰기를 진행하게 됩니다. 속성 값은 inside / outside가 있는데, 여기서 outside가 기본 값에 해당하게 되고 inside가 들여쓰기를 적용하는 속성이 됩니다. 아래와 같이 예시를 통해 적용을 해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.list1 {
list-style-type: decimal-leading-zero;
}
.list2 {
list-style-type: upper-alpha;
list-style-position: inside;
}
</style>
</head>
<body>
<h1>리스트 불릿 예시</h1>
<ul class="list1">
<li>불릿 없음 1</li>
<li>불릿 없음 2</li>
<li>불릿 없음 3</li>
</ul>
<ul class="list2">
<li>알파벳 대문자1</li>
<li>알파벳 대문자2</li>
<li>알파벳 대문자3</li>
</ul>
</body>
</html>
○ list-style : 목록 관련 속성 통합
지금까지 list-style-type | image | position이라는 세 가지 속성을 사용했는데, 여기서 속성을 list-style만을 사용하여 동일한 속성 값을 사용할 수도 있습니다. 이 경우에는, 줄여서 코드를 간단하게 표시할 수 있다는 장점이 있습니다.
ul {
list-style-type: none;
list-style-position: inside;
}
/* 변환 */
ul {
list-style: none;
list-style: inside;
}
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 3. 박스 모델(1) - 블록 레벨, 인라인 레벨 (0) | 2023.04.03 |
|---|---|
| [CSS] 2. 텍스트 스타일(6) - 표 스타일 (0) | 2023.04.02 |
| [CSS] 2. 텍스트 스타일(4) - 텍스트 정렬 2 (0) | 2023.03.30 |
| [CSS] 2. 텍스트 스타일(4) - 텍스트 정렬 1 (0) | 2023.03.29 |
| [CSS] 2. 텍스트 스타일(3) - 텍스트 컬러 (0) | 2023.03.27 |
