WEBVTT

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

00:00:05.211 --> 00:00:11.743
CSS는 모든 글자를 산세리프체로 사용하고 있어요

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

00:00:17.114 --> 00:00:24.737
이전에 보지 못했던 많은 규칙이 있어요
재미있어 보일지도 모르겠어요

00:00:24.737 --> 00:00:29.967
a:단어 를 입력해볼게요

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

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

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

00:00:48.002 --> 00:00:51.826
이것은 다른 방법들로는 표현될 수 없는 것이에요

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

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

00:01:03.449 --> 00:01:06.582
많은 사용자들에게는
파란색으로 남아있는 것들이지요

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

00:01:10.405 --> 00:01:13.294
많은 사용자들에게는
보라색으로 남아있는 것들이지요

00:01:13.294 --> 00:01:16.121
우리는 색깔을 바꿔볼 수 있어요

00:01:16.121 --> 00:01:18.083
그러나 여러분은 이것을 하는 데에
마땅한 이유가 있어야 합니다

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

00:01:22.954 --> 00:01:25.549
그들이 방문한 페이지를
아는 것처럼 보이죠

00:01:25.549 --> 00:01:28.474
그래서 웬만하면 페이지를
벗어나지 않아요

00:01:28.474 --> 00:01:31.092
제가 이 두가지 법칙을 깨보도록 하겠습니다

00:01:31.092 --> 00:01:34.221
개인적으로 좋은 방법이라는 생각은 안들거든요

00:01:34.221 --> 00:01:38.972
다음 규칙은 재밌는 건데요
a:hover 입니다

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

00:01:46.138 --> 00:01:48.408
그리고 요소에 어떠한 것을
적용시킬 수 있게 됩니다

00:01:48.408 --> 00:01:53.353
잠시 동영상을 멈추고 hover 가 어떻게
동작하는지 살펴봅시다

00:01:53.353 --> 00:01:57.406
계속 해볼게요, 기다려보죠

00:01:57.406 --> 00:02:01.165
글자 색이 바뀐 것이 보이시나요?
멋진 효과네요

00:02:01.165 --> 00:02:05.073
이제 'hover' pseudo-class를 사용해볼 수 있어요

00:02:05.073 --> 00:02:07.662
모든 제품에서 동작하지는 않습니다
이 점을 기억하세요

00:02:07.662 --> 00:02:11.421
핸드폰에서는 hover가 동작하지 않습니다
터치하거나 안하거나 그뿐이지요

00:02:11.421 --> 00:02:15.298
hover 효과가 좋은점이 많지만 이것에
너무 의존하지는 마세요

00:02:15.298 --> 00:02:20.503
여기 남은 두가지는 무엇일까요?
'hover'와 비슷한 것들입니다

00:02:20.503 --> 00:02:23.067
사용자가 현재 하고있는 것을 알게 해주죠

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

00:02:27.191 --> 00:02:34.076
현재 동작중인 요소들을 선택합니다
link처럼 말이죠

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

00:02:38.614 --> 00:02:42.394
요소들을 선택하게 됩니다

00:02:42.394 --> 00:02:47.744
얘기를 잠시 멈추고 링크를 연결해보세요
tab키를 눌러보고 어떤 일이 생기는지 보세요



00:02:47.744 --> 00:02:51.497
색깔이 바뀌는게 보이셨나요?

00:02:51.497 --> 00:02:56.415
'hover', 'active' 그리고 'focus'를 선택해볼게요
이것들은 비슷한 종류입니다

00:02:56.415 --> 00:02:58.842
사용자는 어떻게든 링크를 연결할 것입니다

00:02:58.842 --> 00:03:03.655
많은 웹 디자이너들이 이러한 동일한
방법을 사용합니다

00:03:03.655 --> 00:03:07.114
색을 바꾸려고 할 때 어떻게 할까요?

00:03:07.114 --> 00:03:13.552
우리가 지금 막 배웠던

00:03:13.552 --> 00:03:15.885
pseudo-class 중에 하나를 선택하면 되겠네요

00:03:15.885 --> 00:03:20.140
selector들을 ,(콤마)로 나눠서 하나의 규칙 안에
넣을 수가 있습니다

00:03:20.140 --> 00:03:27.214
여기에 , 를 넣은 후에, a:active나 a:focus
이처럼 사용할 수 있어요

00:03:27.214 --> 00:03:37.418
이 두개를 지우고 세개를
한번에 바꿀 수가 있게 되죠

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

00:03:41.531 --> 00:03:45.123
CSS pseudo-classes 를 인터넷에서
찾아볼 수 있을 거에요

00:03:45.123 --> 00:03:48.653
혹은 저와 더 배워보고 싶으시다면
좀 더 기다려주세요