[패스트캠퍼스:1주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 7/7

1주차.Chapter 07

 

 

01

---

스타일 상속이란,

조상에 적용된 스타일을

후손들이 상속받는 걸 말해요.

 

아래 예시처럼,

animal 클래스에 스타일을 줬는데,

그 자식들이 전부 바뀌었어요!

 

상속되는 스타일은 글자/문자 관련 속성들입니다.

font-style

font-weight

font-size

line-height

font-family

color

text-align 등...

 

하. 지. 만 강제상속이라고,

상속되지 않는 스타일을 강제로 상속시키는 방법이 있어요.

그 속성 값은 바로 inherit!

 

아래 예시에서,

height, background-color를 테스트해 보세요!

.parent를 바꾸면 .child가 변경되는 걸 확인할 수 있어요!

 

 

02

---

선택자 우선순위

만약 같은 요소가 여러 번 선언된다면,

어떤 CSS가 적용될지 결정될까요?

 

결정 방법

1. 점수가 높은 선언

2. (점수가 같으면) 마지막에 해석된 선언

 

여기서 '점수'가 뭔지 알아볼게요.

 

점수(명시도)는 내가 어떤 선택자를 사용해서, 해당 요소를 선택했는지에 따라 점수가 달라요.

(선택자에 대한 내용은 이전 포스팅을 참고해 주세요.)

[패스트캠퍼스:1주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 6/7

일반 태그 선택자 (가상 요소 선택자 포함)	1점
클래스 선택자 (가상 클래스 포함)	10점
id 선택자	100점
속성 값에 !important가 들어간 경우	무한대 점
상속된 경우	점수 없음
전체 선택자	0점
인라인 스타일	1000점

*!important, ID, 인라인 스타일 사용 비추천*

너무 점수가 높아서 스타일을 덮어쓰기가 어려워요!

반응형 웹 사이트 작업을 위해서 항상 덮어쓸 일이 있어요! 

그러니 최대한 피해서 사용하시길!

 

이렇게 1주 차가 끝났어요!!!!

모르는 내용은 계속 찾아보면서 반복적으로 사용해 보시면

점점 익숙해질 거예요.

연습 많이 하시고

 

2주 차로 바로 돌아올게요.

안뇽🔥