0:00:00.809,0:00:02.962
도넛과 당근을 살펴보죠

0:00:02.962,0:00:05.432
당근은 건강에 좋은 음식이고

0:00:05.432,0:00:07.901
토끼가 좋아하죠

0:00:07.901,0:00:10.534
오랜지 색이 아닌 당근을 알고 있나요?

0:00:10.534,0:00:13.535
원래 당근은 보라색이었어요[br]몇몇은 지금까지도 보라색이구요

0:00:13.535,0:00:19.541
이 웹페이지엔 당근의 색상 목록과[br]보라색 당근의 기원에 대한 설명이 있어요

0:00:19.541,0:00:25.267
클래스를 사용해서[br]색상 이름을 적절한 색으로 장식했어요

0:00:25.267,0:00:31.905
목록에 적용된 스타일은 마음에 드네요[br]본문에 적용된 스타일은 마음에 들지 않네요

0:00:31.905,0:00:36.215
지금의 배경 색상보다[br]좀 더 연한 색상으로 하면 좋겠어요

0:00:36.215,0:00:40.778
어떻게 하면 웹브라우저가 [br]목록의 보라색과

0:00:40.778,0:00:43.778
본문의 보라색을 구분하도록 할 수 할까요?

0:00:43.778,0:00:45.880
동일한 클래스 이름을 사용하고 있네요

0:00:45.880,0:00:49.300
때문에 다른 클래스를 선언하지 않는 한[br]이 클래스만 가지고는 구분할 수는 없어요

0:00:49.300,0:00:52.919
동일한 strong 태그를 사용하고 있네요

0:00:52.919,0:00:58.013
때문에 요소-클래스 선택자도 사용할 수 없네요

0:00:58.013,0:01:00.663
이 둘을 구분하는 방법이 있을까요?

0:01:00.663,0:01:06.376
하나는 이  안에 있고

0:01:06.376,0:01:10.985
다른 하나는 이  안에 있네요

0:01:10.985,0:01:12.583
즉, 부모 태그가 다르네요

0:01:12.583,0:01:15.583
부모 태그는 위에 있는 태그를 의미합니다

0:01:15.583,0:01:21.102
이걸 CSS 규칙을 만드는데 사용할 수 있어요[br]하위위 선택자를 사용하면 되요

0:01:21.102,0:01:25.216
요소들을 문서의 계층적인 위치에 따라 [br]선택하는 방법입니다

0:01:25.216,0:01:30.624
예를 들어 [br]단락 안의 만 선택하려면

0:01:30.624,0:01:35.776
p 를 쓰고 한칸 띄우세요[br]한칸 띄우는게 진짜 중요합니다

0:01:35.776,0:01:40.381
그리고 클래스 이름을 쓰는거죠[br].purple

0:01:40.381,0:01:46.112
그리고 속성들을 적어주면 되요[br]연한 색깔을 주고

0:01:46.112,0:01:50.311
배경색상은 투명[br]나머지는 이전에 선언한 것을 상속받겠죠

0:01:50.311,0:01:58.802
이 보라색 글자에 영향을 주면서[br]저 보라색 글자에는 영향을 미치지 않게 했어요

0:01:58.802,0:02:02.879
단락 안에서 purple 클래스를 사용할 때마다

0:02:02.879,0:02:05.324
이 스타일들이 적용될거에요

0:02:05.324,0:02:09.588
문서 안에서 하위 요소를 선택 할 때 공백을 사용할 수 있어요

0:02:09.588,0:02:15.728
안의 에 스타일을 적용해봐요

0:02:15.728,0:02:23.143
부모 태그인 li 를 쓰고, 공백을 쓰고, strong 을 씁니다

0:02:23.143,0:02:28.066
줄 간격을 줘서 멀어지게 해볼게요

0:02:28.066,0:02:34.073
li 앞에 ul 을 쓸 수 있는데요

