CSS 목록 리스트 스타일 정리 및 예제, list-style 속성

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채워진 사각형 모양입니다.
decimal1 부터 시작하는 숫자입니다.
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-type 속성 예제 실행 결과 화면입니다.

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-image 속성 예제 실행 결과 화면입니다.

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-position 속성 예제 실행 결과 화면입니다.

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. 실행 결과 화면

list-style 속성 예제 실행 결과 화면입니다.

세로 메뉴 만들기 샘플

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 관련 이전 게시글

  1. CSS 스타일과 스타일시트 적용 방법 그리고 티스토리
  2. CSS 선택자 유형 – 전체, 태그, 클래스, ID, 그룹
  3. CSS 스타일 적용 순서(우선순위) – !important
  4. CSS 글꼴(폰트) 관련 스타일, font-family 속성 등
  5. CSS 웹 폰트 사용하기 – @font-face
  6. CSS 구글 웹 폰트 사용하기, 티스토리 적용 방법
  7. [CSS] 눈누 웹 폰트 사용하기, 티스토리 적용 방법
  8. [CSS] 색상 지정하기(6가지 방법), 티스토리 글자색 지정
  9. [CSS] 텍스트 정렬(text-align), 줄 간격 조절(line-height)
  10. [CSS] a태그 링크 밑줄 없애기, 밑줄 스타일, 색상 변경
위로 스크롤