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

17 * 2= 34

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

오늘부터 10번째 커리큘럼 중, 선택자의 종류에 대하여 학습하였습니다.

실무 또는 다른 강의를 통해 알고 있었던 개념도 있지만, 이 기회에 정확한 명칭과 그 역할을 알 수 있어 좋았어요.

조상, 부모, 형제, 자식, 후손의 관계 정의도 이참에 제대로 정립했습니다. 😉

 

공부 내용 정리!

오늘은 10번째 커리큘럼의 03~04. 기본 선택자 / 복합 선택자 에 대하여 공부했습니다.

---

<Today I Learned>

<기본 선택자 (Basic Selectors)>

<전체 선택자 (Universal Selector)>

🔶 (요소 내부의) 모든 요소를 선택

🔷 *

* {
  color: red;
}

 

<태그 선택자 (Type Selector)>

🔶 태그 이름이 E인 요소 선택

🔷 E

E {
  color: red;
}

 

<클래스 선택자 (Class Selector)>

🔶 HTML Class 속성 값이 E인 요소 선택

🔷 .E

.E {
  color: red;
}

 

<아이디 선택자 (Id Selector)>

🔶 HTML Id속성 값이 E인 요소 선택

🔷 #E

#E {
  color: red;
}

 

<복합 선택자 (Combinators)>

- 예시

<div>
  <ul>
    <li>딸기</li>
    <li>사과</li>
    <li class="orange">오렌지</li>
    <li>망고</li>
    <li>바나나</li>
  </ul>
  <p>파인애플</p>
  <div>당근</div>
  <span class="orange">오렌지</span>
</div>

 

<일치 선택자 (Basic Combinator)>

🔶 E, F를 동시에 만족하는 요소 선택 (E, F : 예시 요소)

🔷 EF

span.orange {
  color: red;
}

➡ <span class="orange>오렌지</span> 의 '오렌지' 글자 색상 변경

 

<자식 선택자 (Child Combinator)>

🔶 E의 자식 요소 F를 선택

🔷 E > F

ul > .orange {
  color: red;
}

➡ <li class="orange>오렌지</li> 의 '오렌지' 글자 색상 변경 : ul의 자식인(조건) orange 클래스 찾기(검색)

 

<후손(하위) 선택자 (Descendant Combinator)>

🔶 E의 후손(하위) 요소 F를 선택

🔷 E F (⬅ 띄어쓰기 적용)

div .orange {
  color: red;
}

➡ <div>를 찾아서(조건) 그 후손인 orange 클래스 찾기(검색)

➡ <div>당근</div> 는 해당 CSS가 적용되지 않음

➡ <div>의 후손인 <li class="orange>오렌지</li> 의 '오렌지' 글자 색상 변경

 

<인접 형제 선택자 (Adjacent Sibling Selector Combinator)>

🔶 E의 다음 형제 요소 F 하나만 선택

🔷 E + F

.orange + li {
  color: red;
}

➡ <li class="orange>오렌지</li>의 바로 다음 형제 요소인 <li>망고</li> 의 '망고' 글자 색상 변경

 

<일반 형제 선택자 (General Sibling Selector Combinator)>

🔶 E의 다음 형제 요소 F 모두 선택

🔷 E ~ F

.orange ~ li {
  color: red;
}

➡ <li class="orange>오렌지</li>의 다음 형제 요소인 <li>망고</li> 와 <li>바나나</li> '바나나' 글자 색상 변경

 

✨ 앞쪽 형제를 찾는 선택자는 없음!

---

학습 내용 출처 : https://heropy.blog/2019/05/26/html-elements/

한눈에 보는 HTML 요소(Elements & Attributes) 총정리

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