[CSS] 상속과 공용키워드

한효찬·2024년 9월 3일

css는 상속이 가능하다.
예를 들어 ul 태그에 color 속성을 적용했다면 그 밑의 li태그는 해당 color 속성을 상속 받은 채 화면에 표출된다.

하지만 모든 요소가 상속되는 것은 아니다.
절대적인 것은 아니지만 text와 관련한 속성은 주로 상속이 되는 경우가 많고,
background-color와 같은 box속성을 가진 친구들은 상속이 안되는 경우가 많다.

상속이 있다면 기본값을 적용하겠다는 키워드도 있고 두가지 다 골라 쓸 수 있는 키워드도 존재한다.

  • inherit: 상위 요소로부터 속성을 상속 받는다.
  • initial: (브라우저에 지정된) 기본값을 사용한다.
  • unset: 상속 속성에 대해서는 inherit, 상속 속성이 아닌 것에 대해서는 initial을 적용한다.

위 키워드 들은 모든 스타일 속성에 사용할 수 있어 공용 키워드, 전역 키워드라고 불린다.

코드 예시

ul {
	border: 1px solid black;
    color: red;
    font-style: italic;
}
li {
	border: inherit
	color: inherit;
    font-style: initial;
    }

위 예시와 같이 사용할 수 있다.

profile
hyohyo

0개의 댓글