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>

같은 카테고리의 다른 글
CSS / background-repeat / 배경 이미지 반복 여부 정하는 속성

CSS / background-repeat / 배경 이미지 반복 여부 정하는 속성

개요 background-repeat로 배경 이미지의 반복 여부와 반복 방향을 정합니다. 기본값 : repeat 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit repeat : 가로 방향, 세로 방향으로 반복합니다. repeat-x : 가로 방향으로 반복합니다. repeat-y : 세로 방향으로 반복합니다. no-repeat : 반복하지 않습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> ...

CSS / opacity / 요소를 투명하게 만드는 속성

CSS / opacity / 요소를 투명하게 만드는 속성

개요 opacity로 요소의 투명도를 정할 수 있습니다. 기본값 : 1 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 opacity: number | initial | inherit number : 0.0부터 1.0까지의 수를 넣습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 숫자가 작을수록 투명해집니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS Reference ...

CSS / 메모

CSS / 메모

크롬에서 input에 생기는 파란색 테두리 없애는 방법 input에 무언가를 입력하려고 커서를 위치시키면 다음처럼 테두리가 생깁니다. :focus 선택자를 이용해서 없앨 수 있습니다. input:focus { outline: none; } iOS에서 input에 생기는 그림자와 둥근 테두리 없애는 방법 iOS에서는 input이 둥근 테두리로 나오고 그림자 효과가 있습니다. 이를 없애는 방법은 다음과 같이 스타일링하는 것입니다. input { -webkit-appearance: none; border-radius: 0px; ​} 가변폭 ...

CSS / 이미지 버튼 만들기

CSS / 이미지 버튼 만들기

버튼을 꾸미는 방법 중의 하나는 이미지를 이용하는 것입니다. 적당한 크기의 버튼을 만듭니다. 그 크기에 맞는 이미지를 배경으로 정합니다. 다음은 32x32 크기의 돋보기 이미지를 이용해서 버튼을 꾸미는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> input { ...

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 / word-wrap / 긴 단어 처리 방법 정하는 속성

CSS / word-wrap / 긴 단어 처리 방법 정하는 속성

개요 word-wrap으로 띄어쓰기가 없는 긴 단어를 어떻게 처리할지 정한다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3 문법 word-wrap: normal | break-word | initial | inherit normal : break point에서 줄바꿈한다. break-word : 요소의 경계에서 break point가 아니어도 줄바꿈을 한다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속받는다. word-break 속성의 값이 keep-all이면 단어가, break-all이면 ...

CSS / border / 테두리 만드는 속성

CSS / border / 테두리 만드는 속성

개요 border는 다음의 속성을 포함하는 단축 속성으로, 테두리를 만든다. border-width border-style border-color 문법 border: border-width border-style border-color | initial | inherit border-width : 테두리의 두께를 정한다. 기본값은 medium이다. border-style : 테두리의 모양을 정한다. 기본값은 none이다. border-color : 테두리의 색을 정한다. 기본값은 선택한 요소의 색이다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속받는다. border-width에는 다음의 값을 넣을 수 있다. medium | thick ...

CSS / backface-visibility / 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성

CSS / backface-visibility / 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성

backface-visibility backface-visibility는 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 backface-visibility: visible | hidden | initial | inherit visible : 보이게 합니다. 기본값입니다. hidden : 보이지 않게 합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 체크박스에 체크하면 박스가 180도 회전합니다. 첫 번째 박스는 앞면이 보이고, 두 번째 박스는 ...

CSS / 상대적인 크기를 정하는 em 단위와 rem 단위의 차이

CSS / 상대적인 크기를 정하는 em 단위와 rem 단위의 차이

CSS의 길이 단위 중 em과 rem은 상대적으로 크기를 정합니다. em - 상위 요소 기준 em 단위는 상위 요소 크기의 몇 배인지로 크기를 정합니다. 예를 들어 font-size: 1.5em; 은 글자 크기를 상위 요소 크기의 1.5배로 하겠다는 뜻입니다. 간단한 예제를 만들어보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...

CSS / Flex / align-content

CSS / Flex / align-content

개요 flex-wrap 속성의 값이 wrap인 경우, 아이템들의 가로폭의 합이 콘테이너의 가로폭을 넘어가면 아이템이 다음 줄로 내려간다. 이때 여러 줄이 되어버린 아이템들의 정렬을 어떻게 할지 정하는 속성이 align-content이다. 문법 align-content: stretch | center | flex-start | flex-end | space-between | space-around | space-evenly | initial | inherit stretch : 기본값으로, 높이를 꽉 채운다. flex-start : 위쪽부터 ...