[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.53,0:00:04.19,Default,,0000,0000,0000,,우리는 CSS 안에 있는 selector를 사용한 순간부터\N많은 것들을 지금까지 관리해 왔습니다
Dialogue: 0,0:00:04.19,0:00:08.01,Default,,0000,0000,0000,,여러 원소들을 태그 이름, 아이디, 클래스 이름으로 선택했죠
Dialogue: 0,0:00:08.29,0:00:11.03,Default,,0000,0000,0000,,이제, 이 웹페이지에서 두번째 복습을 시작해 봅시다
Dialogue: 0,0:00:11.26,0:00:13.66,Default,,0000,0000,0000,,이 웹사이트는 전부 도넛에 관한 것입니다
Dialogue: 0,0:00:13.79,0:00:15.96,Default,,0000,0000,0000,,또한, 제목과, 절들이 있고...
Dialogue: 0,0:00:15.96,0:00:18.94,Default,,0000,0000,0000,,어떤 절들은 짧은 하나의 농담같은 사실에 대한 것입니다.
Dialogue: 0,0:00:19.24,0:00:23.14,Default,,0000,0000,0000,,CSS는 페이지 안에 있는 '' 태그를 \N전부 선택한다는 규칙으로 출발합니다
Dialogue: 0,0:00:23.14,0:00:25.61,Default,,0000,0000,0000,,그 다음, sans-serif 글씨체로 변경합니다
Dialogue: 0,0:00:26.07,0:00:30.06,Default,,0000,0000,0000,,저는 이것을 고정 너비로 바꾸어 \N여러분이 선택한 모든 것을 볼 수 있게 할 것입니다
Dialogue: 0,0:00:30.78,0:00:31.81,Default,,0000,0000,0000,,보이나요?
Dialogue: 0,0:00:34.10,0:00:37.84,Default,,0000,0000,0000,,다음 규칙은, '도넛-헤더'라는 아이디를 가진 어떤 원소든 선택하는 것입니다
Dialogue: 0,0:00:38.03,0:00:41.91,Default,,0000,0000,0000,,그리고, 이들은 해시 기호로 시작하기 때문에\N우리는 아이디를 선택하는 것을 알 수 있습니다
Dialogue: 0,0:00:42.03,0:00:43.76,Default,,0000,0000,0000,,아이디가 매우 서술적일지라도,
Dialogue: 0,0:00:43.76,0:00:46.69,Default,,0000,0000,0000,,저에게는 처음에 큰 주제를 가지고 있고,
Dialogue: 0,0:00:46.69,0:00:47.75,Default,,0000,0000,0000,,글씨체를 바꾸는 것처럼 느껴집니다
Dialogue: 0,0:00:47.97,0:00:51.42,Default,,0000,0000,0000,,하지만, 저는 아래로 스크롤한 후 ''이 \N아이디를 가지는 것을 보여주겠습니다
Dialogue: 0,0:00:51.45,0:00:53.18,Default,,0000,0000,0000,,네, 여기 있네요
Dialogue: 0,0:00:53.39,0:00:56.79,Default,,0000,0000,0000,,마지막 규칙은 'fact'라는 클래스 이름을 가지는\N모든 원소를 선택하는 것입니다
Dialogue: 0,0:00:56.90,0:01:00.38,Default,,0000,0000,0000,,그리고 그것들은 점으로 시작하기 때문에,\N우리는 그들이 클래스 이름을 찾는다는 것을 알 수 있습니다
Dialogue: 0,0:01:00.49,0:01:02.96,Default,,0000,0000,0000,,그 클래스 이름을 가지는 모든 원소를 찾기 위해,
Dialogue: 0,0:01:02.96,0:01:05.23,Default,,0000,0000,0000,,저는 이 규칙이 작동하는지 살펴볼 수 밖에 없습니다--
Dialogue: 0,0:01:05.23,0:01:07.83,Default,,0000,0000,0000,,처음과 중간 부분과 어떤 충전재를 추가하면서--
Dialogue: 0,0:01:07.83,0:01:10.46,Default,,0000,0000,0000,,또는 클래스 이름을 위해 HTML을 볼 수 있습니다
Dialogue: 0,0:01:10.62,0:01:13.15,Default,,0000,0000,0000,,저는 클래스 이름이 이 절 위에 있는것을 볼 수 있고
Dialogue: 0,0:01:13.15,0:01:14.30,Default,,0000,0000,0000,,그리고 이 절에는 -
Dialogue: 0,0:01:14.30,0:01:16.46,Default,,0000,0000,0000,,두 절이 짧은 농담같은 사실과 있는 것을 볼 수 있습니다 -
Dialogue: 0,0:01:16.46,0:01:18.32,Default,,0000,0000,0000,,이것이 그들이 지역을 가지고 있는 이유입니다
Dialogue: 0,0:01:18.45,0:01:19.78,Default,,0000,0000,0000,,클래스 이름은 대단합니다
Dialogue: 0,0:01:19.78,0:01:23.01,Default,,0000,0000,0000,,왜냐하면, 그것들이 여러 개의 원소들을 뛰어넘어\N같은 형태를 쓸 수 있도록 만들기 때문입니다
Dialogue: 0,0:01:23.03,0:01:25.35,Default,,0000,0000,0000,,하지만, 우리가 클래스 이름으로도 할 수 없는 것이 있고,
Dialogue: 0,0:01:25.35,0:01:27.06,Default,,0000,0000,0000,,그것이 제가 지금부터 보여드릴 내용입니다
Dialogue: 0,0:01:27.23,0:01:29.14,Default,,0000,0000,0000,,도넛에 관한 웹페이지가 있다고 합시다
Dialogue: 0,0:01:29.14,0:01:31.36,Default,,0000,0000,0000,,하지만 도넛은 당신의 몸에 그렇게 좋지는 않죠
Dialogue: 0,0:01:31.44,0:01:34.01,Default,,0000,0000,0000,,그것은 아마 당신에게 가장 건강하지 않은 것들 중 하나일 것입니다
Dialogue: 0,0:01:34.03,0:01:36.96,Default,,0000,0000,0000,,그리고, 설탕 때문에 중독을 일으키기도 하죠
Dialogue: 0,0:01:37.01,0:01:39.64,Default,,0000,0000,0000,,그래서 우리는 도넛에 대해 이야기할 페이지를 만드려고 합니다
Dialogue: 0,0:01:39.64,0:01:42.42,Default,,0000,0000,0000,,아마 우리는 사람들에게 도넛의 건강하지 않은 면에 대해\N사람들에게 경고할 수 있을 것입니다
Dialogue: 0,0:01:42.54,0:01:47.26,Default,,0000,0000,0000,,우리가 이 주제를 빨간색으로 색칠해,\N얼마나 위험한지 잘 전달된다면 어떨까요?
Dialogue: 0,0:01:47.63,0:01:49.02,Default,,0000,0000,0000,,어떻게 이를 실천할 수 있을까요?
Dialogue: 0,0:01:49.20,0:01:53.40,Default,,0000,0000,0000,,음, 우선 'fact' CSS 규칙에 'color' 속성을\N추가해 볼 수도 있겠죠
Dialogue: 0,0:01:53.40,0:01:55.10,Default,,0000,0000,0000,,그 다음에 어떻게 작동하는지 지켜봅시다
Dialogue: 0,0:01:55.65,0:02:00.33,Default,,0000,0000,0000,,하지만, 이것은 사실들을 빨간색으로 만들지만,\N두 번째사실은 경고가 아닙니다
Dialogue: 0,0:02:00.33,0:02:01.85,Default,,0000,0000,0000,,단순히 사실일 뿐이죠
Dialogue: 0,0:02:02.05,0:02:03.84,Default,,0000,0000,0000,,그래서 우리는 이것이 빨간색으로 변하지 않기를 바랍니다
Dialogue: 0,0:02:04.17,0:02:05.58,Default,,0000,0000,0000,,여기서 우리는 아이디를 추가할 수 있습니다
Dialogue: 0,0:02:05.58,0:02:09.57,Default,,0000,0000,0000,,하지만 그렇다면 색칠해\N나중에 경고문으로 바꾸거나,
Dialogue: 0,0:02:09.57,0:02:10.96,Default,,0000,0000,0000,,경고문을 추가할 때
Dialogue: 0,0:02:10.96,0:02:14.18,Default,,0000,0000,0000,,아이디를 계속 추가해야만 합니다\N그 아이디들에 대한 규칙도 함께요
Dialogue: 0,0:02:14.39,0:02:19.81,Default,,0000,0000,0000,,이와 같은 상황에서는, '' 태그에\N새로운 클래스를 만드는 게 가장 바람직합니다
Dialogue: 0,0:02:20.10,0:02:24.15,Default,,0000,0000,0000,,브라우저는 우리가 하나의 태그에,\N여러개의 클래스를 사용하는 것을 지원합니다
Dialogue: 0,0:02:24.54,0:02:28.53,Default,,0000,0000,0000,,이것을 하기 위해서는, 단순히 커서를\N마지막 클래스 이름에 옮긴 후,
Dialogue: 0,0:02:28.53,0:02:33.20,Default,,0000,0000,0000,,한 칸 띄우고, '경고'같은 새로운 클래스 이름을 씁니다
Dialogue: 0,0:02:33.98,0:02:36.33,Default,,0000,0000,0000,,이제 우리는 경고에 관한 규칙을 만들 수 있고,
Dialogue: 0,0:02:37.12,0:02:40.24,Default,,0000,0000,0000,,색 속성을 규칙에 적용해주기만 하면 됩니다
Dialogue: 0,0:02:40.84,0:02:44.00,Default,,0000,0000,0000,,이제 처음 주제는 빨간색이지만,\N두번째는 그렇지 않네요
Dialogue: 0,0:02:44.22,0:02:45.41,Default,,0000,0000,0000,,아름답습니다
Dialogue: 0,0:02:45.85,0:02:49.28,Default,,0000,0000,0000,,우리는 지금까지 해왔던 것처럼,\N클래스 이름은 많은 원소에 넣을 수 있습니다
Dialogue: 0,0:02:49.64,0:02:54.12,Default,,0000,0000,0000,,아마 우리는 이 들어간 "deep fried"라는\N글자의 색을 바꾸고 싶을 지도 모릅니다
Dialogue: 0,0:02:54.12,0:02:56.99,Default,,0000,0000,0000,,우리는 이것도 빨간색으로 바꾸고 싶은데요,\N왜냐하면 바싹 튀긴 음식은
Dialogue: 0,0:02:56.99,0:02:59.87,Default,,0000,0000,0000,,몸에 해로운 쪽에 대부분 속해 있기 때문입니다
Dialogue: 0,0:03:00.02,0:03:03.69,Default,,0000,0000,0000,,그래서 우리는\N'class ="warning"'을 추가합니다
Dialogue: 0,0:03:03.69,0:03:04.63,Default,,0000,0000,0000,,물론 빨간색도 마찬가지입니다
Dialogue: 0,0:03:05.04,0:03:10.82,Default,,0000,0000,0000,,이제 여기에 있던 강조문이\N빨간색으로 변한 것을 볼 수 있습니다
Dialogue: 0,0:03:10.82,0:03:14.65,Default,,0000,0000,0000,,또한 이것은 아직까지도 'border: top'과\N'border: bottom'을 가지고 있습니다
Dialogue: 0,0:03:14.80,0:03:17.54,Default,,0000,0000,0000,,이것은 우리가 여러개의 클래스를 사용할 때 생기는 일입니다
Dialogue: 0,0:03:17.54,0:03:20.58,Default,,0000,0000,0000,,브라우저는 아마 이 모든 규칙들이 \N이것들에게도 적용되는지 확인할 것입니다
Dialogue: 0,0:03:20.58,0:03:22.34,Default,,0000,0000,0000,,비슷한 형태의 모든 것에도 적용하겠죠
Dialogue: 0,0:03:22.73,0:03:26.81,Default,,0000,0000,0000,,우리는 색깔만으로 의미를 전달하려고 해서는 안됩니다
Dialogue: 0,0:03:26.81,0:03:28.56,Default,,0000,0000,0000,,색맹인 사람들도 있기 때문이죠
Dialogue: 0,0:03:28.64,0:03:31.30,Default,,0000,0000,0000,,아마도, 색깔의 차이를 잘 구별하지 못하는 사람들이 있을 것입니다
Dialogue: 0,0:03:31.30,0:03:33.82,Default,,0000,0000,0000,,빨간색과 검은색 사이에서 말입니다\N아마 당신도 그들중 하나 일 수도 있죠
Dialogue: 0,0:03:33.90,0:03:37.46,Default,,0000,0000,0000,,그래서 우리의 클래스를 바꾸어\N모두에게 좀 더 알아보기 쉽게 만들어 봅시다
Dialogue: 0,0:03:38.07,0:03:40.71,Default,,0000,0000,0000,,우리는 이 색을 배경 색으로 만들 것입니다
Dialogue: 0,0:03:40.71,0:03:44.74,Default,,0000,0000,0000,,왜냐하면 모든 사람들은 배경 색이 있는지 알 수 있기 때문이죠
Dialogue: 0,0:03:45.10,0:03:47.56,Default,,0000,0000,0000,,빨간색과 검은색에는 상당히 적은 색의 대조가 있습니다
Dialogue: 0,0:03:47.56,0:03:51.30,Default,,0000,0000,0000,,그리고 색의 대조는 우리의 페이지를 사람들이 잘 읽는데 중요하죠
Dialogue: 0,0:03:51.40,0:03:54.08,Default,,0000,0000,0000,,그래서 우리는 색을 흰 색으로 바꾸어 봅시다
Dialogue: 0,0:03:54.78,0:03:56.81,Default,,0000,0000,0000,,네, 이제 우리는 높은 대조를 볼 수 있습니다
Dialogue: 0,0:03:56.81,0:03:59.61,Default,,0000,0000,0000,,빨간 배경은 빨간색을 잘 볼 수 있는 사람을 위한 것이죠
Dialogue: 0,0:03:59.99,0:04:04.50,Default,,0000,0000,0000,,그리고 우리가 클래스를 사용한 순간부터,\N우리의 경고 문구들은 비슷한 형태를 가집니다
Dialogue: 0,0:04:04.77,0:04:07.79,Default,,0000,0000,0000,,이제, CSS class들의 높은 융통성 때문에
Dialogue: 0,0:04:07.79,0:04:10.74,Default,,0000,0000,0000,,우리는 세상을 도넛으로부터 구할 수 있게 되었습니다\N다했다