[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.34,0:00:03.90,Default,,0000,0000,0000,,자, 우리의 '도넛과 그것을 먹는 위험함' \N웹페이지로 돌아 왔네요.
Dialogue: 0,0:00:03.90,0:00:08.15,Default,,0000,0000,0000,,와  태그에 넣은 warning (경고) class가\N정말 마음에 들군요.
Dialogue: 0,0:00:08.15,0:00:12.67,Default,,0000,0000,0000,,하지만 저는 이 warning (경고) fact가 좀 더 \N눈에 띄게 만들고 싶어요.
Dialogue: 0,0:00:12.67,0:00:16.89,Default,,0000,0000,0000,,이제 class 줄의 'fact'에 회색 경계가 생겼네요.
Dialogue: 0,0:00:16.89,0:00:20.92,Default,,0000,0000,0000,,하지만 더 크고 두꺼운 주황색 경계선이 생기면 더 좋을 것 같아요.
Dialogue: 0,0:00:20.92,0:00:25.80,Default,,0000,0000,0000,,그럼 이제 그 경계를 'warning' 줄에 넣어 봅시다.
Dialogue: 0,0:00:25.80,0:00:29.58,Default,,0000,0000,0000,,따라서 border: 5px solid orange (경계선, 5px, \N두꺼운, 주황색) 이라고 쓰면 되겠네요.
Dialogue: 0,0:00:29.68,0:00:34.20,Default,,0000,0000,0000,,아, 맘에 들군요. \N하지만  태그에도 이게 있네요.
Dialogue: 0,0:00:34.22,0:00:37.32,Default,,0000,0000,0000,,저기에 저 글과 선이 있으니 보기가 좋지 않군요.
Dialogue: 0,0:00:37.32,0:00:39.98,Default,,0000,0000,0000,,저는 주황색 경계가 warning (경고)박스에만\N있으면 좋겠어요.
Dialogue: 0,0:00:39.98,0:00:43.74,Default,,0000,0000,0000,,저렇게 선 안에 있는 경고 글에 말고요.
Dialogue: 0,0:00:43.74,0:00:46.51,Default,,0000,0000,0000,,어떻게 좀 더 명확한 수업규칙을 만들 수 있을까요?
Dialogue: 0,0:00:46.51,0:00:50.53,Default,,0000,0000,0000,,음, 하나의 방법은 경고 박스를 나타낼 아에 하나의 새로운class를 만드는 겁니다.
Dialogue: 0,0:00:50.53,0:00:55.15,Default,,0000,0000,0000,,그리고 경계선 특징들을 거기로 옮기는 것이죠.\N하지만 우리는 그렇게 할 필요가 없어요.
Dialogue: 0,0:00:55.15,0:01:01.22,Default,,0000,0000,0000,,대신에, 브라우저가 경계선 특징들을 오직 \N경고 박스 태그에만 적용하도록 시키면 되요.
Dialogue: 0,0:01:01.22,0:01:04.58,Default,,0000,0000,0000,,다른 태그들은 제외하고요.
Dialogue: 0,0:01:04.58,0:01:09.12,Default,,0000,0000,0000,,그렇게 하기 위해서는, 우리는 우리가 찾고 있는 \Nelement (요소), 'p'를 먼저 적습니다.
Dialogue: 0,0:01:09.12,0:01:14.17,Default,,0000,0000,0000,,그리고 나서 점을 찍어요. \N그리고 class 이름인 'warning'을 적습니다.
Dialogue: 0,0:01:14.17,0:01:18.67,Default,,0000,0000,0000,,이건 이제 브라우저에게 모든 class가 'warning' 인\N를 찾도록 해서
Dialogue: 0,0:01:18.67,0:01:21.38,Default,,0000,0000,0000,,아까의 그 특징들을 적용하도록 합니다.
Dialogue: 0,0:01:21.38,0:01:26.45,Default,,0000,0000,0000,,자, 그럼 아까 그 경계특징을 여기로 복사해 봅시다.
Dialogue: 0,0:01:26.45,0:01:34.32,Default,,0000,0000,0000,,그리고 짠! 말고 fact에만 \N그 경계를 적용시켰네요!
Dialogue: 0,0:01:34.32,0:01:37.60,Default,,0000,0000,0000,,우리는 element와 class의 어떤 조합으로도\N브라우저가 class를 가지고 있는 특정한 태그에만
Dialogue: 0,0:01:37.60,0:01:42.60,Default,,0000,0000,0000,,스타일을 적용시키도록 할 때 \N언제든지 똑같이 할 수 있습니다.
Dialogue: 0,0:01:42.60,0:01:45.23,Default,,0000,0000,0000,,이 순서를 그대로 따라할 것을 명심해 주세요.
Dialogue: 0,0:01:45.23,0:01:50.71,Default,,0000,0000,0000,,(태그 이름), (점), 그리고 (class이름)
Dialogue: 0,0:01:50.71,0:01:56.45,Default,,0000,0000,0000,,만약 실수로 태그이름과 점사이에 스페이스(공간)를 \N넣게 되면, 제대로 작동 되지 않을 겁니다.
Dialogue: 0,0:01:56.45,0:01:59.94,Default,,0000,0000,0000,,왜냐하면 스페이스는 CSS에서 다른 것을 의미하기 때문입니다.
Dialogue: 0,0:01:59.94,0:02:02.80,Default,,0000,0000,0000,,그리고 브라우저는 그 것을 다르게 해석하기 때문입니다.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,그 의미있는 특별한 스페이스를 찾아 \N낼 수 있도록 주의하세요! :)