-
[100DaysOfCode] 06강Front-end/100DaysOfCode 2022. 7. 19. 12:47
리스트 만들기
순서 목록: ol
비순서 목록: ul
리스트 : li순서 목록 ol
-> 리스트에 번호가 매겨진다
비순서 목록 ul
-> 글머리 기호가 매겨진다
=> 이러한 요소들은 css로 쉽게 바꿀 수 있기 때문에 태그의 의미를 이해하는 것이 중요하다!
리스트 스타일
Q. css로 ol, li에 각각 똑같은 속성에 다른 속성값을 부여하면 어떻게 될까?
A. 속성값은 부모-자식 관계에서 자식이 우선한다. (오버라이드)
상속 관계
상속(Inheritance) CSS의 계단식 상속 로직
(Cascading Style Sheets)우선순위(Specificity) (Selected) container rules apply to
descedantsMultiple rules can be applied to the
same elementMore specific selector's rule wins over less specific selector 컨테이너가 있을 때, 이 컨테이너에 중첩된 요소는 특정 속성을 상속받는다 - 하나의 요소에 여러 규칙을 적용할 수 있다
- 각기 시작점이 다른 여러 규칙을 하나의 요소에 적용할 수 있다(ex. body에서 상속받은 속성, 요소에 바로 적용한 속성이 같이 적용)
- 여러 개의 규칙이 중첩된 경우 가장 최근에 적용된 규칙이 우선순위를 지닌다- 더욱 구체적인 선택자에 적용된 규칙이 덜 구체적인 선택자보다 우선한다
'Front-end > 100DaysOfCode' 카테고리의 다른 글
[100DaysOfCode] 08강 (0) 2022.07.22 [100DaysOfCode] 07강 (0) 2022.07.20 [100DaysOfCode] 05강 (0) 2022.07.19 [100DaysOfCode] 04강 (0) 2022.07.16 [100DaysOfCode] 01 - 03강 (0) 2022.07.16