카테고리 없음

32. CSS - 목록과 링크 관련 스타일

박세류 2023. 5. 26. 11:15

1. 목록과 링크 관련 스타일

1. 목록의 불릿과 번호를 지정하는 list-style-type

  1. ul일 경우에는 불릿 모양을 변경할 때 ol일 경우에는 번호의 스타일을 지정할 때 사용
  2. ul에서 불릿을 변경할 때 지정가능한 속성 값
    • disc(●): 꽉 찬 원. 기본값
    • circle(○): 빈 원.
    • square(■): 꽉 찬 사격형.
    • none: 불릿 없애기
  3. ul은 상단 메뉴 바에서 주로 사용된다.
  4. ol에서 번호 스타일 지정할 때 지정가능한 속성 값
    • decimal: 1로 시작하는 십진수. 기본값.
    • deciaml-leading-zero: 십진수 앞에 0이 붙은 값.
    • lower-roman: 소문자 로마 숫자
    • upper-roman: 대문자 로마 숫자
    • lower-alpha | lower-latin: 소문자 알파벳
    • upper-alpha | upper-latin: 대문자 알파벳

2. 불릿 대신 이미지를 넣어주는 list-style-image

  1. ul에서만 사용가능. 불릿대신 이미지를 넣어준다.
  2. 지정가능한 속성 값
    • none: 이미지를 사용하지 않음. 기본값
    • url(이미지경로): 경로에 있는 이미지로 불릿 표출

3. 목록에 들여쓰기 효과를 주는 list-style-position

  1. li태그의 내용들을 들여쓰기 할 때 사용하는 속성
  2. 지정가능한 속성 값
    • inside: 불릿이나 숫자부터 내용을 들여쓰는 속성
    • outside: 불릿이나 숫자부터 내용들을 내어쓰는 속성

4. 목록 속성 한번에 지정하는 list-style

  1. 위에서 배운 목록관련 스타일을 한 번에 지정할 때 사용하는 속성
  2. list-style: 속성값1 속성값2 속성값3;
728x90