카테고리 없음
32. CSS - 목록과 링크 관련 스타일
박세류
2023. 5. 26. 11:15
1. 목록과 링크 관련 스타일
1. 목록의 불릿과 번호를 지정하는 list-style-type
- ul일 경우에는 불릿 모양을 변경할 때 ol일 경우에는 번호의 스타일을 지정할 때 사용
- ul에서 불릿을 변경할 때 지정가능한 속성 값
- disc(●): 꽉 찬 원. 기본값
- circle(○): 빈 원.
- square(■): 꽉 찬 사격형.
- none: 불릿 없애기
- ul은 상단 메뉴 바에서 주로 사용된다.
- ol에서 번호 스타일 지정할 때 지정가능한 속성 값
- decimal: 1로 시작하는 십진수. 기본값.
- deciaml-leading-zero: 십진수 앞에 0이 붙은 값.
- lower-roman: 소문자 로마 숫자
- upper-roman: 대문자 로마 숫자
- lower-alpha | lower-latin: 소문자 알파벳
- upper-alpha | upper-latin: 대문자 알파벳
2. 불릿 대신 이미지를 넣어주는 list-style-image
- ul에서만 사용가능. 불릿대신 이미지를 넣어준다.
- 지정가능한 속성 값
- none: 이미지를 사용하지 않음. 기본값
- url(이미지경로): 경로에 있는 이미지로 불릿 표출
3. 목록에 들여쓰기 효과를 주는 list-style-position
- li태그의 내용들을 들여쓰기 할 때 사용하는 속성
- 지정가능한 속성 값
- inside: 불릿이나 숫자부터 내용을 들여쓰는 속성
- outside: 불릿이나 숫자부터 내용들을 내어쓰는 속성
4. 목록 속성 한번에 지정하는 list-style
- 위에서 배운 목록관련 스타일을 한 번에 지정할 때 사용하는 속성
- list-style: 속성값1 속성값2 속성값3;
728x90