동위 선택자, 반응 선택자, 상태 선택자 -part1-

이번 포스팅에서는

-동위 선택자

-반응 선택자

-상태 선택자

에 대해 예제와 함께 알아보도록 하겠습니다.

가장 먼저 동위 선택자!

1. 동위 선택자

동위.. 동위라는 뜻은 같은 위치에 있는 이라는 의미를 가지고 있습니다.(다들 아시겠지?;;)

따라서 동위 선택자는 같은 위치에 있는 것들을 선택한다 라는 뜻 입니다.

사용 문법

선택자A + 선택자B -> 선택자 A 바로 뒤에 위치하는 선택자 B를 선택

선택자A ~ 선택자B -> 선택자A 뒤에 위치한 선택자 B를 선택

예제를 통해서 한번 알아보도록 할게요

일단 결과는 이렇게 나왔어요

여기다가 이제 style을 입혀볼게요

이제 동위 선택자가 어떤 의미인지 아셨나요??

이 동위 선택자는 CSS3 애니메션을 사용해 동적으로 움직이는 레이아웃을 구성할 때 

동위 선택자를 사용한다고 합니다.

2. 반응 선택자

이것도 말 그대로 입니다."반응하는 선택자"입니다.

그게 뭐냐고요?? 인터넷 하다가 마우스 올릴때랑 안올릴때랑 글씨색이 다른것을 본적이 있을 것 입니다.

그게 바로 반응 선택자에요!

사용 문법

active : 마우스로 클릭한 태그를 선택

hover : 마우스를 올린 태그를 선택

예제를 통서 한번 반응 선택자가 무엇인지! 알아보도록 합시다

여기까지 설명은 생략해도 되겟죠?

이제 여기다가 반응 선택자스타일을 한번 입혀 볼게요

[해석]

"h1태그에다가 hover 반응 선택자를 입혀 줄거야

근데 마우스를 가져다 대면 글씨색은 빨강으로 바꾸게 할게"

정말 위에 해석처럼 되는지 한번 확인해보록 할게요

(마우스 올리기 전)

(마우스 올린 후)

마우스를 올리니까 이렇게 글씨색이 빨강으로 바뀌는것을 확인할 수 있습니다.

이제 active에 대한걸 확인해 보도록 할게요

최종 코드 입니다. 이렇게 코딩하면 출력 결과는 어떻게 될까요??(실행하기전 먼저 생각해보세요)

[해석]

"active 반응 선택자는 마우스를 클릭하면 해당 태그를 변화시키는 역활이야

그래서 h1태그에 있는 내용을 클릭하면 글씨색이 파랑색으로 바뀌어"

(초기 상태)

(마우스 가져다 된 후)

(마우스로 글씨를 클릭한 경우)

이제 반응 선택자가 무엇인지 잘 아셧나요??

그다음에는 상태 선택자에 대해 알아보도록 하겠습니다.

3. 상태 선택자

입력 양식을 선택할때 사용하는 선택자 입니다.

잘 이해가 안되시죠? 쉽게 말해서 입력 양식을 선택할때 선택하느냐 마느냐에 따라 그 형태(배경색,글자색,그림)가 변화할때 사용하는것 입니다.

예제를 통해서 한번 상태 선택자가 어떤 놈인지 알아보도록 할게요

일단 input태그의 radio 속성을 가진 HTML내용을 만들어 줍니다.

<input>태그의 자손인 a태그는 radio 태그를 클릭할때 영향을 미침니다.

여기다가 상태 선택자를 한번 입혀볼게요

[해석]

"이 태그는 radio태그를 클릭하면 상태 선택자에 의해 style 태그가 입혀집니다.

위에서 checked상태 선택자는 체크 상태의 input 태그를 선택 한다는 의미를 가지고 있어요

그래서 input:checked+a{background-color:yellow;}는

input태그 형태의 체크 상태의 input중 a태그인 놈을 선택할시 배경색을 노랑색으로 하겠다. 라는 의미 이에요"

제가 시험 삼아서 a태그 두개를 입력해 보겠습니다.

이렇게 a태그를 연속으로 입력을 해봤어요 그럼 결과는 배경색이 네이버와 다음 두개다 노란색으로 될까요?

네이버만 배경색이 노란색으로 되는걸 알 수 있습니다.

다음까지 노란색으로 표시를 할려면 input태그를 하나 더 입력을 해줘야되요

※checked는 radio나 checkbox 같이  체크 선택자의 input 태그만 취급합니다.

정리해 보자면, 

-input 태그는 바로 아래 자식만 취급합니다.

-checked 상태 선택자는 input태그의 radio, checkbox 속성만 취급합니다.

이어서 part2에서 다시 설명을 하겠습니다.