[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 37회차 미션

이제 2주 뒤면 환급 미션이 종료되겠네요.

패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 37일차입니다!

오늘은 10번째 커리큘럼을 마쳤어요. CSS의 속성 상속과 CSS 스타일이 적용되는 우선순위에 대하여 공부하였습니다.

상속 개념은 실무를 하면서 그 기능을 추측만 하고 넘어갔었고 (제대로 문서를 찾아봤어야 했는데 😓)

우선순위는 어디에서 관련 글을 하나 본 것 같네요. ID 선택자와 Class 선택자의 포인트가 낯익었습니다.

 

공부내용! 노트 1장~1장 반 분량

오늘 공부한 내용은 10번째 커리큘럼의 14~15. 상속(Inherit) / 우선순위 입니다. 📖

---

<Today I Learned>

<상속 (inheritance)>

🔶 상위 요소로부터 하위 요소로 CSS 속성들이 상속될 수 있음

➡ (ex) 상위 요소의 텍스트에 적용된 색상이 하위 요소들에게도 적용됨

 

<상속되는 속성들 (Properties)>

🔶 텍스트와 관련된 속성들 (그 외에는 상속 안 됨)

🔷 font-*, color, text-*, letter-spacing, opacity 등의 속성

 

<강제 상속>

🔶 상속되지 않는 속성(값)도 inherit 이라는 값을 사용하여 '부모'에서 '자식'으로 강제로 상속할 수 있음

➡ '자식'을 제외한 '후손'에는 적용되지 않음

➡ 모든 속성이 강제 상속을 사용할 수 있는 것은 아님

 

<예제>

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  position: absolute;
}

.child {
  position: inherit;
  /* absolute와 같은 기능 */
}

 

<우선순위>

🔶 브라우저에 의해 정해진 규칙

 

<우선순위 결정 방법 3가지>

🔶 명시도: 명시도 점수가 높은 선언이 우선

🔶 선언 순서: 점수가 같은 경우, 가장 마지막에 해석(늦게 작성한)되는 선언이 우선

🔶 중요도: 명시도는 상속 규칙보다 우선 / !important가 적용된 선언 방식이 다른 모든 방식보다 우선

 

<우선순위 결정에 고려할 7가지>

🔶 !important : 모든 선언 무시, 가장 우선 ➡ 무한 포인트

🔶 인라인 선언 방식 (Style Attribute) : 인라인 선언 (HTML Style 속성 사용) ➡ 1000 포인트

🔶 아이디 (ID Selector) : 아이디 선택자 ➡ 100 포인트

🔶 클래스 (Class Selector) : 클래스 선택자 ➡ 10 포인트

🔶 태그 선택자 : 1 포인트

🔶 전체 선택자 : 0 포인트

🔶 상속 : 점수 계산하지 않음 (우선 순위가 가장 낮음) / 상속은 간접적으로 CSS를 적용하는 것이기 때문

 

<예제>

✨ 가상 클래스 선택자 ➡ 클래스 선택자

✨ 가상 요소 선택자 ➡ 태그 선택자

✨ 부정 선택자 ➡ 점수를 가지지 않음

 

🔹 .list li.item ➡ 클래스 + 태그 + 클래스 = 10 + 1 + 10 = 21

🔹 .list li:hover ➡ 클래스 + 태그 + 가상 클래스 선택자 = 10 + 1 + 10 = 21

🔹 .box::before ➡ 클래스 + 가상 요소 선택자 = 10 + 1 = 11

🔹 #submit span ➡ 아이디 + 태그 = 100 + 1 = 101

🔹 header .menu li:nth-child(2) ➡ 태그 + 클래스 + 태그 + 가상 클래스 선택자 = 1 + 10 + 1 + 10 = 22

🔹 h1 ➡ 태그 = 1

🔹 :not(.box) ➡ 부정 선택자 + 클래스 = 10

🔹 :not(span) ➡ 부정 선택자 + 태그 = 1

---

강의 링크: https://bit.ly/3m0t8GM