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

5.1 기본 선택자 사용하기

1. 선택자

선택자는 CSS 속성을 적용할 대상을 선택하는 문법으로, 다양한 종류의 선택자를 지원

 

2. 기본 선택자

 1) 전체 선택자: 모든 태그를 선택자로 지정.

* { /* CSS 코드 */ }

 

 2) 태그 선택자: 태그명으로 선택자를 지정.

태그명 { /* CSS 코드 */ }

 

 3) 아이디 선택자: id 속성값으로 선택자를 지정

#id속성값 { /* CSS 코드 */ }

※ id 속성값은 HTML문서 안에서 고유한 값이어야 함.

 

 4) 클래스 선택자: clss 속성값으로 선택자를 지정

.class속성값 { /* CSS 코드 */ }

 

 5) 기본 속성 선택자: HTML 태그에서 사용할 수 있는 속성과 값으로 선택자를 지정

[속성] { /* CSS 코드 */ }
[속성=값] { /* CSS 코드 */ }

※ 속성 선택자는 다른 선택자와 함께 사용할 수 있음.

 

 6) 문자열 속성 선택자: 태그의 속성값이 특정한 문자열과 일치하는 요소를 선택자로 지정

형식	설명
[속성~=문자열]	속성값에 문자열이 포함되어 있으면 선택함.(단어기준)
[속성|=문자열]	속성값이 문자열이 같거나 문자열-(하이픈)으로 시작하면 선택
[속성^=문자열]	속성값이 문자열로 시작하면 선택
[속성$=문자열]	속성값이 문자열로 끝나면 선택
[속성*=문자열]	속성값에 문자열로 포함하면 선택(전체 값 기준)

 

5.2 조합 선택자 사용하기

3. 조합 선택자

조합 선택자는 기본 선태자와 조합해서 사용했을 때 선택자의 의미를 더 풍부하게 하는 역할을 함.

 1) 그룹 선택자: 여러 선택자를, 기호로 구분해 선택자를 그룹으로 묶어 지정.

선택자1, 선택자2, ... 선택자n { /* CSS코드 */ }
p, #title, .red 	 { /* CSS코드 */ }

 

 2) 자식 선택자: 선택자 범위를 자식 관계로 제한하고, > 기호를 구분자로 사용.

부모 선택자 > 자식 선택자 { /* CSS코드 */ }

 

 3) 하위 선택자: 선택자 범위를 자식 및 자손관계로 제한하고, 공백을 구분자로 사용.

선택자1 선택자2 선택자3 ... { /* CSS코드 */ }

 

 4) 인접 형제 선택자: 특정 태그와 가장 인접한 형제 관계 태그를 선택자로 지정하고, + 기호를 구분자로 사용.

이전 선택자 + 대상 선택자 { /* CSS코드 */ }

 

※ 인접 형태 선택자 사용시 주의점: 이전 요소보다 먼저 등장한 요소는 선택 대상이 아님. 이전 요소 다음에 등장하는 요소에만 적용.

 

 5) 일반 형제 선택자: 특정 태그와 형제 관계에 있는 모든 태그를 선택자로 지정하고, ~ 기호를 구분자로 사용.

이전 선택자 ~ 대상 선택자 { /* CSS코드 */ }

 

5.3 가상 요소 선택자 사용하기

4. 가상 요소 선택자

실제로 존재하는 요소는 아니지만, 존재한다고 가정하고 선택하는 방법임. 가상 요소 선택자 앞에는 ::기호(콜론2개)를 붙임.

기준 선택자::가상 요소 선택자 { /* CSS코드 */ }

 1) ::before 요소의 맨 앞 선택

 2) ::after 요소의 맨 뒤 선택

 

※content 속성의 응용: 새로운 콘텐츠를 생성할 때 사용.

p::before {
	content:'<before>'		*새로 추가 된 콘텐츠의 텍스트 색상은 빨간색이 됨*
    color: red;
   }

 

 

---

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

5. 가상 클래스 선택자

가상 클래스 선택자는 요소의 상태를 이용해 선택자를 지정하는 방법임. 가상 클래스 선택자 앞에는 : 기호를 붙임.

기준 요소:가상 클래스 선택자 { /* CSS코드 */ }

 

 1) 링크 가상 클래스 선택자

 

  :link 링크를 한 번도 방문한 적 없는 상태

  :visited 링크를 한 번 이상 방문한 적이 있는 상태

 

 2) 동적 가상 클래스 선택자

  :hover 마우스를 올린 상태

  :active 마우스로 클릭한 상태

 

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

  :focus 입력 요소에 커서가 활성화된 상태

  :checked 체크박스 요소에 체크한 상태

  :disabled 상호작용 요소가 비활성화 된 상태

  :enabled 상호작용 요소가 활성화된 상태

 

 4) 구조적 가상 클래스 선택자

  :first-child, :last-child 첫 번째 자식 태그와 마지막 자식 태ㅡ

  :nth-child(n), :nth-last-child(n) n번째 자식 태그와 끝에서 n번째 자식 태그

  :nth-of-type(n), :nth-last-of-type(n) n번쨰 특정 자식 태그와 끝에서 n번째 특정 자식 태그

  :first-of-type, :last-of-type 부모의 첫 번째 특정 자식 태그와 마지막 특정 자식 태그

 

 

---

 

 

출처

https://www.gilbut.co.kr/book/view?bookcode=BN003377

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