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

2
00:00:05,211 --> 00:00:11,743
CSS는 모든 글자를 산세리프체로 사용하고 있어요

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

4
00:00:17,114 --> 00:00:24,737
이전에 보지 못했던 많은 규칙이 있어요
재미있어 보일지도 모르겠어요

5
00:00:24,737 --> 00:00:29,967
a:단어 를 입력해볼게요

6
00:00:29,967 --> 00:00:35,504
: (콜론)은 뭘까요?
무엇이 다양한 규칙들중에 선택되게끔 할까요?

7
00:00:35,504 --> 00:00:41,065
:(콜론)이 수행하게 되는데 이것을 pseudo-classes
라고 부릅니다

8
00:00:41,065 --> 00:00:48,002
pseudo-classes는 정보에 해당하는 요소를 
선택할 때 사용합니다

9
00:00:48,002 --> 00:00:51,826
이것은 다른 방법들로는 표현될 수 없는 것이에요

10
00:00:51,826 --> 00:00:57,430
이 페이지에서, pseudo-classes를 이용해서 
링크를 만들어 볼거에요

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

12
00:01:03,449 --> 00:01:06,582
많은 사용자들에게는
파란색으로 남아있는 것들이지요

13
00:01:06,582 --> 00:01:10,405
'visited' pseudo-classes는 사용자들이 방문한
링크를 선택할 수 있게 해줍니다

14
00:01:10,405 --> 00:01:13,294
많은 사용자들에게는
보라색으로 남아있는 것들이지요

15
00:01:13,294 --> 00:01:16,121
우리는 색깔을 바꿔볼 수 있어요

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

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

18
00:01:22,954 --> 00:01:25,549
그들이 방문한 페이지를
아는 것처럼 보이죠

19
00:01:25,549 --> 00:01:28,474
그래서 웬만하면 페이지를
벗어나지 않아요

20
00:01:28,474 --> 00:01:31,092
제가 이 두가지 법칙을 깨보도록 하겠습니다

21
00:01:31,092 --> 00:01:34,221
개인적으로 좋은 방법이라는 생각은 안들거든요

22
00:01:34,221 --> 00:01:38,972
다음 규칙은 재밌는 건데요
a:hover 입니다

23
00:01:38,972 --> 00:01:46,138
'hover' pseudo-class는 현재 사용자가
보고 있는 요소를 선택해 줍니다

24
00:01:46,138 --> 00:01:48,408
그리고 요소에 어떠한 것을
적용시킬 수 있게 됩니다

25
00:01:48,408 --> 00:01:53,353
잠시 동영상을 멈추고 hover 가 어떻게
동작하는지 살펴봅시다

26
00:01:53,353 --> 00:01:57,406
계속 해볼게요, 기다려보죠

27
00:01:57,406 --> 00:02:01,165
글자 색이 바뀐 것이 보이시나요?
멋진 효과네요

28
00:02:01,165 --> 00:02:05,073
이제 'hover' pseudo-class를 사용해볼 수 있어요

29
00:02:05,073 --> 00:02:07,662
모든 제품에서 동작하지는 않습니다
이 점을 기억하세요

30
00:02:07,662 --> 00:02:11,421
핸드폰에서는 hover가 동작하지 않습니다
터치하거나 안하거나 그뿐이지요

31
00:02:11,421 --> 00:02:15,298
hover 효과가 좋은점이 많지만 이것에
너무 의존하지는 마세요

32
00:02:15,298 --> 00:02:20,503
여기 남은 두가지는 무엇일까요?
'hover'와 비슷한 것들입니다

33
00:02:20,503 --> 00:02:23,067
사용자가 현재 하고있는 것을 알게 해주죠

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

35
00:02:27,191 --> 00:02:34,076
현재 동작중인 요소들을 선택합니다
link처럼 말이죠

36
00:02:34,076 --> 00:02:38,614
'focus' pseudo-class는 사용자가 tab 키를 누르는
것과 같은 동작이 발생할 때

37
00:02:38,614 --> 00:02:42,394
요소들을 선택하게 됩니다

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



39
00:02:47,744 --> 00:02:51,497
색깔이 바뀌는게 보이셨나요?

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

41
00:02:56,415 --> 00:02:58,842
사용자는 어떻게든 링크를 연결할 것입니다

42
00:02:58,842 --> 00:03:03,655
많은 웹 디자이너들이 이러한 동일한
방법을 사용합니다

43
00:03:03,655 --> 00:03:07,114
색을 바꾸려고 할 때 어떻게 할까요?

44
00:03:07,114 --> 00:03:13,552
우리가 지금 막 배웠던

45
00:03:13,552 --> 00:03:15,885
pseudo-class 중에 하나를 선택하면 되겠네요

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

47
00:03:20,140 --> 00:03:27,214
여기에 , 를 넣은 후에, a:active나 a:focus
이처럼 사용할 수 있어요

48
00:03:27,214 --> 00:03:37,418
이 두개를 지우고 세개를
한번에 바꿀 수가 있게 되죠

49
00:03:37,418 --> 00:03:41,531
여기까지가 처음 소개드릴 pseudo-classes입니다
한 가지 방법은 아니였죠

50
00:03:41,531 --> 00:03:45,123
CSS pseudo-classes 를 인터넷에서
찾아볼 수 있을 거에요

51
00:03:45,123 --> 00:03:48,653
혹은 저와 더 배워보고 싶으시다면
좀 더 기다려주세요