WEBVTT 00:00:00.342 --> 00:00:03.899 자, 우리의 '도넛과 그것을 먹는 위험함' 웹페이지로 돌아 왔네요. 00:00:03.899 --> 00:00:08.150 와 태그에 넣은 warning (경고) class가 정말 마음에 들군요. 00:00:08.150 --> 00:00:12.673 하지만 저는 이 warning (경고) fact가 좀 더 눈에 띄게 만들고 싶어요. 00:00:12.673 --> 00:00:16.889 이제 class 줄의 'fact'에 회색 경계가 생겼네요. 00:00:16.889 --> 00:00:20.922 하지만 더 크고 두꺼운 주황색 경계선이 생기면 더 좋을 것 같아요. 00:00:20.922 --> 00:00:25.802 그럼 이제 그 경계를 'warning' 줄에 넣어 봅시다. 00:00:25.802 --> 00:00:29.581 따라서 border: 5px solid orange (경계선, 5px, 두꺼운, 주황색) 이라고 쓰면 되겠네요. 00:00:29.675 --> 00:00:34.198 아, 맘에 들군요. 하지만 태그에도 이게 있네요. 00:00:34.219 --> 00:00:37.319 저기에 저 글과 선이 있으니 보기가 좋지 않군요. 00:00:37.319 --> 00:00:39.982 저는 주황색 경계가 warning (경고)박스에만 있으면 좋겠어요. 00:00:39.982 --> 00:00:43.744 저렇게 선 안에 있는 경고 글에 말고요. 00:00:43.744 --> 00:00:46.511 어떻게 좀 더 명확한 수업규칙을 만들 수 있을까요? 00:00:46.511 --> 00:00:50.532 음, 하나의 방법은 경고 박스를 나타낼 아에 하나의 새로운class를 만드는 겁니다. 00:00:50.532 --> 00:00:55.152 그리고 경계선 특징들을 거기로 옮기는 것이죠. 하지만 우리는 그렇게 할 필요가 없어요. 00:00:55.152 --> 00:01:01.220 대신에, 브라우저가 경계선 특징들을 오직 경고 박스 태그에만 적용하도록 시키면 되요. 00:01:01.220 --> 00:01:04.576 다른 태그들은 제외하고요. 00:01:04.576 --> 00:01:09.121 그렇게 하기 위해서는, 우리는 우리가 찾고 있는 element (요소), 'p'를 먼저 적습니다. 00:01:09.121 --> 00:01:14.170 그리고 나서 점을 찍어요. 그리고 class 이름인 'warning'을 적습니다. 00:01:14.170 --> 00:01:18.673 이건 이제 브라우저에게 모든 class가 'warning' 인 를 찾도록 해서 00:01:18.673 --> 00:01:21.385 아까의 그 특징들을 적용하도록 합니다. 00:01:21.385 --> 00:01:26.453 자, 그럼 아까 그 경계특징을 여기로 복사해 봅시다. 00:01:26.453 --> 00:01:34.321 그리고 짠! 말고 fact에만 그 경계를 적용시켰네요! 00:01:34.321 --> 00:01:37.595 우리는 element와 class의 어떤 조합으로도 브라우저가 class를 가지고 있는 특정한 태그에만 00:01:37.595 --> 00:01:42.603 스타일을 적용시키도록 할 때 언제든지 똑같이 할 수 있습니다. 00:01:42.603 --> 00:01:45.233 이 순서를 그대로 따라할 것을 명심해 주세요. 00:01:45.233 --> 00:01:50.707 (태그 이름), (점), 그리고 (class이름) 00:01:50.707 --> 00:01:56.453 만약 실수로 태그이름과 점사이에 스페이스(공간)를 넣게 되면, 제대로 작동 되지 않을 겁니다. 00:01:56.453 --> 00:01:59.940 왜냐하면 스페이스는 CSS에서 다른 것을 의미하기 때문입니다. 00:01:59.940 --> 00:02:02.795 그리고 브라우저는 그 것을 다르게 해석하기 때문입니다. 99:59:59.999 --> 99:59:59.999 그 의미있는 특별한 스페이스를 찾아 낼 수 있도록 주의하세요! :)