[코딩 자율학습 HTML + CSS + 자바스크립트] Part2 CSS로 웹 페이지 꾸미기/ 5장 CSS 선택자 다루기

CSS 문법 = 선택자 + 선언부

선택자: CSS를 적용할 태그(요소)를 지정하는 문법적인 영역

1. 기본 선택자 사용하기

전체 선택자/ 태그 선택자/ 아이디 선택자/ 클래스 선택자/ 기본 속성 선택자/ 문자열 속성 선택자

전체 선택자

• HTML에서 사용할 수 있는 모든 요소를 한 번에 선택자로 지정하는 방법
• * 기호 사용해 표시
• *{/* CSS 코드 */}

---

태그 선택자

• HTML 태그명으로 선택자를 지정하는 방법
• 선택자에 지정된 태그명과 일치하는 모든 요소 한 번에 선택
• 태그명{/* CSS 코드 */}

---

아이디 선택자

• HTML 태그에서 사용할 수 있는 id 속성값을 이용해 선택자를 지정하는 방법
• 속성값 앞에 # 기호를 붙여 구분
• #id속성값{/* CSS 코드 */}

---

클래스 선택자

• HTML 태그에서 사용할 수 있는 class 속성값을 이용해 선택자를 지정하는 방법
• 속성값 앞에 . 기호를 붙임
• .class속성값{/* CSS 코드 */}

---

기본 속성 선택자

• HTML 태그에서 사용할 수 있는 속성과 값을 사용해 선택자를 지정하는 방법
• [속성]{/* CSS 코드 */}
• [속성=값]{/* CSS 코드 */}
• 다른 선택자와 함께 사용할 수 있음
• 아이디, 태그, 클래스 선택자와 함께 사용할 수 있고, 단독으로도 사용할 수 있음

---

문자열 속성 선택자

• 태그가 가진 속성값이 특정한 문자열과 일치하는 요소를 선택자로 지정하는 방법
• 기본 원리는 기본 속성 선택자와 비슷, 선택 방법이 조금 다름

---

2. 조합 선택자 사용하기

그룹 선택자/ 자식 선택자/ 하위 선택자/ 인접 형제 선택자/ 일반 형제 선택자

 

조합 선택자: 기본 선택자와 함께 사용했을 때 선택자의 의미를 더 풍부하게 해 주는 선택자

그룹 선택자

• 여러 선택자를 하나로 그룹 지을 때 사용
• 선택자와 선택자는 , 기호로 구분
• 선택자1, 선택자2, ..., 선택자n{/* CSS 코드 */}

---

자식 선택자

• 부모 요소의 하위에 있는 자식 요소에 스타일을 적용할 때 사용
• 2개 이상의 선택자가 사용
• 선택자와 선택자는 > 기호로 구분
• 부모 선택자 > 자식 선택자{/* CSS 코드 */}

---

하위 선택자

• 선택자의 범위를 특정 부모 요소의 하위 요소로 한정하는 방법
• 2개 이상의 선택자 사용
• 선택자와 선택자는 공백으로 구분
• 선택자1 선택자2 선택자3 ...{/* CSS 코드 */}

---

인접 형제 선택자

• 앞에서 지정한 선택자 요소 바로 다음에 있는 형제 관계 요소를 선택자로 지정
• 2개 이상의 선택자를 사용
• 선택자와 선택자는 + 기호로 구분
• 이전 선택자 + 대상 선택자{/* CSS 코드 */}
• 이전 요소 다음에 등장하는 형제 요소 선택
  => 이전 요소보다 먼저 등장한 요소는 선택 대상 X

---

일반 형제 선택자

• 이전 선택자 뒤에 오는 형제 관계 요소를 모두 선택자로 지정
• 2개 이상의 선택자 사용
• 선택자와 선택자는 ~ 기호로 구분
• 이전 선택자 ~ 대상 선택자{/* CSS 코드 */}
• 이전 요소 다음에 등장하는 형제 요소 선택
  => 이전 요소보다 먼저 등장한 요소는 선택 대상 X

