CSS 목록 리스트 스타일 정리 및 예제, list-style 속성
웹 사이트를 제작할 때 리스트(목록)는 자주 사용됩니다. 특히 사이트 메뉴를 리스트와 링크로 조합해서 많이 만듭니다. 리스트는 순서 없는 리스트와 순서 있는 리스트로 구분할 수 있습니다. 그럼 예제로 리스트를 만드는 스타일에 대해서 알아보죠.
▼ 리스트 스타일 속성 ▼
속성 | 설명 |
---|---|
list-style-type | 불릿 모양과 번호 스타일을 지정합니다. |
list-style-image | 불릿 모양 대신에 이미지를 지정합니다. |
list-style-position | 리스트 항목 들여 쓰기를 지정합니다. |
list-style | 리스트 속성을 한꺼번에 지정합니다. |
[목차]
1. list-style-type 속성
2. list-style-image 속성
3. list-style-position 속성
4. list-style 속성
5. 세로 메뉴 만들기 샘플
list-style-type 속성
1. list-style-type 속성 종류
속성 값 | 설명 |
---|---|
none | 불릿이나 숫자를 없앱니다. |
disc | 채워진 원 모양입니다. |
circle | 빈 원 모양입니다. |
square | 채워진 사각형 모양입니다. |
decimal | 1 부터 시작하는 숫자입니다. |
decimal-leading-zero | 앞에 0을 포함한 01 부터 시작하는 숫자입니다. |
lower-roman | 소문자 로마 숫자입니다. |
upper-roman | 대문자 로마 숫자입니다. |
lower-alpha, lower-latin | 소문자 알파벳입니다. |
upper-alpha, upper-latin | 대문자 알파벳입니다. |
hangul | 한글입니다. |
2. 예제 소스 코드
<!DOCTYPE html>
<html>
<head>
<title>list-sytle-type 속성</title>
</head>
<body>
<h4>none</h4>
<ul style="list-style-type: none;">
<li>구글</li>
<li>네이버</li>
</ul>
<h4>disc</h4>
<ul style="list-style-type: disc;">
<li>구글</li>
<li>네이버</li>
</ul>
<h4>circle</h4>
<ul style="list-style-type: circle;">
<li>구글</li>
<li>네이버</li>
</ul>
<h4>square</h4>
<ul style="list-style-type: square;">
<li>구글</li>
<li>네이버</li>
</ul>
<h4>decimal</h4>
<ol style="list-style-type: decimal;">
<li>구글</li>
<li>네이버</li>
</ol>
<h4>decimal-leading-zero</h4>
<ol style="list-style-type: decimal-leading-zero;">
<li>구글</li>
<li>네이버</li>
</ol>
<h4>lower-roman</h4>
<ol style="list-style-type: lower-roman;">
<li>구글</li>
<li>네이버</li>
</ol>
<h4>upper-roman</h4>
<ol style="list-style-type: upper-roman;">
<li>구글</li>
<li>네이버</li>
</ol>
<h4>lower-alpha 또는 lower-latin</h4>
<ol style="list-style-type: lower-alpha;">
<li>구글</li>
<li>네이버</li>
</ol>
<h4>upper-alpha 또는 upper-latin</h4>
<ol style="list-style-type: upper-alpha;">
<li>구글</li>
<li>네이버</li>
</ol>
<h4>hangul</h4>
<ol style="list-style-type: hangul;">
<li>구글</li>
<li>네이버</li>
</ol>
</body>
</html>
3. 실행 결과 화면


list-style-image 속성
1. 예제 소스 코드
<!DOCTYPE html>
<html>
<head>
<title>list-style-image 속성</title>
<style>
.site1 {
list-style-image: url('img/link_2.png');
}
</style>
</head>
<body>
<h2>list-style-image 속성</h2>
<ul class="site1">
<li>구글</li>
<li>네이버</li>
<li>다음</li>
</ul>
</body>
</html>
2. 실행 결과 화면


list-style-position 속성
1. list-style-position 속성 종류
속성 값 | 설명 |
---|---|
inside | 불릿이나 숫자를 안쪽으로 들여 씁니다. |
outside | 기본값입니다. |
2. 예제 소스 코드
<!DOCTYPE html>
<html>
<head>
<title>list-style-position 속성</title>
<style>
.inside {
list-style-position: inside;
}
</style>
</head>
<body>
<h2>list-style-position 속성</h2>
<h4>기본값(outside)</h4>
<ul>
<li>구글</li>
<li>네이버</li>
<li>다음</li>
</ul>
<h4>inside</h4>
<ul class="inside">
<li>구글</li>
<li>네이버</li>
<li>다음</li>
</ul>
</body>
</html>
3. 실행 결과 화면


list-style 속성
1. 예제 소스 코드
<!DOCTYPE html>
<html>
<head>
<title>list-style 속성</title>
<style>
ul {
/* list-style-type: square; */
/* 줄여서 표현 */
list-style: square;
}
ol {
/*
list-style-type: upper-alpha;
list-style-position: inside;
*/
/* 줄여서 표현 */
list-style: upper-alpha inside;
}
</style>
</head>
<body>
<h2>list-style 속성</h2>
<ol>
<li>구글</li>
<li>네이버</li>
<li>다음</li>
</ol>
<ul>
<li>구글</li>
<li>네이버</li>
<li>다음</li>
</ul>
</body>
</html>
2. 실행 결과 화면


세로 메뉴 만들기 샘플
1. 예제 소스 코드
<!DOCTYPE html>
<html>
<head>
<title>list-style 속성</title>
<style>
ul {
list-style: none;
}
li {
border: 1px solid #000000;
padding: 20px;
margin: 5px;
}
.nav {
width: 150px;
}
</style>
</head>
<body>
<ul class="nav">
<li>IT 공부</li>
<li>생활정보</li>
<li>재테크</li>
</ul>
</body>
</html>
2. 실행 결과 화면


CSS 관련 이전 게시글
- CSS 스타일과 스타일시트 적용 방법 그리고 티스토리
- CSS 선택자 유형 – 전체, 태그, 클래스, ID, 그룹
- CSS 스타일 적용 순서(우선순위) – !important
- CSS 글꼴(폰트) 관련 스타일, font-family 속성 등
- CSS 웹 폰트 사용하기 – @font-face
- CSS 구글 웹 폰트 사용하기, 티스토리 적용 방법
- [CSS] 눈누 웹 폰트 사용하기, 티스토리 적용 방법
- [CSS] 색상 지정하기(6가지 방법), 티스토리 글자색 지정
- [CSS] 텍스트 정렬(text-align), 줄 간격 조절(line-height)
- [CSS] a태그 링크 밑줄 없애기, 밑줄 스타일, 색상 변경
이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!