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

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

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

0:00:17.114,0:00:24.737
이전에 보지 못했던 많은 규칙이 있어요[br]재미있어 보일지도 모르겠어요

0:00:24.737,0:00:29.967
a:단어 를 입력해볼게요

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

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

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

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

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

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

0:01:03.449,0:01:06.582
많은 사용자들에게는[br]파란색으로 남아있는 것들이지요

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

0:01:10.405,0:01:13.294
많은 사용자들에게는[br]보라색으로 남아있는 것들이지요

0:01:13.294,0:01:16.121
우리는 색깔을 바꿔볼 수 있어요

0:01:16.121,0:01:18.083
그러나 여러분은 이것을 하는 데에[br]마땅한 이유가 있어야 합니다

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

0:01:22.954,0:01:25.549
그들이 방문한 페이지를[br]아는 것처럼 보이죠

0:01:25.549,0:01:28.474
그래서 웬만하면 페이지를[br]벗어나지 않아요

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

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

0:01:34.221,0:01:38.972
다음 규칙은 재밌는 건데요[br]a:hover 입니다

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

0:01:46.138,0:01:48.408
그리고 요소에 어떠한 것을[br]적용시킬 수 있게 됩니다

0:01:48.408,0:01:53.353
잠시 동영상을 멈추고 hover 가 어떻게[br]동작하는지 살펴봅시다

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

0:01:57.406,0:02:01.165
글자 색이 바뀐 것이 보이시나요?[br]멋진 효과네요

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

0:02:05.073,0:02:07.662
모든 제품에서 동작하지는 않습니다[br]이 점을 기억하세요

0:02:07.662,0:02:11.421
핸드폰에서는 hover가 동작하지 않습니다[br]터치하거나 안하거나 그뿐이지요

0:02:11.421,0:02:15.298
hover 효과가 좋은점이 많지만 이것에[br]너무 의존하지는 마세요

0:02:15.298,0:02:20.503
여기 남은 두가지는 무엇일까요?[br]'hover'와 비슷한 것들입니다

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

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

0:02:27.191,0:02:34.076
현재 동작중인 요소들을 선택합니다[br]link처럼 말이죠

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

0:02:38.614,0:02:42.394
요소들을 선택하게 됩니다

0:02:42.394,0:02:47.744
얘기를 잠시 멈추고 링크를 연결해보세요[br]tab키를 눌러보고 어떤 일이 생기는지 보세요[br][br]

0:02:47.744,0:02:51.497
색깔이 바뀌는게 보이셨나요?

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

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

0:02:58.842,0:03:03.655
많은 웹 디자이너들이 이러한 동일한[br]방법을 사용합니다

0:03:03.655,0:03:07.114
색을 바꾸려고 할 때 어떻게 할까요?

0:03:07.114,0:03:13.552
우리가 지금 막 배웠던

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

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

0:03:20.140,0:03:27.214
여기에 , 를 넣은 후에, a:active나 a:focus[br]이처럼 사용할 수 있어요

0:03:27.214,0:03:37.418
이 두개를 지우고 세개를[br]한번에 바꿀 수가 있게 되죠

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

0:03:41.531,0:03:45.123
CSS pseudo-classes 를 인터넷에서[br]찾아볼 수 있을 거에요

0:03:45.123,0:03:48.653
혹은 저와 더 배워보고 싶으시다면[br]좀 더 기다려주세요