[CSS] 목록 스타일

#  관련 포스팅

  - 목록 태그 : https://young0105.tistory.com/16

 

---

목록 스타일

#  목록 태그의 글머리표 종류 변경

선택자 { list-style-type : none | 순서없는목록속성 | 순서있는목록속성 ; }

 

  1) 불릿 제거 : none

  2) 순서 없는 목록의 글머리표 변경 속성

      - disc (기본값) : 채운 원 (●)

      - circle : 빈 원 (○)

      - square : 채운 사각형 (■)

  3) 순서 있는 목록의 글머리표 변경 속성

      i. 십진수 

          - decimal (기본값) : 1로 시작

          - decimal-leading-zero : 0으로 시작

      ii. 알파벳

          - lower-alpha : 소문자

          - upper-alpha : 대문자

      iii. 로마 숫자

          - lower-roman : 소문자

          - upper-roman : 대문자

 

#  순서 없는 목록의 글머리표를 이미지로 변경

선택자 { list-style-image : url("경로/이미지파일.png") | none ; }

 

#  글머리표를 들여쓰기 or 내어쓰기

선택자 { list-style-position : inside | outside ; }

 

  - inside : 들여쓰기

  - outside (기본값) : 내어쓰기

      · 들여쓰기를 아예 없애고 싶다면, margin : 0px로 설정

 

#  목록 관련 속성 한 번에 표기

선택자 {list-style : list-style-type값, list-style-position값 ; }
                        /* 불릿 타입          들여쓰기 여부 */

 

#  목록을 가로로 나열  (기존 : 세로로 나열)

선택자 { float : left ; }
/* 또는 */
선택자 { display : inline ; }
/* 또는 */
선택자 { display : inline-block ; }