0:00:00.342,0:00:03.899
자, 우리의 '도넛과 그것을 먹는 위험함' [br]웹페이지로 돌아 왔네요.

0:00:03.899,0:00:08.150
와  태그에 넣은 warning (경고) class가[br]정말 마음에 들군요.

0:00:08.150,0:00:12.673
하지만 저는 이 warning (경고) fact가 좀 더 [br]눈에 띄게 만들고 싶어요.

0:00:12.673,0:00:16.889
이제 class 줄의 'fact'에 회색 경계가 생겼네요.

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

0:00:20.922,0:00:25.802
그럼 이제 그 경계를 'warning' 줄에 넣어 봅시다.

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

0:00:29.675,0:00:34.198
아, 맘에 들군요. [br]하지만  태그에도 이게 있네요.

0:00:34.219,0:00:37.319
저기에 저 글과 선이 있으니 보기가 좋지 않군요.

0:00:37.319,0:00:39.982
저는 주황색 경계가 warning (경고)박스에만[br]있으면 좋겠어요.

0:00:39.982,0:00:43.744
저렇게 선 안에 있는 경고 글에 말고요.

0:00:43.744,0:00:46.511
어떻게 좀 더 명확한 수업규칙을 만들 수 있을까요?

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

0:00:50.532,0:00:55.152
그리고 경계선 특징들을 거기로 옮기는 것이죠.[br]하지만 우리는 그렇게 할 필요가 없어요.

0:00:55.152,0:01:01.220
대신에, 브라우저가 경계선 특징들을 오직 [br]경고 박스 태그에만 적용하도록 시키면 되요.

0:01:01.220,0:01:04.576
다른 태그들은 제외하고요.

0:01:04.576,0:01:09.121
그렇게 하기 위해서는, 우리는 우리가 찾고 있는 [br]element (요소), 'p'를 먼저 적습니다.

0:01:09.121,0:01:14.170
그리고 나서 점을 찍어요. [br]그리고 class 이름인 'warning'을 적습니다.

0:01:14.170,0:01:18.673
이건 이제 브라우저에게 모든 class가 'warning' 인[br]를 찾도록 해서

0:01:18.673,0:01:21.385
아까의 그 특징들을 적용하도록 합니다.

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

0:01:26.453,0:01:34.321
그리고 짠! 말고 fact에만 [br]그 경계를 적용시켰네요!

0:01:34.321,0:01:37.595
우리는 element와 class의 어떤 조합으로도[br]브라우저가 class를 가지고 있는 특정한 태그에만

0:01:37.595,0:01:42.603
스타일을 적용시키도록 할 때 [br]언제든지 똑같이 할 수 있습니다.

0:01:42.603,0:01:45.233
이 순서를 그대로 따라할 것을 명심해 주세요.

0:01:45.233,0:01:50.707
(태그 이름), (점), 그리고 (class이름)

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

0:01:56.453,0:01:59.940
왜냐하면 스페이스는 CSS에서 다른 것을 의미하기 때문입니다.

0:01:59.940,0:02:02.795
그리고 브라우저는 그 것을 다르게 해석하기 때문입니다.

9:59:59.000,9:59:59.000
그 의미있는 특별한 스페이스를 찾아 [br]낼 수 있도록 주의하세요! :)