[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.81,0:00:02.96,Default,,0000,0000,0000,,도넛과 당근을 살펴보죠
Dialogue: 0,0:00:02.96,0:00:05.43,Default,,0000,0000,0000,,당근은 건강에 좋은 음식이고
Dialogue: 0,0:00:05.43,0:00:07.90,Default,,0000,0000,0000,,토끼가 좋아하죠
Dialogue: 0,0:00:07.90,0:00:10.53,Default,,0000,0000,0000,,오랜지 색이 아닌 당근을 알고 있나요?
Dialogue: 0,0:00:10.53,0:00:13.54,Default,,0000,0000,0000,,원래 당근은 보라색이었어요\N몇몇은 지금까지도 보라색이구요
Dialogue: 0,0:00:13.54,0:00:19.54,Default,,0000,0000,0000,,이 웹페이지엔 당근의 색상 목록과\N보라색 당근의 기원에 대한 설명이 있어요
Dialogue: 0,0:00:19.54,0:00:25.27,Default,,0000,0000,0000,,클래스를 사용해서\N색상 이름을 적절한 색으로 장식했어요
Dialogue: 0,0:00:25.27,0:00:31.90,Default,,0000,0000,0000,,목록에 적용된 스타일은 마음에 드네요\N본문에 적용된 스타일은 마음에 들지 않네요
Dialogue: 0,0:00:31.90,0:00:36.22,Default,,0000,0000,0000,,지금의 배경 색상보다\N좀 더 연한 색상으로 하면 좋겠어요
Dialogue: 0,0:00:36.22,0:00:40.78,Default,,0000,0000,0000,,어떻게 하면 웹브라우저가 \N목록의 보라색과
Dialogue: 0,0:00:40.78,0:00:43.78,Default,,0000,0000,0000,,본문의 보라색을 구분하도록 할 수 할까요?
Dialogue: 0,0:00:43.78,0:00:45.88,Default,,0000,0000,0000,,동일한 클래스 이름을 사용하고 있네요
Dialogue: 0,0:00:45.88,0:00:49.30,Default,,0000,0000,0000,,때문에 다른 클래스를 선언하지 않는 한\N이 클래스만 가지고는 구분할 수는 없어요
Dialogue: 0,0:00:49.30,0:00:52.92,Default,,0000,0000,0000,,동일한 strong 태그를 사용하고 있네요
Dialogue: 0,0:00:52.92,0:00:58.01,Default,,0000,0000,0000,,때문에 요소-클래스 선택자도 사용할 수 없네요
Dialogue: 0,0:00:58.01,0:01:00.66,Default,,0000,0000,0000,,이 둘을 구분하는 방법이 있을까요?
Dialogue: 0,0:01:00.66,0:01:06.38,Default,,0000,0000,0000,,하나는 이  안에 있고
Dialogue: 0,0:01:06.38,0:01:10.98,Default,,0000,0000,0000,,다른 하나는 이  안에 있네요
Dialogue: 0,0:01:10.98,0:01:12.58,Default,,0000,0000,0000,,즉, 부모 태그가 다르네요
Dialogue: 0,0:01:12.58,0:01:15.58,Default,,0000,0000,0000,,부모 태그는 위에 있는 태그를 의미합니다
Dialogue: 0,0:01:15.58,0:01:21.10,Default,,0000,0000,0000,,이걸 CSS 규칙을 만드는데 사용할 수 있어요\N하위위 선택자를 사용하면 되요
Dialogue: 0,0:01:21.10,0:01:25.22,Default,,0000,0000,0000,,요소들을 문서의 계층적인 위치에 따라 \N선택하는 방법입니다
Dialogue: 0,0:01:25.22,0:01:30.62,Default,,0000,0000,0000,,예를 들어 \N단락 안의 만 선택하려면
Dialogue: 0,0:01:30.62,0:01:35.78,Default,,0000,0000,0000,,p 를 쓰고 한칸 띄우세요\N한칸 띄우는게 진짜 중요합니다
Dialogue: 0,0:01:35.78,0:01:40.38,Default,,0000,0000,0000,,그리고 클래스 이름을 쓰는거죠\N.purple
Dialogue: 0,0:01:40.38,0:01:46.11,Default,,0000,0000,0000,,그리고 속성들을 적어주면 되요\N연한 색깔을 주고
Dialogue: 0,0:01:46.11,0:01:50.31,Default,,0000,0000,0000,,배경색상은 투명\N나머지는 이전에 선언한 것을 상속받겠죠
Dialogue: 0,0:01:50.31,0:01:58.80,Default,,0000,0000,0000,,이 보라색 글자에 영향을 주면서\N저 보라색 글자에는 영향을 미치지 않게 했어요
Dialogue: 0,0:01:58.80,0:02:02.88,Default,,0000,0000,0000,,단락 안에서 purple 클래스를 사용할 때마다
Dialogue: 0,0:02:02.88,0:02:05.32,Default,,0000,0000,0000,,이 스타일들이 적용될거에요
Dialogue: 0,0:02:05.32,0:02:09.59,Default,,0000,0000,0000,,문서 안에서 하위 요소를 선택 할 때 공백을 사용할 수 있어요
Dialogue: 0,0:02:09.59,0:02:15.73,Default,,0000,0000,0000,, 안의 에 스타일을 적용해봐요
Dialogue: 0,0:02:15.73,0:02:23.14,Default,,0000,0000,0000,,부모 태그인 li 를 쓰고, 공백을 쓰고, strong 을 씁니다
Dialogue: 0,0:02:23.14,0:02:28.07,Default,,0000,0000,0000,,줄 간격을 줘서 멀어지게 해볼게요
Dialogue: 0,0:02:28.07,0:02:34.07,Default,,0000,0000,0000,,li 앞에 ul 을 쓸 수 있는데요
Dialogue: 0,0:02:34.07,0:02:38.52,Default,,0000,0000,0000,,그러면  안의 에게는 적용되지 않겠죠
Dialogue: 0,0:02:38.52,0:02:43.81,Default,,0000,0000,0000,,하위 선택자를 사용하려면, 문서의 구조에 대해 깊이 생각해야 해요
Dialogue: 0,0:02:43.81,0:02:46.10,Default,,0000,0000,0000,,다른 태그들의 내부에 어떤 태그들이 있는지도 확인해야 되요
Dialogue: 0,0:02:46.10,0:02:49.51,Default,,0000,0000,0000,,들어쓰기를 잘 한다면, 손쉽게 할 수 있어요
Dialogue: 0,0:02:49.51,0:02:52.51,Default,,0000,0000,0000,,들여쓰기는 태그의 계층을 잘 반영하니까요
Dialogue: 0,0:02:52.51,0:02:56.96,Default,,0000,0000,0000,, 안의 는 들여쓰기가 되어 있네요
Dialogue: 0,0:02:56.96,0:02:59.34,Default,,0000,0000,0000,,그리고 그 안에 이 있네요
Dialogue: 0,0:02:59.34,0:03:02.93,Default,,0000,0000,0000,,들여쓰기가 잘 안되어 있다면, 지금 고치세요
Dialogue: 0,0:03:02.93,0:03:07.02,Default,,0000,0000,0000,,페이지의 구조를 더 쉽게 이해하고
Dialogue: 0,0:03:07.02,0:03:10.61,Default,,0000,0000,0000,,그 구조에 따라 CSS 선언자를 하용할 수 있게 말이에요
Dialogue: 0,0:03:10.61,0:03:13.60,Default,,0000,0000,0000,,선택자 사이에는 공백을 사용할 수 있어요
Dialogue: 0,0:03:13.60,0:03:19.02,Default,,0000,0000,0000,,특정 ID를 가진 요소 밑의 태그를 찾을 때
Dialogue: 0,0:03:19.02,0:03:22.46,Default,,0000,0000,0000,,또는 특정 클래스를 가진 요소 밑의 ID를 찾을 때
Dialogue: 0,0:03:22.46,0:03:25.33,Default,,0000,0000,0000,,어떤 선택자들의 조합을 사용하든지 간에 말이에요
Dialogue: 0,0:03:25.33,0:03:32.23,Default,,0000,0000,0000,,페이지의 구조가 바뀌면\N기존의 CSS 규칙은 적용되지 않을 수도 있어요
Dialogue: 0,0:03:32.23,0:03:37.18,Default,,0000,0000,0000,,그러니 주의깊게 생각하고 사용해야겠죠\N어떻게 하면 미래 지향적인 CSS를 만들지도 생각하세요
Dialogue: 0,0:03:37.18,0:03:41.30,Default,,0000,0000,0000,,문서 구조에 영향을 적게 받으려면\N클래스를 사용하면 됩니다
Dialogue: 0,0:03:41.30,0:03:45.61,Default,,0000,0000,0000,,이 규칙들을 다시 한번 살펴보고 생각해봅시다
Dialogue: 0,0:03:45.61,0:03:51.38,Default,,0000,0000,0000,,첫째 규칙은, 단락 안의 \Npurple 클래스의 요소를 꾸며줍니다
Dialogue: 0,0:03:51.38,0:03:57.59,Default,,0000,0000,0000,,나중에 새로운 단락 안에 purple 클래스의 요소가 추가된다면\N저 속성들이 적용될까요?
Dialogue: 0,0:03:57.59,0:04:02.37,Default,,0000,0000,0000,,네, 이 특징들은 단락 안에서 좋게 보일거에요
Dialogue: 0,0:04:02.37,0:04:04.40,Default,,0000,0000,0000,,더 특별한 규칙이 필요할까요?
Dialogue: 0,0:04:04.40,0:04:11.19,Default,,0000,0000,0000,,이러한 단락이\N항상 article 클래스의 요소 밑에 있다면\N이렇게 규칙을 추가할 수 있겠죠
Dialogue: 0,0:04:11.19,0:04:14.25,Default,,0000,0000,0000,,지금은 이게 가장 구체적인 규칙이에요
Dialogue: 0,0:04:14.25,0:04:21.18,Default,,0000,0000,0000,,두번째 규칙은 \Nlist 아이템 안에 있는 에 특정한 줄간격을 주는거에요
Dialogue: 0,0:04:21.18,0:04:26.04,Default,,0000,0000,0000,,제가 밑의 모든 에 대해\N줄간격을 늘리길 원하는 것 같나요?
Dialogue: 0,0:04:26.04,0:04:30.98,Default,,0000,0000,0000,,그러지는 않을 것 같습니다\N이 규칙은 너무 일반적이에요
Dialogue: 0,0:04:30.98,0:04:36.78,Default,,0000,0000,0000,,이 클래스를 에 추가해볼게요
Dialogue: 0,0:04:36.78,0:04:42.03,Default,,0000,0000,0000,,그리고 이렇게 바꾸는 거죠 ul.spacey
Dialogue: 0,0:04:42.03,0:04:44.65,Default,,0000,0000,0000,,이제 더 구체적으로 됬네요
Dialogue: 0,0:04:44.65,0:04:49.84,Default,,0000,0000,0000,,나중에, 웹 페이지가 커지면, 이 규칙들을 \N조금 더 / 조금 덜 구체적으로 만들거에요
Dialogue: 0,0:04:49.84,0:04:53.62,Default,,0000,0000,0000,,이 도구를 여러분의 CSS 툴박스에 두세요
Dialogue: 0,0:04:53.62,0:04:57.88,Default,,0000,0000,0000,,그리고 연습하네요. 이해가 될 때까지 말이죠