[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.83,0:00:05.21,Default,,0000,0000,0000,,유명한 그림들의 목록으로 연결되는\N웹페이지로 돌아가 볼게요
Dialogue: 0,0:00:05.21,0:00:11.74,Default,,0000,0000,0000,,CSS는 모든 글자를 산세리프체로 사용하고 있어요
Dialogue: 0,0:00:11.74,0:00:17.11,Default,,0000,0000,0000,,그리고 h1, h2와 같이 글자체를 바꾸기 위해서는\N규칙이 있습니다
Dialogue: 0,0:00:17.11,0:00:24.74,Default,,0000,0000,0000,,이전에 보지 못했던 많은 규칙이 있어요\N재미있어 보일지도 모르겠어요
Dialogue: 0,0:00:24.74,0:00:29.97,Default,,0000,0000,0000,,a:단어 를 입력해볼게요
Dialogue: 0,0:00:29.97,0:00:35.50,Default,,0000,0000,0000,,: (콜론)은 뭘까요?\N무엇이 다양한 규칙들중에 선택되게끔 할까요?
Dialogue: 0,0:00:35.50,0:00:41.06,Default,,0000,0000,0000,,:(콜론)이 수행하게 되는데 이것을 pseudo-classes\N라고 부릅니다
Dialogue: 0,0:00:41.06,0:00:48.00,Default,,0000,0000,0000,,pseudo-classes는 정보에 해당하는 요소를 \N선택할 때 사용합니다
Dialogue: 0,0:00:48.00,0:00:51.83,Default,,0000,0000,0000,,이것은 다른 방법들로는 표현될 수 없는 것이에요
Dialogue: 0,0:00:51.83,0:00:57.43,Default,,0000,0000,0000,,이 페이지에서, pseudo-classes를 이용해서 \N링크를 만들어 볼거에요
Dialogue: 0,0:00:57.43,0:01:03.45,Default,,0000,0000,0000,,'link' pseudo-classes는 사용자가 아직 방문하지\N않은 페이지에 연결시킬 수 있어요
Dialogue: 0,0:01:03.45,0:01:06.58,Default,,0000,0000,0000,,많은 사용자들에게는\N파란색으로 남아있는 것들이지요
Dialogue: 0,0:01:06.58,0:01:10.40,Default,,0000,0000,0000,,'visited' pseudo-classes는 사용자들이 방문한\N링크를 선택할 수 있게 해줍니다
Dialogue: 0,0:01:10.40,0:01:13.29,Default,,0000,0000,0000,,많은 사용자들에게는\N보라색으로 남아있는 것들이지요
Dialogue: 0,0:01:13.29,0:01:16.12,Default,,0000,0000,0000,,우리는 색깔을 바꿔볼 수 있어요
Dialogue: 0,0:01:16.12,0:01:18.08,Default,,0000,0000,0000,,그러나 여러분은 이것을 하는 데에\N마땅한 이유가 있어야 합니다
Dialogue: 0,0:01:18.08,0:01:22.95,Default,,0000,0000,0000,,사람들은 파란색과 보라색을 그들이 방문하거나\N방문하지 않은 페이지로 생각하게 됩니다
Dialogue: 0,0:01:22.95,0:01:25.55,Default,,0000,0000,0000,,그들이 방문한 페이지를\N아는 것처럼 보이죠
Dialogue: 0,0:01:25.55,0:01:28.47,Default,,0000,0000,0000,,그래서 웬만하면 페이지를\N벗어나지 않아요
Dialogue: 0,0:01:28.47,0:01:31.09,Default,,0000,0000,0000,,제가 이 두가지 법칙을 깨보도록 하겠습니다
Dialogue: 0,0:01:31.09,0:01:34.22,Default,,0000,0000,0000,,개인적으로 좋은 방법이라는 생각은 안들거든요
Dialogue: 0,0:01:34.22,0:01:38.97,Default,,0000,0000,0000,,다음 규칙은 재밌는 건데요\Na:hover 입니다
Dialogue: 0,0:01:38.97,0:01:46.14,Default,,0000,0000,0000,,'hover' pseudo-class는 현재 사용자가\N보고 있는 요소를 선택해 줍니다
Dialogue: 0,0:01:46.14,0:01:48.41,Default,,0000,0000,0000,,그리고 요소에 어떠한 것을\N적용시킬 수 있게 됩니다
Dialogue: 0,0:01:48.41,0:01:53.35,Default,,0000,0000,0000,,잠시 동영상을 멈추고 hover 가 어떻게\N동작하는지 살펴봅시다
Dialogue: 0,0:01:53.35,0:01:57.41,Default,,0000,0000,0000,,계속 해볼게요, 기다려보죠
Dialogue: 0,0:01:57.41,0:02:01.16,Default,,0000,0000,0000,,글자 색이 바뀐 것이 보이시나요?\N멋진 효과네요
Dialogue: 0,0:02:01.16,0:02:05.07,Default,,0000,0000,0000,,이제 'hover' pseudo-class를 사용해볼 수 있어요
Dialogue: 0,0:02:05.07,0:02:07.66,Default,,0000,0000,0000,,모든 제품에서 동작하지는 않습니다\N이 점을 기억하세요
Dialogue: 0,0:02:07.66,0:02:11.42,Default,,0000,0000,0000,,핸드폰에서는 hover가 동작하지 않습니다\N터치하거나 안하거나 그뿐이지요
Dialogue: 0,0:02:11.42,0:02:15.30,Default,,0000,0000,0000,,hover 효과가 좋은점이 많지만 이것에\N너무 의존하지는 마세요
Dialogue: 0,0:02:15.30,0:02:20.50,Default,,0000,0000,0000,,여기 남은 두가지는 무엇일까요?\N'hover'와 비슷한 것들입니다
Dialogue: 0,0:02:20.50,0:02:23.07,Default,,0000,0000,0000,,사용자가 현재 하고있는 것을 알게 해주죠
Dialogue: 0,0:02:23.07,0:02:27.19,Default,,0000,0000,0000,,'active' pseudo-class는 사용자가 현재 페이지를 \N변경하기 전에 링크를 누르고 있다면
Dialogue: 0,0:02:27.19,0:02:34.08,Default,,0000,0000,0000,,현재 동작중인 요소들을 선택합니다\Nlink처럼 말이죠
Dialogue: 0,0:02:34.08,0:02:38.61,Default,,0000,0000,0000,,'focus' pseudo-class는 사용자가 tab 키를 누르는\N것과 같은 동작이 발생할 때
Dialogue: 0,0:02:38.61,0:02:42.39,Default,,0000,0000,0000,,요소들을 선택하게 됩니다
Dialogue: 0,0:02:42.39,0:02:47.74,Default,,0000,0000,0000,,얘기를 잠시 멈추고 링크를 연결해보세요\Ntab키를 눌러보고 어떤 일이 생기는지 보세요\N\N
Dialogue: 0,0:02:47.74,0:02:51.50,Default,,0000,0000,0000,,색깔이 바뀌는게 보이셨나요?
Dialogue: 0,0:02:51.50,0:02:56.42,Default,,0000,0000,0000,,'hover', 'active' 그리고 'focus'를 선택해볼게요\N이것들은 비슷한 종류입니다
Dialogue: 0,0:02:56.42,0:02:58.84,Default,,0000,0000,0000,,사용자는 어떻게든 링크를 연결할 것입니다
Dialogue: 0,0:02:58.84,0:03:03.66,Default,,0000,0000,0000,,많은 웹 디자이너들이 이러한 동일한\N방법을 사용합니다
Dialogue: 0,0:03:03.66,0:03:07.11,Default,,0000,0000,0000,,색을 바꾸려고 할 때 어떻게 할까요?
Dialogue: 0,0:03:07.11,0:03:13.55,Default,,0000,0000,0000,,우리가 지금 막 배웠던
Dialogue: 0,0:03:13.55,0:03:15.88,Default,,0000,0000,0000,,pseudo-class 중에 하나를 선택하면 되겠네요
Dialogue: 0,0:03:15.88,0:03:20.14,Default,,0000,0000,0000,,selector들을 ,(콤마)로 나눠서 하나의 규칙 안에\N넣을 수가 있습니다
Dialogue: 0,0:03:20.14,0:03:27.21,Default,,0000,0000,0000,,여기에 , 를 넣은 후에, a:active나 a:focus\N이처럼 사용할 수 있어요
Dialogue: 0,0:03:27.21,0:03:37.42,Default,,0000,0000,0000,,이 두개를 지우고 세개를\N한번에 바꿀 수가 있게 되죠
Dialogue: 0,0:03:37.42,0:03:41.53,Default,,0000,0000,0000,,여기까지가 처음 소개드릴 pseudo-classes입니다\N한 가지 방법은 아니였죠
Dialogue: 0,0:03:41.53,0:03:45.12,Default,,0000,0000,0000,,CSS pseudo-classes 를 인터넷에서\N찾아볼 수 있을 거에요
Dialogue: 0,0:03:45.12,0:03:48.65,Default,,0000,0000,0000,,혹은 저와 더 배워보고 싶으시다면\N좀 더 기다려주세요