0:02:34.073,0:02:38.525
그러면  안의 에게는 적용되지 않겠죠

0:02:38.525,0:02:43.807
하위 선택자를 사용하려면, 문서의 구조에 대해 깊이 생각해야 해요

0:02:43.807,0:02:46.102
다른 태그들의 내부에 어떤 태그들이 있는지도 확인해야 되요

0:02:46.102,0:02:49.512
들어쓰기를 잘 한다면, 손쉽게 할 수 있어요

0:02:49.512,0:02:52.508
들여쓰기는 태그의 계층을 잘 반영하니까요

0:02:52.508,0:02:56.955
안의 는 들여쓰기가 되어 있네요

0:02:56.955,0:02:59.341
그리고 그 안에 이 있네요

0:02:59.341,0:03:02.926
들여쓰기가 잘 안되어 있다면, 지금 고치세요

0:03:02.926,0:03:07.024
페이지의 구조를 더 쉽게 이해하고

0:03:07.024,0:03:10.609
그 구조에 따라 CSS 선언자를 하용할 수 있게 말이에요

0:03:10.609,0:03:13.598
선택자 사이에는 공백을 사용할 수 있어요

0:03:13.598,0:03:19.021
특정 ID를 가진 요소 밑의 태그를 찾을 때

0:03:19.021,0:03:22.463
또는 특정 클래스를 가진 요소 밑의 ID를 찾을 때

0:03:22.463,0:03:25.333
어떤 선택자들의 조합을 사용하든지 간에 말이에요

0:03:25.333,0:03:32.230
페이지의 구조가 바뀌면[br]기존의 CSS 규칙은 적용되지 않을 수도 있어요

0:03:32.230,0:03:37.185
그러니 주의깊게 생각하고 사용해야겠죠[br]어떻게 하면 미래 지향적인 CSS를 만들지도 생각하세요

0:03:37.185,0:03:41.300
문서 구조에 영향을 적게 받으려면[br]클래스를 사용하면 됩니다

0:03:41.300,0:03:45.612
이 규칙들을 다시 한번 살펴보고 생각해봅시다

0:03:45.612,0:03:51.383
첫째 규칙은, 단락 안의 [br]purple 클래스의 요소를 꾸며줍니다

0:03:51.383,0:03:57.589
나중에 새로운 단락 안에 purple 클래스의 요소가 추가된다면[br]저 속성들이 적용될까요?

0:03:57.589,0:04:02.371
네, 이 특징들은 단락 안에서 좋게 보일거에요

0:04:02.371,0:04:04.401
더 특별한 규칙이 필요할까요?

0:04:04.401,0:04:11.186
이러한 단락이[br]항상 article 클래스의 요소 밑에 있다면[br]이렇게 규칙을 추가할 수 있겠죠

0:04:11.186,0:04:14.249
지금은 이게 가장 구체적인 규칙이에요

0:04:14.249,0:04:21.178
두번째 규칙은 [br]list 아이템 안에 있는 에 특정한 줄간격을 주는거에요

0:04:21.178,0:04:26.039
제가 밑의 모든 에 대해[br]줄간격을 늘리길 원하는 것 같나요?

0:04:26.039,0:04:30.978
그러지는 않을 것 같습니다[br]이 규칙은 너무 일반적이에요

0:04:30.978,0:04:36.778
이 클래스를 에 추가해볼게요

0:04:36.778,0:04:42.032
그리고 이렇게 바꾸는 거죠 ul.spacey

0:04:42.032,0:04:44.652
이제 더 구체적으로 됬네요

0:04:44.652,0:04:49.840
나중에, 웹 페이지가 커지면, 이 규칙들을 [br]조금 더 / 조금 덜 구체적으로 만들거에요

0:04:49.840,0:04:53.619
이 도구를 여러분의 CSS 툴박스에 두세요

0:04:53.619,0:04:57.879
그리고 연습하네요. 이해가 될 때까지 말이죠