-
[CSS] 상속과 리셋웹/CSS 2023. 1. 8. 07:34
상속되는 CSS 속성들 예
- color
- cursor
- font 관련
- letter-spacing
- line-height
- list-style 관련
- text-align
- text-decoration
- text-shadow
- visibility
- word-spacing
inherit
스스로의 값을 포기하고 부모로부터 받은 상속값을 적용합니다.
initial
브라우저가 부여한 값을 포기하고 각 속성의 초기값을 적용합니다.
p 브라우저가 기본적으로 제공하는 p의 display 속성은 block이죠.
p 그런데 속성값을 initial로 주게 되면
p 이와 같이 display 속성의 초기값인
p inline으로 바뀌게 됩니다.
👉 display 속성의 명세 보기 (초기값 확인)👉 initial 값의 MDN 문서 보기 (주의!)
unset
상속되는 값이 있다면 inherit, 없다면 initial처럼 작동합니다.
.parent 부모 요소자식 (기본)자식 (unset)p 문단 (기본)
p 문단 (unset)
p 문단 (unset)
revert
unset과 같지만, 상속받지 않은 값을 초기값으로 되돌리지는 않습니다.
display:revert;
all 속성
대부분의 속성을 inherit, initial, unset, revert값으로 지정할 수 있습니다.
브라우저에서 지정한 기본값을 비우고 원하는 스타일로 초기화하는데 유용합니다.ex) all : unset;
CSS Reset
Reset코드적용예
(없음) 👉 샘플 보기 Eric Meyer (2.0) 👉 링크 👉 샘플 보기 Normalize.css 👉 링크 👉 샘플 보기 Elad Shechter 👉 링크 👉 샘플 보기 '웹 > CSS' 카테고리의 다른 글
[CSS] 서체와 웹폰트, verticl-align 속성 (0) 2023.01.08 [CSS] 벤더 프리픽스 Vendor Prefixes (0) 2023.01.08 [CSS] 선택자 심화 - 속성 값으로 선택, 가상 클래스, css 컨텐츠 (0) 2023.01.08 [CSS] CSS 모듈화 - 반복되거나 공통되는 스타일 지정 (0) 2023.01.08 [CSS] Flex 레이아웃 ★★★ (0) 2023.01.07