list-style-type

1 개요
2 문법
3 예제

개요

목록은 ul 태그 또는 ol 태그로 만듭니다. 목록 앞에 붙는 도형이나 문자을 마커(Marker)라고 하는데, 어떤 형식 또는 어떤 모양의 마커를 사용할지는 list-style-type으로 정할 수 있습니다.

문법

list-style-type: value;

value에는 다음 값을 넣을 수 있습니다.
disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha, none
의미상으로는 ul과 ol에 사용하는 속성값을 구분하는 게 맞지만, ul에 decimal을 사용하거나 ol에 disc를 사용하는 등 바꾸어 사용해도 모양은 지정한대로 나옵니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
  </head>
  <body>
    <h3>disc</h3>
    <ul style="list-style-type: disc;">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla.</li>
    </ul>
    <h3>circle</h3>
    <ul style="list-style-type: circle;">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla.</li>
    </ul>
    <h3>square</h3>
    <ul style="list-style-type: square;">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla.</li>
    </ul>
    <h3>decimal</h3>
    <ul style="list-style-type: decimal;">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla.</li>
    </ul>
    <h3>decimal-leading-zero</h3>
    <ul style="list-style-type: decimal-leading-zero;">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla.</li>
    </ul>
    <h3>lower-roman</h3>
    <ul style="list-style-type: lower-roman;">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla.</li>
    </ul>
    <h3>upper-roman</h3>
    <ul style="list-style-type: upper-roman;">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla.</li>
    </ul>
    <h3>lower-greek</h3>
    <ul style="list-style-type: lower-greek;">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla.</li>
    </ul>
    <h3>lower-latin</h3>
    <ul style="list-style-type: lower-latin;">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla.</li>
    </ul>
    <h3>upper-latin</h3>
    <ul style="list-style-type: upper-latin;">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla.</li>
    </ul>
    <h3>armenian</h3>
    <ul style="list-style-type: armenian;">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla.</li>
    </ul>
    <h3>georgian</h3>
    <ul style="list-style-type: georgian;">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla.</li>
    </ul>
    <h3>lower-alpha</h3>
    <ul style="list-style-type: lower-alpha;">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla.</li>
    </ul>    
    <h3>upper-alpha</h3>
    <ul style="list-style-type: upper-alpha;">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla.</li>
    </ul>
    <h3>none</h3>
    <ul style="list-style-type: none;">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla.</li>
    </ul>
  </body>
</html>

CSS / Reference / background-origin

개요 HTML 요소는 박스로 이루어져 있고, 바깥 여백 영역(Margin Area), 테두리 영역(Border Area), 안쪽 여백 영역(Padding Area), 내용 영역(Content Area)으로 구분합니다. background-origin으로 배경 이미지를 어느 영역부터 채워나갈지를 정합니다. 기본값 : padding-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 background-origin: border-box | padding-box | content-box | initial | inherit; border-box : 테두리 영역 왼쪽 위부터 채웁니다. padding-box : 안쪽 여백 영역 왼쪽 ...

CSS / Reference / tab-size

HTML은 탭을 연속하여 여러 개 넣어도 하나의 공백으로 인식합니다. 하지만 pre 태그를 이용하면 입력된 그대로 출력할 수 있습니다. 기본적으로 하나의 탭을 8개의 공백으로 인식합니다. 이 탭 크기를 조정하는 속성이 tab-size입니다.

CSS / Reference / background-image

개요 background-image는 이미지를 배경으로 사용하게 하는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-image: none | url | initial | inherit none : 이미지를 배경으로 사용하지 않습니다. url : 이미지의 URL을 입력합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 왼쪽 위에서 시작하여 가로 방향과 세로 방향으로 해당 요소를 다 채울 때까지 반복되어 ...

CSS / Reference / text-decoration

개요 text-decoration은 선으로 텍스트를 꾸밀 수 있게 해주는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 text-decoration: none | line-through | overline | underline | initial | inherit none : 선을 만들지 않습니다. line-through : 글자 중간에 선을 만듭니다. overline : 글자 위에 선을 만듭니다. underline : 글자 아래에 선을 만듭니다. initial : 기본값으로 ...

CSS / Reference / text-shadow

text-shadow는 글자에 그림자 효과를 주는 속성입니다. 기본값 : none 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 3 박스에 그림자 효과를 주고 싶다면 box-shadow 속성을 사용합니다.

CSS / Reference / aspect-ratio

aspect-ratio는 선택한 요소의 가로 세로 비율을 정하는 속성입니다. 접속하는 기기의 해상도가 변해도, 일정한 가로 세로 비율을 유지하고 싶을 때 유용하게 사용할 수 있습니다.

CSS / Reference / font-style

font-style은 글자 모양을 정하는 속성으로, 기울임 여부를 정합니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / background-clip

HTML 요소는 박스(box)로 이루어져 있습니다. 배경 이미지나 배경색을 그 박스 중 어디에 넣을 지 정하는 속성이 background-clip입니다. 기본값 : border-box 상속 : No 애니메이션 : No 버전 : CSS Level 3

CSS / Reference / background-attachment

background-attachment는 배경 이미지의 스크롤 여부를 정하는 속성입니다. 기본값 : scroll 상속 : No 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / line-height

line-height 속성은 텍스트 줄 간격(줄 높이)을 조절하는 데 사용됩니다. 텍스트의 가독성을 높이고, 디자인적으로 더 일관된 레이아웃을 만들기 위해 자주 사용됩니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1