스타일 상속

honeyricecake·2022년 7월 24일
0

프론트엔드

목록 보기
23/31

자식요소들은 부모요소들의 스타일을 상속받기도 한다!

상속되는 CSS 속성들 :
font-style
font-weight(굴자 두께)
font-size
line-height(페이지가 노트와 같다 할 때 노트 한줄한줄의 세로 간격을 의미한다.)
font-family(폰트(서체))
color
text-align(글자 정렬)

글자와 문자 관련 속성들만이 상속되지만 모든 글자/문자 속성이 상속되는 것은 아니다.

강제 상속:

ex.

.parent {
  width: 300px;
  height: 400px;
  background-color: red;
}

.child {
  width: 100px;
  height: inherit;
  background-color: orange;
}

height를 늘 부모와 같게 하고 싶으면 이렇게 inherit 키워드를 이용해 강제 상속을 할 수 있다.

inherit 키워드는 background-color에도 사용가능하다.

ex.

.parent {
  width: 300px;
  height: 400px;
  background-color: red;
}

.child {
  width: 100px;
  height: inherit;
  background-color: inherit;
  position: fixed;
  /* (뷰포트 기준)위에서 100 픽셀 */
  top: 100px;
  /* (뷰포트 기준)오른쪽에서 10픽셀 */
  right: 10px;
}

0개의 댓글