CSS dynamic pseudo classes

유명한 그림들의 목록으로 연결되는
웹페이지로 돌아가 볼게요

CSS는 모든 글자를 산세리프체로 사용하고 있어요

그리고 h1, h2와 같이 글자체를 바꾸기 위해서는
규칙이 있습니다

이전에 보지 못했던 많은 규칙이 있어요
재미있어 보일지도 모르겠어요

a:단어 를 입력해볼게요

: (콜론)은 뭘까요?
무엇이 다양한 규칙들중에 선택되게끔 할까요?

:(콜론)이 수행하게 되는데 이것을 pseudo-classes
라고 부릅니다

pseudo-classes는 정보에 해당하는 요소를
선택할 때 사용합니다

이것은 다른 방법들로는 표현될 수 없는 것이에요

이 페이지에서, pseudo-classes를 이용해서
링크를 만들어 볼거에요

'link' pseudo-classes는 사용자가 아직 방문하지
않은 페이지에 연결시킬 수 있어요

많은 사용자들에게는
파란색으로 남아있는 것들이지요

'visited' pseudo-classes는 사용자들이 방문한
링크를 선택할 수 있게 해줍니다

많은 사용자들에게는
보라색으로 남아있는 것들이지요

우리는 색깔을 바꿔볼 수 있어요

그러나 여러분은 이것을 하는 데에
마땅한 이유가 있어야 합니다

사람들은 파란색과 보라색을 그들이 방문하거나
방문하지 않은 페이지로 생각하게 됩니다

그들이 방문한 페이지를
아는 것처럼 보이죠

그래서 웬만하면 페이지를
벗어나지 않아요

제가 이 두가지 법칙을 깨보도록 하겠습니다

개인적으로 좋은 방법이라는 생각은 안들거든요

다음 규칙은 재밌는 건데요
a:hover 입니다

'hover' pseudo-class는 현재 사용자가
보고 있는 요소를 선택해 줍니다

그리고 요소에 어떠한 것을
적용시킬 수 있게 됩니다

잠시 동영상을 멈추고 hover 가 어떻게
동작하는지 살펴봅시다

계속 해볼게요, 기다려보죠

글자 색이 바뀐 것이 보이시나요?
멋진 효과네요

이제 'hover' pseudo-class를 사용해볼 수 있어요

모든 제품에서 동작하지는 않습니다
이 점을 기억하세요

핸드폰에서는 hover가 동작하지 않습니다
터치하거나 안하거나 그뿐이지요

hover 효과가 좋은점이 많지만 이것에
너무 의존하지는 마세요

여기 남은 두가지는 무엇일까요?
'hover'와 비슷한 것들입니다

사용자가 현재 하고있는 것을 알게 해주죠

'active' pseudo-class는 사용자가 현재 페이지를
변경하기 전에 링크를 누르고 있다면

현재 동작중인 요소들을 선택합니다
link처럼 말이죠

'focus' pseudo-class는 사용자가 tab 키를 누르는
것과 같은 동작이 발생할 때

요소들을 선택하게 됩니다

얘기를 잠시 멈추고 링크를 연결해보세요
tab키를 눌러보고 어떤 일이 생기는지 보세요

색깔이 바뀌는게 보이셨나요?

'hover', 'active' 그리고 'focus'를 선택해볼게요
이것들은 비슷한 종류입니다

사용자는 어떻게든 링크를 연결할 것입니다

많은 웹 디자이너들이 이러한 동일한
방법을 사용합니다

색을 바꾸려고 할 때 어떻게 할까요?

우리가 지금 막 배웠던

pseudo-class 중에 하나를 선택하면 되겠네요

selector들을 ,(콤마)로 나눠서 하나의 규칙 안에
넣을 수가 있습니다

여기에 , 를 넣은 후에, a:active나 a:focus
이처럼 사용할 수 있어요

이 두개를 지우고 세개를
한번에 바꿀 수가 있게 되죠

여기까지가 처음 소개드릴 pseudo-classes입니다
한 가지 방법은 아니였죠

CSS pseudo-classes 를 인터넷에서
찾아볼 수 있을 거에요

혹은 저와 더 배워보고 싶으시다면
좀 더 기다려주세요