CSS descendant selectors

도넛과 당근을 살펴보죠

당근은 건강에 좋은 음식이고

토끼가 좋아하죠

오랜지 색이 아닌 당근을 알고 있나요?

원래 당근은 보라색이었어요
몇몇은 지금까지도 보라색이구요

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

클래스를 사용해서
색상 이름을 적절한 색으로 장식했어요

목록에 적용된 스타일은 마음에 드네요
본문에 적용된 스타일은 마음에 들지 않네요

지금의 배경 색상보다
좀 더 연한 색상으로 하면 좋겠어요

어떻게 하면 웹브라우저가
목록의 보라색과

본문의 보라색을 구분하도록 할 수 할까요?

동일한 클래스 이름을 사용하고 있네요

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

동일한 strong 태그를 사용하고 있네요

때문에 요소-클래스 선택자도 사용할 수 없네요

이 둘을 구분하는 방법이 있을까요?

하나는 이 안에 있고

다른 하나는 이 안에 있네요

즉, 부모 태그가 다르네요

부모 태그는 위에 있는 태그를 의미합니다

이걸 CSS 규칙을 만드는데 사용할 수 있어요
하위위 선택자를 사용하면 되요

요소들을 문서의 계층적인 위치에 따라
선택하는 방법입니다

예를 들어
단락 안의 만 선택하려면

p 를 쓰고 한칸 띄우세요
한칸 띄우는게 진짜 중요합니다

그리고 클래스 이름을 쓰는거죠
.purple

그리고 속성들을 적어주면 되요
연한 색깔을 주고

배경색상은 투명
나머지는 이전에 선언한 것을 상속받겠죠

이 보라색 글자에 영향을 주면서
저 보라색 글자에는 영향을 미치지 않게 했어요

단락 안에서 purple 클래스를 사용할 때마다

이 스타일들이 적용될거에요

문서 안에서 하위 요소를 선택 할 때 공백을 사용할 수 있어요

안의 에 스타일을 적용해봐요

부모 태그인 li 를 쓰고, 공백을 쓰고, strong 을 씁니다

줄 간격을 줘서 멀어지게 해볼게요

li 앞에 ul 을 쓸 수 있는데요

그러면 안의 에게는 적용되지 않겠죠

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

다른 태그들의 내부에 어떤 태그들이 있는지도 확인해야 되요

들어쓰기를 잘 한다면, 손쉽게 할 수 있어요

들여쓰기는 태그의 계층을 잘 반영하니까요

안의 는 들여쓰기가 되어 있네요

그리고 그 안에 이 있네요

들여쓰기가 잘 안되어 있다면, 지금 고치세요

페이지의 구조를 더 쉽게 이해하고

그 구조에 따라 CSS 선언자를 하용할 수 있게 말이에요

선택자 사이에는 공백을 사용할 수 있어요

특정 ID를 가진 요소 밑의 태그를 찾을 때

또는 특정 클래스를 가진 요소 밑의 ID를 찾을 때

어떤 선택자들의 조합을 사용하든지 간에 말이에요

페이지의 구조가 바뀌면
기존의 CSS 규칙은 적용되지 않을 수도 있어요

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

문서 구조에 영향을 적게 받으려면
클래스를 사용하면 됩니다

이 규칙들을 다시 한번 살펴보고 생각해봅시다

첫째 규칙은, 단락 안의
purple 클래스의 요소를 꾸며줍니다

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

네, 이 특징들은 단락 안에서 좋게 보일거에요

더 특별한 규칙이 필요할까요?

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

지금은 이게 가장 구체적인 규칙이에요

두번째 규칙은
list 아이템 안에 있는 에 특정한 줄간격을 주는거에요

제가 밑의 모든 에 대해
줄간격을 늘리길 원하는 것 같나요?

그러지는 않을 것 같습니다
이 규칙은 너무 일반적이에요

이 클래스를 에 추가해볼게요

그리고 이렇게 바꾸는 거죠 ul.spacey

이제 더 구체적으로 됬네요

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

이 도구를 여러분의 CSS 툴박스에 두세요

그리고 연습하네요. 이해가 될 때까지 말이죠