WEBVTT

00:00:00.809 --> 00:00:02.962
도넛과 당근을 살펴보죠

00:00:02.962 --> 00:00:05.432
당근은 건강에 좋은 음식이고

00:00:05.432 --> 00:00:07.901
토끼가 좋아하죠

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

00:00:10.534 --> 00:00:13.535
원래 당근은 보라색이었어요
몇몇은 지금까지도 보라색이구요

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

00:00:19.541 --> 00:00:25.267
클래스를 사용해서
색상 이름을 적절한 색으로 장식했어요

00:00:25.267 --> 00:00:31.905
목록에 적용된 스타일은 마음에 드네요
본문에 적용된 스타일은 마음에 들지 않네요

00:00:31.905 --> 00:00:36.215
지금의 배경 색상보다
좀 더 연한 색상으로 하면 좋겠어요

00:00:36.215 --> 00:00:40.778
어떻게 하면 웹브라우저가 
목록의 보라색과

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

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

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

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

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

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

00:01:00.663 --> 00:01:06.376
하나는 이  안에 있고

00:01:06.376 --> 00:01:10.985
다른 하나는 이  안에 있네요

00:01:10.985 --> 00:01:12.583
즉, 부모 태그가 다르네요

00:01:12.583 --> 00:01:15.583
부모 태그는 위에 있는 태그를 의미합니다

00:01:15.583 --> 00:01:21.102
이걸 CSS 규칙을 만드는데 사용할 수 있어요
하위위 선택자를 사용하면 되요

00:01:21.102 --> 00:01:25.216
요소들을 문서의 계층적인 위치에 따라 
선택하는 방법입니다

00:01:25.216 --> 00:01:30.624
예를 들어 
단락 안의 만 선택하려면

00:01:30.624 --> 00:01:35.776
p 를 쓰고 한칸 띄우세요
한칸 띄우는게 진짜 중요합니다

00:01:35.776 --> 00:01:40.381
그리고 클래스 이름을 쓰는거죠
.purple

00:01:40.381 --> 00:01:46.112
그리고 속성들을 적어주면 되요
연한 색깔을 주고

00:01:46.112 --> 00:01:50.311
배경색상은 투명
나머지는 이전에 선언한 것을 상속받겠죠

00:01:50.311 --> 00:01:58.802
이 보라색 글자에 영향을 주면서
저 보라색 글자에는 영향을 미치지 않게 했어요

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

00:02:02.879 --> 00:02:05.324
이 스타일들이 적용될거에요

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

00:02:09.588 --> 00:02:15.728
 안의 에 스타일을 적용해봐요

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

00:02:23.143 --> 00:02:28.066
줄 간격을 줘서 멀어지게 해볼게요

00:02:28.066 --> 00:02:34.073
li 앞에 ul 을 쓸 수 있는데요

00:02:34.073 --> 00:02:38.525
그러면  안의 에게는 적용되지 않겠죠

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

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

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

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

00:02:52.508 --> 00:02:56.955
 안의 는 들여쓰기가 되어 있네요

00:02:56.955 --> 00:02:59.341
그리고 그 안에 이 있네요

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

00:03:02.926 --> 00:03:07.024
페이지의 구조를 더 쉽게 이해하고

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

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

00:03:13.598 --> 00:03:19.021
특정 ID를 가진 요소 밑의 태그를 찾을 때

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

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

00:03:25.333 --> 00:03:32.230
페이지의 구조가 바뀌면
기존의 CSS 규칙은 적용되지 않을 수도 있어요

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

00:03:37.185 --> 00:03:41.300
문서 구조에 영향을 적게 받으려면
클래스를 사용하면 됩니다

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

00:03:45.612 --> 00:03:51.383
첫째 규칙은, 단락 안의 
purple 클래스의 요소를 꾸며줍니다

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

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

00:04:02.371 --> 00:04:04.401
더 특별한 규칙이 필요할까요?

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

00:04:11.186 --> 00:04:14.249
지금은 이게 가장 구체적인 규칙이에요

00:04:14.249 --> 00:04:21.178
두번째 규칙은 
list 아이템 안에 있는 에 특정한 줄간격을 주는거에요

00:04:21.178 --> 00:04:26.039
제가 밑의 모든 에 대해
줄간격을 늘리길 원하는 것 같나요?

00:04:26.039 --> 00:04:30.978
그러지는 않을 것 같습니다
이 규칙은 너무 일반적이에요

00:04:30.978 --> 00:04:36.778
이 클래스를 에 추가해볼게요

00:04:36.778 --> 00:04:42.032
그리고 이렇게 바꾸는 거죠 ul.spacey

00:04:42.032 --> 00:04:44.652
이제 더 구체적으로 됬네요

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

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

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