[ HTML + CSS + 자바스크립트] 5.3 ~ 5.5

[ 코딩 자율학습 ]

HTML+CSS+자바스크립트

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

< 가상 요소 선택자 >

: 명시적으로 작성된 구성요소는 아니지만

존재하는 것처럼 취급해 선택하는

선택자 지정방법

:: 기호(콜론2개)를 붙여서 사용하고,

 기준 선택자와 함께 사용.

p - 기준선택자 / before - 가상요소선택자

- before 선택자-

: 기준선택자 요소 앞의 공간을선택

 

- after 선택자-

: 기준선택자 요소 뒤의 공간을 선택

 

 - content 속성 -

: before 선택자와

after 선택자에서만 사용하는 속성

: 새로운 콘텐츠 만들거나 추가할 때 사용한다

 

- 가상 요소 선택자 활용 예시 -

: p (기준선택자)를 기준으로

앞(before), 뒤(after)에 요소가 있는 것  처럼 선택,

그리고 content 속성을 통해 텍스트를 추가했다

- content 속성의 응용 -

: 다른 CSS 속성과 함께 활용 가능

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

< 가상 클래스 선택자 >

: 요소의 상태를 이용해 선택자를 지정

 

- 링크 가상 클래스 선택자 -

: a 태그에서 발생할 수 있는

링크 상태를 이용해 선택하는 방법

melon 사이트 방문

 

: 종류(2)

1. :link

한 번도 방문한 적이 없는 링크

= 주황색

 

2. :visit

한 번이라도 방문한 적 있는 링크

= 초록색

 

body 태그에

a 태그를 이용해서

클릭할 링크를 써주고

색 변경이 되는지 확인

 

- 동적 가상 클래스 선택자 - 

: 사용자의 행동에 따라

동적으로 변하는 상태를 이용해

선택자를 지정

:hover / color-orange

melon music에만 마우스 올렸을 때

: 종류(2)

1. :hover

태그로 작성한 요소에

마우스를 올렸을 때 작용

 

:active / color-red

2. :active

태그를 마우스로 클릭하면

해당 태그가 선택자로 지정

 

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

: 입력 요소의 특정 상태를

이용해 선택자로 지정

 

입력요소:

input태그

textarea 태그

평상시

클릭 시, 커서 활성화

: 종류(4)

1. :focus

입력 요소에

커서가 활성화되면

스타일 적용

2. :checked

체크박스가 표시(checked 속성)

되어 있으면

선택자로 지정

disabled 속성만 준 상태 (비활성모드)

:disabled 선택자 button에만 사용

:disabled 선택자 input태그와 button태그 둘 다 사용

3. :disabled

상호작용 요소가 비활성화되면

선택자로 지정

(disabled 속성 사용)

input 태그 disabled 속성 삭제 (활성상태)

4. :enabled

상호작용 요소과 활성화되면

선택자로 지정

 

< 구조적 가상 클래스 선택자 >

: HTML 태그의 사용위치,

다른 태그와의 관계에 따라

요소 선택

1. :first-child와 last-child

:first-child 

= 부모인 요소의

첫 번째 자식요소 선택

:last-child 

= 마지막 자식요소 선택

 

:nth-child(n)

:nth-child(n)

: nth-last-child(n)

2. :nth-child(n)과 nth-last-child(n)

:nth-child(n)

= 부모요소(div)의

모든 자식 요소 중에서

n 번째 자식요소 선택

: nth-last-child(n)

= 선택자를 찾는 기준이

부모요소(div)의 끝에서

\찾는거만 다르고

동일하다

 :nth-of-type(n)

nth-last-of-type(n)

3. :nth-of-type(n)과 nth-last-of-type(n)

 :nth-of-type(n)

= 부모요소(div)의

자식 요소 중에서

n 번째로 등장하는 요소 선택

: nth-last-of-type(n)

= 부모요소의 자식요소 중에서

끝에서부터 찾는거만 다르고 동일

4. :first-of-type과 last-of-type

 :first-of-type

= 자식 요소 중에서

첫 번째로 등장하는 요소 선택

: last-of-type

= 부모의 자식 중에서

마지막에 나오는 요소

5.5 ) 다양한 선택자 조합하기

실무에서는 선택자 조합 허용

 

ex)

div.box{}

= class 속성값이 box인 div태그