📚 Study/HTML&CSS
[CSS] 상속과 리셋
0_ch4n
2022. 6. 5. 23:11
반응형
✔️ 상속
상속되는 CSS 속성들
color, letter-spacing, text-align, visibility, cursor
line-height, text-decoration, word-spacing
font 관련, list-style 관련, text-shadow- 요소의 상속되는 속성에 값이 지정되지 않은 경우 부모 요소의 해당 속성의 계산값을 얻습니다.
- 또는 사용자 에이전트로부터 해당 요소의 초기값을 얻습니다.
See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.
📌 inherit
- 스스로의 값을 포기하고 부모로부터 받은 상속값을 적용합니다.
See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.
📌 initial
- 브라우저가 부여한 값을 포기하고 각 속성의 초기값을 적용합니다.
See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.
📌 unset
- 상속되는 값이 있다면 inherit, 없다면 initial처럼 작동합니다.
See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.
📌 revert
- unset과 같지만 상속받지 않은 값을 초기값으로 되돌리지는 않습니다.
See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.
✔️ all 속성
- 대부분의 속성을 inherit, initial, revert 값으로 지정할 수 있습니다.
- 브라우저에서 지정한 기본값을 비우고 원하는 스타일로 초기화하는데 유용합니다.
See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.
📄 참고
반응형