Front-end/100DaysOfCode
[100DaysOfCode] 06강
year.number
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 descedants |
Multiple rules can be applied to the same element |
More specific selector's rule wins over less specific selector |
컨테이너가 있을 때, 이 컨테이너에 중첩된 요소는 특정 속성을 상속받는다 | - 하나의 요소에 여러 규칙을 적용할 수 있다 - 각기 시작점이 다른 여러 규칙을 하나의 요소에 적용할 수 있다(ex. body에서 상속받은 속성, 요소에 바로 적용한 속성이 같이 적용) - 여러 개의 규칙이 중첩된 경우 가장 최근에 적용된 규칙이 우선순위를 지닌다 |
- 더욱 구체적인 선택자에 적용된 규칙이 덜 구체적인 선택자보다 우선한다 |