CSS / list-style-type / 목록 앞의 마커 정하는 속성

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

속성값은 다음과 같습니다.

  • <ul> : disc, circle, square
  • <ol> : 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>

Related Posts

CSS / font-weight / 글자 굵기 정하는 속성

CSS / font-weight / 글자 굵기 정하는 속성

개요 font-weight로 글자의 굵기를 정합니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 font-weight: normal | bold | bolder | lighter | number | initial | inherit normal : 보통 굵기입니다. 숫자 400과 같습니다. bold : 굵은 굵기입니다. 숫자 700과 같습니다. bolder : 상속된 값보다 굵은 굵기입니다. lighter : 상속된 값보다 얇은 굵기입니다. number : ...

CSS / Grid / order

CSS / Grid / order

order 속성으로 그리드 아이템의 순서를 변경할 수 있습니다. 시각적인 순서만 바뀔 뿐 문서 구조가 바뀌는 것은 아닙니다. order 속성의 기본값은 0입니다. 값이 같은 경우 입력된 순서대로 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...

CSS / border-spacing / 표(table)의 테두리와 셀(td)의 테두리 사이의 간격 정하는 속성

CSS / border-spacing / 표(table)의 테두리와 셀(td)의 테두리 사이의 간격 정하는 속성

개요 border-spacing으로 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 정합니다. 기본값 : 2px 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 border-spacing: length | initial | inherit length : 길이를 입력합니다. 값이 한개면 모든 간격에 같은 값을 사용하고, 값이 두개면 첫번째 값은 좌우, 두번째 값은 상하의 간격으로 사용합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 ...

CSS / background-attachment / 배경 이미지의 스크롤 여부를 정하는 속성

CSS / background-attachment / 배경 이미지의 스크롤 여부를 정하는 속성

개요 background-attachment로 배경 이미지의 스크롤 여부를 정합니다. 기본값 : scroll 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-attachment: scroll | fixed | local | initial | inherit scroll : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지는 스크롤되지 않습니다. fixed : 움직이지 않습니다. local : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지도 스크롤됩니다. initial : 기본값으로 ...

CSS / letter-spacing, word-spacing / 글자 사이 간격, 단어 사이 간격

CSS / letter-spacing, word-spacing / 글자 사이 간격, 단어 사이 간격

letter-spacing, word-spacing 글자 사이의 간격은 letter-spacing으로, 단어 사이의 간격은 word-spacing으로 정합니다. 값이 커지면 간격이 커집니다. 값에는 음수를 넣을 수 있습니다. 음수를 값으로 하는 경우 글자가 겹칠 수 있습니다. 예제 값의 변화에 따른 간격의 변화를 보여주는 예제입니다. 글자 사이의 간격을 변화시키면 단어 사이의 간격도 변합니다. 단어 사이의 간격을 변화시켜도 글자 사이의 간격은 변하지 않습니다. <!doctype html> <html lang="ko"> <head> ...

CSS / 기초 / 문법

CSS / 기초 / 문법

문법 다음은 가장 간단한 CSS 코드입니다. h1 { color: red } h1, color, red 세 개의 단어가 있는데 각각 선택자, 속성, 값이라고 합니다. 선택자(selector) : 무엇을 꾸밀지 정합니다. h1은 h1 요소를 꾸미겠다는 뜻입니다. 속성(property) : 어떤 모양을 꾸밀지 정합니다. color는 색을 꾸미겠다는 뜻입니다. 값(value) : 어떻게 꾸밀지 정합니다. red는 빨간색으로 만들겠다는 뜻입니다. 즉, CSS 코드는 다음처럼 구성됩니다. selector ...

CSS / text-shadow / 글자에 그림자 효과를 주는 속성

CSS / text-shadow / 글자에 그림자 효과를 주는 속성

개요 text-shadow는 글자에 그림자 효과를 주는 속성입니다. 기본값 : none 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 3 문법 text-shadow: offset-x offset-y blur-radius color | none | initial | inherit offset-x : 그림자의 수평 거리를 정합니다. (필수) offset-y : 그림자의 수직 거리를 정합니다. (필수) blur-radius : 흐림 정도를 정합니다. (선택 : 값을 정하지 않으면 0) color : 색을 ...

CSS / 표(table) 꾸미기 / 배경색 만들기

CSS / 표(table) 꾸미기 / 배경색 만들기

배경색을 만드는 속성 배경색은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 적용할 수 있습니다. 기본 모양 다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { ...

CSS / 이미지 가운데 정렬하는 방법

CSS / 이미지 가운데 정렬하는 방법

이미지를 가운데 정렬하는 방법은 여러 가지가 있습니다. 그 중 자주 사용되는 두 가지를 소개합니다. 두 방법 모두 아래처럼 이미지를 가운데에 놓습니다. 방법 1 이미지의 부모 요소에 text-align 속성을 추가하는 방법입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { text-align: center; } </style> </head> <body> <div> <img src="images/200x200.png" alt=""> </div> </body> </html> 방법 2 부모 요소를 사용할 수 없고 이미지만 스타일링이 가능하다면, img 요소를 block 요소로 만든 ...

CSS / background-position / 배경 이미지의 위치를 정하는 속성

CSS / background-position / 배경 이미지의 위치를 정하는 속성

개요 background-position은 배경 이미지의 위치를 정하는 속성입니다. 기본값 : 0% 0% 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 background-position: x-position y-position | initial | inherit x-position y-position : 가로 위치와 세로 위치를 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 위치 값으로 사용할 수 있는 것은 다음과 같습니다. 가로 위치 값 : left, center, right, 백분율, 길이 세로 위치 ...