---

3. 가상 요소 선택자 사용하기

가상 요소 선택자

• HTML 문서에 명시적으로 작성된 구성 요소 X 마치 존재하는 것처럼 취급해 선택하는 선택자 지정 방법
• 앞에 :: 기호(콜론 2개)를 붙여서 사용
• 기준 선택자와 함께 사용(기준 선택자 생략 -> 전체 선택자가 들어간 것으로 적용)
• ::before -콘텐츠 앞의 공간 선택
• ::after - 콘텐츠 뒤의 공간 선택

---

4. 가상 클래스 선택자 사용하기

링크 가상 클래스 선택자/ 동적 가상 클래스 선택자/ 입력 요소 가상 클래스 선택자/ 구조적 가상 클래스 선택자

 

가상 클래스 선택자

• 요소의 상태를 이용해 선택자를 지정하는 방법
• 기준 요소: 가상 클래스 선택자{/* CSS 코드 */}

링크 가상 클래스 선택자

a 태그에서 발생할 수 있는 링크 상태를 이용해 선택하는 방법

• :link - 한 번도 방문하지 않은 링크일 때 선택
• :visited - 한 번이라도 방문한 적이 있는 링크일 때 선택

---

동적 가상 클래스 선택자

사용자의 어떤 행동에 따라 동적으로 변하는 상태를 이용해 선택자를 지정하는 방법

• :hover - 요소에 마우스 올리면 해당 태그가 선택자로 지정
• :active - 요소를 마우스로 클릭하고 있는 동안 해당 태그가 선택자로 지정

---

입력 요소 가상 클래스 선택자

특정 상태를 이용해 선택자로 지정하는 방법

• :focus - 입력 요소에 커서가 활성화되면 선택자로 지정
• :checked - 체크박스가 표시되어 있으면 선택자로 지정
• :disabled - 상호작용 요소가 비활성화되면(disabled 속성 사용되면) 선택자로 지정
• :enabled: - 상호작용 요소가 활성화되면(disabled 속성 사용X) 선택자로 지정

---

구조적 가상 클래스 선택자

HTML 태그의 사용 위치, 다른 태그와의 관계에 따라 요소를 선택하는 방법

• E:first-child E 요소의 첫 번째 자식 요소를 선택자로 지정
• E:last-child E 요소의 마지막 자식 요소를 선택자로 지정
• E:nth-child(n) E 요소가 부모 요소의 자식 요소 중 n번째 순서가 맞으면 선택
• E:nth-last-child(n) E 요소가 부모 요소의 자식 요소 중 마지막에서 n번째 순서가 맞으면 선택
• E:nth-of-type(n)  부모 요소의 자식 요소 중 n번째 등장하는 E 요소 선택
• E:nth-last-of-type(n) 부모 요소의 자식 요소 중 마지막에서 n번째 등장하는 E 요소를 선택
• E:first-of-type 부모 요소의 자식 요소 중 첫 번째로 등장하는 E 요소를 선택
• E:last-of-type  부모 요소의 자식 요소 중 마지막으로 등장하는 E 요소를 선택

<!-- 예시 -->
<style>
	li:first-child{}
    li:last-child{}
    p:nth-child {}
    p:nth-last-child(2) {}
</style>

---

5. 다양한 선택자 조합하기

선택자의 목적: 스타일을 지정할 대상 요소를 선택하는 것

div.box{} /* class 속성값이 box인 div 태그 */
section#main /* id 속성값이 main인 section 태그 */

#main.box{} /* id 속성값이 mian이고, class 속성값이 box인 요소 */

<!-- 가상 클래스와 하위 선택자, 자식 선택자를 조합한 형태 -->
div:hover button{} /* div 태그에 마우스 올린 상태 -> 해당 div 태그 하위에 있는 button 태그 선택 */
div:hover > button{} /* div 태그에 마우스 올린 상태 -> 해당 div 태그와 자식 관계에 있는 button 태그 선택 */

---

출처

코딩 자율학습 HTML + CSS + 자바스크립트