Combing CSS class and element selectors

자, 우리의 '도넛과 그것을 먹는 위험함'
웹페이지로 돌아 왔네요.

와 태그에 넣은 warning (경고) class가
정말 마음에 들군요.

하지만 저는 이 warning (경고) fact가 좀 더
눈에 띄게 만들고 싶어요.

이제 class 줄의 'fact'에 회색 경계가 생겼네요.

하지만 더 크고 두꺼운 주황색 경계선이 생기면 더 좋을 것 같아요.

그럼 이제 그 경계를 'warning' 줄에 넣어 봅시다.

따라서 border: 5px solid orange (경계선, 5px,
두꺼운, 주황색) 이라고 쓰면 되겠네요.

아, 맘에 들군요.
하지만 태그에도 이게 있네요.

저기에 저 글과 선이 있으니 보기가 좋지 않군요.

저는 주황색 경계가 warning (경고)박스에만
있으면 좋겠어요.

저렇게 선 안에 있는 경고 글에 말고요.

어떻게 좀 더 명확한 수업규칙을 만들 수 있을까요?

음, 하나의 방법은 경고 박스를 나타낼 아에 하나의 새로운class를 만드는 겁니다.

그리고 경계선 특징들을 거기로 옮기는 것이죠.
하지만 우리는 그렇게 할 필요가 없어요.

대신에, 브라우저가 경계선 특징들을 오직
경고 박스 태그에만 적용하도록 시키면 되요.

다른 태그들은 제외하고요.

그렇게 하기 위해서는, 우리는 우리가 찾고 있는
element (요소), 'p'를 먼저 적습니다.

그리고 나서 점을 찍어요.
그리고 class 이름인 'warning'을 적습니다.

이건 이제 브라우저에게 모든 class가 'warning' 인
를 찾도록 해서

아까의 그 특징들을 적용하도록 합니다.

자, 그럼 아까 그 경계특징을 여기로 복사해 봅시다.

그리고 짠! 말고 fact에만
그 경계를 적용시켰네요!

우리는 element와 class의 어떤 조합으로도
브라우저가 class를 가지고 있는 특정한 태그에만

스타일을 적용시키도록 할 때
언제든지 똑같이 할 수 있습니다.

이 순서를 그대로 따라할 것을 명심해 주세요.

(태그 이름), (점), 그리고 (class이름)

만약 실수로 태그이름과 점사이에 스페이스(공간)를
넣게 되면, 제대로 작동 되지 않을 겁니다.

왜냐하면 스페이스는 CSS에서 다른 것을 의미하기 때문입니다.

그리고 브라우저는 그 것을 다르게 해석하기 때문입니다.

그 의미있는 특별한 스페이스를 찾아
낼 수 있도록 주의하세요! :)