본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

list-style (리스트 스타일)

최초 작성일
최종 수정일
이번 시간에는...
HTML 태그 중 ol, ul, li 요소에 스타일을 줄 수 있는 CSS 속성인 list-style 속성을 살펴 봅니다.

리스트 스타일은 주로 ul, ol 또는 li 요소에 주는 스타일로, 리스트의 앞에 나오는 블릿 또는 숫자를 변경하는 속성입니다.

사실 실질적으로 이 리스트 스타일을 많이 사용하지는 않습니다. 아무래도 이 리스트 스타일로는 한계가 있어, 대부분 background를 이용해서 스타일을 줍니다.

이런 이유로 이번 장은 간단히 살펴보고 넘어가도록 하겠습니다.

list-style-type

리스트 앞에 오는 블릿의 타입을 결정하는 속성입니다. 다음과 같이 작성합니다.

사용 가능 속성 값

다음의 속성들 외에도 몇 가지 더 있지만, 브라우저 호환이 되지 않는 속성도 있어 일부 기본적인 속성만 알려드립니다.

참고로 앞의 블릿들의 색상은 리스트의 글자 색과 동일합니다.

none
아무런 장식을 보여주지 않습니다.
disc
채워진 원형입니다. 보통 ul 요소의 기본 값입니다.
circle
속이 빈 원형입니다.
square
채워진 사각형입니다.
decimal
숫자 1. 2. 3.의 형태로 들어갑니다.
lower-alpha
소문자 a. b. c.의 형태로 들어갑니다.
upper-alpha
대문자 A. B. C.의 형태로 들어갑니다.
lower-roman
로마자(소문자) 숫자 ⅰ. ⅱ. ⅲ.의 형태로 들어갑니다.
upper-roman
로마자(대문자) 숫자 Ⅰ. Ⅱ. Ⅲ.의 형태로 들어갑니다.

눈치 채셨겠지만, 앞의 square 까지는 ul 요소에 어울리는 값이고, 그 이후 decimal 같은 값은 ol 요소에 어울리는 값입니다.

적용 예시

  • disc 형태
  • circle 형태
  • square 형태
  1. decimal
  2. lower-alpha
  3. upper-alpha
  4. lower-roman
  5. upper-roman

list-style-image

이 속성은 리스트 블릿으로 기본 형태가 아닌 이미지를 사용하고자 할 때 사용합니다. 속성 값으로 해당 이미지 주소 url을 적어주면 됩니다.

list-style-position

이 속성은 리스트의 블릿이 밖에 있을지, 안에 있을지를 결정 합니다. 기본적으로 밖에 위치해 있는데, 만약 안으로 옮길 경우 본문처럼 위치합니다. 이 둘의 차이는 줄 바꿈이 될 때 잘 보여집니다.

사용 가능 속성

outside
블릿을 바깥에 위치시킵니다. 기본 값입니다.
inside
블릿을 내부에 위치 시킵니다.
inherit
부모의 값을 상속 받습니다.

적용 예시

  • outside는 기본적인 리스트 형태입니다.
    이렇게 줄 바꿈이 일어나도 블릿과 일정한 여백을 유지합니다.
  • 반면 inside는 본문 내에 위치하게 됩니다.
    때문에 이렇게 줄 바꿈이 일어나면 마치 본문의 일부처럼 보일 수 있습니다.

참고로 위의 리스트의 여백은 ul 요소의 padding으로 조절할 수 있습니다.

list-style

예상 하셨듯이 list-style은 앞서 살펴본 리스트 속성들의 줄임 속성입니다. 다음과 같은 방식으로 작성합니다.

참고로 list-style-image를 넣으면 list-style-type가 의미 없는 듯 보여지는 데요, 만약 이미지를 로딩하지 못했을 때 기본 해당하는 타입이 보여지게 됩니다.

요점 정리
  • list-style-type - 리스트 블릿의 타입 선택.
  • list-style-image - 기본 블릿대신 이미지를 사용할 경우
  • list-style-position - 리스트 블릿의 위치를 내부에 놓을 지, 외부에 놓을 지 선택
  • list-style - 리스트 스타일 단축 형

이 글이 유용하셨다면 친구들에게 공유 해주세요.