23.03.09 / 적용 우선 순위 & 스타일 상속

<웹 브라우저에서 내용을 표시할 때, 적용되는 스타일과 우선 순서>

• 웹 브라우저 "자체" 스타일
• 웹 문서를 제작한 "제작자"의 스타일
• 컴퓨터를 사용하는 "사용자"
• 적용 우선 순서 : 사용자 > 제작자 > 자체
• 브라우저 자체 색상 : 하얀색 < 제작자가 변경한 색상 : 라이트 그레이 < 사용자가 변경한 색상 : 다크 모드
• => 다크 모드로 실행이 된다.

<css 적용 우선 순위>

• 우선 순위란, 어떤 스타일을 먼저 적용할 것인지 결정하는 규칙
• 우선 순위를 높이려면, 정확하게 해당 요소에 스타일을 적용하면, 우선 순위가 높아진다.
• 제외) 스타일 규칙에 !important를 작성하면 그 스타일 규칙이 다른 스타일보다 우선 순위가 높아진다.

<우선 순위 점수>

• !important : 1억 점 / 그냥 제일 높음
• inline style : 1천 점  (인라인 블록과 다른 개념임. 헷갈리지 않기. 개념 확실히 하기.)
• ID selector : 100점
• class selector : 10점
• tag selector / type selector : 1점

 

[CSS 스타일 상속]

어떤 요소에 CSS를 적용했을 때, 해당 요소의 자식 요소(하위 요소) 까지 영향을 미치는 것.

자식 요소에 스타일을 따로 지정하지 않으면, 부모 요소의 스타일 속성이 자식 요소로 전달.

<상속이 가능한 속성 목록>

• 주로 글자, 문자 관련 속성들 : 글자 크기, 두께, 기울기, 폰트 종류, 글자 색상 등

<강제 상속 : inherit >

• 실제 상속할 수 없는 내용도 강제 상속 가능 
• height: inherit;  (원래 heght는 상속 안 됨)