[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.36,0:00:02.03,Default,,0000,0000,0000,,지금까지 여러분은
Dialogue: 0,0:00:02.03,0:00:03.59,Default,,0000,0000,0000,,CSS를 이용해 텍스트에\N스타일을 주는 법을 배웠고
Dialogue: 0,0:00:04.09,0:00:05.90,Default,,0000,0000,0000,,또 CSS를 이용해서
Dialogue: 0,0:00:05.90,0:00:07.50,Default,,0000,0000,0000,,페이지의 레이아웃을\N변경하는 것을 배웠어요
Dialogue: 0,0:00:07.62,0:00:09.15,Default,,0000,0000,0000,,즉 위치를 바꿀 수도 있고
Dialogue: 0,0:00:09.16,0:00:10.19,Default,,0000,0000,0000,,크기를 바꿀 수도 있고
Dialogue: 0,0:00:10.19,0:00:11.78,Default,,0000,0000,0000,,서로 겹치게 할 수도 있죠
Dialogue: 0,0:00:12.01,0:00:14.33,Default,,0000,0000,0000,,하지만 우리가 움직이고 싶은 것들은\N과연 무엇일까요?
Dialogue: 0,0:00:14.50,0:00:16.12,Default,,0000,0000,0000,,가끔 그건\N요소에요
Dialogue: 0,0:00:16.12,0:00:17.34,Default,,0000,0000,0000,,우리가 이미 만들어둔 것들요
Dialogue: 0,0:00:17.34,0:00:18.81,Default,,0000,0000,0000,,특정 문단이나
Dialogue: 0,0:00:18.81,0:00:20.67,Default,,0000,0000,0000,,특정 헤딩같은 것들이죠
Dialogue: 0,0:00:21.23,0:00:22.36,Default,,0000,0000,0000,,하지만 종종\N그것들은
Dialogue: 0,0:00:22.44,0:00:24.68,Default,,0000,0000,0000,,우리가 만들어 둔\N요소의 집합일거에요
Dialogue: 0,0:00:24.68,0:00:26.89,Default,,0000,0000,0000,,텍스트 묶음이나
Dialogue: 0,0:00:27.06,0:00:30.06,Default,,0000,0000,0000,,헤딩과 몇 개의 문단들\N같은 것들요
Dialogue: 0,0:00:31.69,0:00:32.95,Default,,0000,0000,0000,,이것들을\N움직이기 위해서는
Dialogue: 0,0:00:32.95,0:00:34.36,Default,,0000,0000,0000,,한 묶음으로\N같이 말이죠
Dialogue: 0,0:00:34.36,0:00:36.78,Default,,0000,0000,0000,,두 개의 새로운 HTML 태그를\N소개해야겠네요
Dialogue: 0,0:00:36.80,0:00:39.22,Default,,0000,0000,0000,,우리는 요소들의\N그룹화라고 불러요
Dialogue: 0,0:00:39.25,0:00:41.46,Default,,0000,0000,0000,,CSS를 배우기 전에는 \N얘기하지 않았어요
Dialogue: 0,0:00:41.46,0:00:42.66,Default,,0000,0000,0000,,왜냐하면 이것들은 단지
Dialogue: 0,0:00:42.66,0:00:44.21,Default,,0000,0000,0000,,CSS와 결합되었을 때만\N유용하기 때문이에요
Dialogue: 0,0:00:44.21,0:00:46.56,Default,,0000,0000,0000,,이것은 브라우저에게는\N어떤 의미를 주진 않아요
Dialogue: 0,0:00:47.28,0:00:49.18,Default,,0000,0000,0000,,첫번째 태그는\N이에요
Dialogue: 0,0:00:49.60,0:00:51.52,Default,,0000,0000,0000,,이 태그는 텍스트의\N그룹화에 사용해요
Dialogue: 0,0:00:53.24,0:00:54.19,Default,,0000,0000,0000,,예를 들어 \N색상을 적용하고 싶은데
Dialogue: 0,0:00:54.19,0:00:56.50,Default,,0000,0000,0000,,"Love Red"라는 단어에\N적용한다고 해볼게요
Dialogue: 0,0:00:57.06,0:00:58.69,Default,,0000,0000,0000,,우리는 단어에만\N색상을 주고 싶어요
Dialogue: 0,0:00:58.69,0:00:59.95,Default,,0000,0000,0000,,나머지 헤딩은 말고요
Dialogue: 0,0:01:00.33,0:01:02.46,Default,,0000,0000,0000,,여기 "Love"앞에\N커서를 두고
Dialogue: 0,0:01:02.46,0:01:06.14,Default,,0000,0000,0000,,시작 태그로\N을 쓰세요
Dialogue: 0,0:01:06.50,0:01:10.52,Default,,0000,0000,0000,,그리고 태그를 닫고요\N좋아요
Dialogue: 0,0:01:10.68,0:01:11.64,Default,,0000,0000,0000,,이제 스타일을\N적용할 거에요
Dialogue: 0,0:01:11.64,0:01:12.81,Default,,0000,0000,0000,,이 사이의\N문자에 말이죠
Dialogue: 0,0:01:13.01,0:01:15.35,Default,,0000,0000,0000,,우리는 페이지의 모든 에\N색상을 적용할 수도 있어요
Dialogue: 0,0:01:15.78,0:01:18.56,Default,,0000,0000,0000,,하지만 모든 걸 빨갛게\N하고 싶지 않을 수도 있죠
Dialogue: 0,0:01:18.56,0:01:19.98,Default,,0000,0000,0000,,이 에게
Dialogue: 0,0:01:20.11,0:01:21.98,Default,,0000,0000,0000,,"lovey-dovey"라는 클래스를\N주도록 하죠
Dialogue: 0,0:01:25.09,0:01:29.05,Default,,0000,0000,0000,,그리고 이 요소에게만\N적용하는 규칙을 추가해요
Dialogue: 0,0:01:29.05,0:01:30.37,Default,,0000,0000,0000,,"lovey-dovey"라는 클래스를\N가지는 요소들에게만요
Dialogue: 0,0:01:30.39,0:01:33.76,Default,,0000,0000,0000,,그러면 lovey-dovey에게\Ncolor: red라고 하죠
Dialogue: 0,0:01:34.61,0:01:36.70,Default,,0000,0000,0000,,저 텍스트가 이제 얼마나\N달콤해졌는지 보세요!
Dialogue: 0,0:01:38.09,0:01:40.56,Default,,0000,0000,0000,,은 텍스트의 그룹화를\N하는데 유용해요
Dialogue: 0,0:01:40.56,0:01:43.01,Default,,0000,0000,0000,,그렇다면 여러 요소들의 그룹화는\N어떻게 하면 될까요?
Dialogue: 0,0:01:43.51,0:01:45.25,Default,,0000,0000,0000,,여기서 태그가\N등장해요
Dialogue: 0,0:01:45.68,0:01:47.68,Default,,0000,0000,0000,,이 페이지 하단 부분을\N그룹화하고 싶다고 해봐요
Dialogue: 0,0:01:48.20,0:01:49.46,Default,,0000,0000,0000,,공식 정보 헤더와
Dialogue: 0,0:01:49.46,0:01:51.17,Default,,0000,0000,0000,,문단과 그 아래에\N있는 그림까지요
Dialogue: 0,0:01:51.74,0:01:52.71,Default,,0000,0000,0000,,이걸 하기 위해서
Dialogue: 0,0:01:52.71,0:01:58.13,Default,,0000,0000,0000,,태그 앞에 커서를 두고
Dialogue: 0,0:01:58.13,0:01:59.39,Default,,0000,0000,0000,,태그를 열게요
Dialogue: 0,0:01:59.86,0:02:02.26,Default,,0000,0000,0000,,그리고 마지막\N문단으로 내려가서
Dialogue: 0,0:02:02.69,0:02:04.62,Default,,0000,0000,0000,,태그를 닫아요
Dialogue: 0,0:02:05.47,0:02:07.85,Default,,0000,0000,0000,,이제 가 생겼으니\N스타일을 줘야겠죠
Dialogue: 0,0:02:08.51,0:02:09.57,Default,,0000,0000,0000,,에 스타일을\N적용하려면
Dialogue: 0,0:02:09.57,0:02:11.43,Default,,0000,0000,0000,,id를 줄거에요
Dialogue: 0,0:02:11.43,0:02:13.52,Default,,0000,0000,0000,,"official-info"\N라고 할게요
Dialogue: 0,0:02:15.12,0:02:16.42,Default,,0000,0000,0000,,그리고 이 id에 대한\N규칙을 추가해요
Dialogue: 0,0:02:16.42,0:02:21.10,Default,,0000,0000,0000,,그럼 #official-info\N그리고 background:
Dialogue: 0,0:02:22.28,0:02:23.72,Default,,0000,0000,0000,,멋진 회색으로 해보죠
Dialogue: 0,0:02:23.88,0:02:26.93,Default,,0000,0000,0000,,이렇게 하고\N좋아요
Dialogue: 0,0:02:27.13,0:02:28.65,Default,,0000,0000,0000,,이제 를 보면
Dialogue: 0,0:02:28.65,0:02:30.84,Default,,0000,0000,0000,,모든 요소를 속에 포함하는\N회색 상자가 되었어요
Dialogue: 0,0:02:31.77,0:02:34.27,Default,,0000,0000,0000,,만약 각각 하나씩
Dialogue: 0,0:02:34.27,0:02:35.95,Default,,0000,0000,0000,,회색 배경을 주는 것과는\N다를거에요
Dialogue: 0,0:02:35.100,0:02:38.23,Default,,0000,0000,0000,,만약 그렇게 했다면\N사이에 공백이 있어서
Dialogue: 0,0:02:38.23,0:02:39.31,Default,,0000,0000,0000,,이렇게 전체가 회색은\N아닐 거에요
Dialogue: 0,0:02:39.52,0:02:41.12,Default,,0000,0000,0000,,우리는 를\N이렇게 사용해요
Dialogue: 0,0:02:41.13,0:02:42.91,Default,,0000,0000,0000,,모든 요소들 주위에\N박스를 만들고 싶을 때죠
Dialogue: 0,0:02:44.71,0:02:46.18,Default,,0000,0000,0000,,을 사용할 때는
Dialogue: 0,0:02:46.18,0:02:47.74,Default,,0000,0000,0000,,텍스트를 그룹화\N할 때에요
Dialogue: 0,0:02:48.30,0:02:50.76,Default,,0000,0000,0000,,를 사용할 때는
Dialogue: 0,0:02:50.76,0:02:52.27,Default,,0000,0000,0000,,요소들을 그룹화\N할 때에요
Dialogue: 0,0:02:52.48,0:02:54.72,Default,,0000,0000,0000,,하지만 두 개를 구별할\N다른 방법이 있어요
Dialogue: 0,0:02:55.45,0:02:58.22,Default,,0000,0000,0000,,CSS세계에서는 두 가지\N종류의 요소가 있어요
Dialogue: 0,0:02:58.41,0:03:00.23,Default,,0000,0000,0000,,줄(inline)과\N구역(block)이죠
Dialogue: 0,0:03:00.50,0:03:03.41,Default,,0000,0000,0000,,줄 요소는 요소 다음에\N새로운 줄이 없어요
Dialogue: 0,0:03:03.57,0:03:06.73,Default,,0000,0000,0000,,여러 개의 줄 요소가 있다면\N같은 줄에 위치할 거에요
Dialogue: 0,0:03:06.73,0:03:08.75,Default,,0000,0000,0000,,우리가 얘기했던 것들 중에는
Dialogue: 0,0:03:08.75,0:03:11.65,Default,,0000,0000,0000,,a와 image태그가 있죠
Dialogue: 0,0:03:11.83,0:03:13.43,Default,,0000,0000,0000,,이 이미지를 보면
Dialogue: 0,0:03:13.45,0:03:16.43,Default,,0000,0000,0000,,텍스트가 바로 따라오는 것을\N볼 수 있어요
Dialogue: 0,0:03:16.62,0:03:18.33,Default,,0000,0000,0000,,뒤에 새로운 줄이\N없기 때문이죠
Dialogue: 0,0:03:18.66,0:03:21.89,Default,,0000,0000,0000,,구역 요소는 뒤에\N새로운 줄이 있어요
Dialogue: 0,0:03:21.91,0:03:24.60,Default,,0000,0000,0000,,거의 모든 HTML태그들이\N새로운 줄을 생성하죠
Dialogue: 0,0:03:24.82,0:03:26.98,Default,,0000,0000,0000,,이 페이지의 예시를 보세요
Dialogue: 0,0:03:27.04,0:03:30.28,Default,,0000,0000,0000,,헤딩, 문단, 리스트
Dialogue: 0,0:03:30.80,0:03:33.70,Default,,0000,0000,0000,,브라우저는 매번\N새로운 줄을 추가해요
Dialogue: 0,0:03:33.73,0:03:36.15,Default,,0000,0000,0000,,여러분이 \N태그를\N쓸 필요가 없게 말이죠
Dialogue: 0,0:03:37.03,0:03:39.38,Default,,0000,0000,0000,,근데 이게 과 에\N무슨 상관이죠?
Dialogue: 0,0:03:39.84,0:03:43.20,Default,,0000,0000,0000,,은 줄 요소를 만들고
Dialogue: 0,0:03:43.20,0:03:47.12,Default,,0000,0000,0000,,는 구역 요소를 만들어요
Dialogue: 0,0:03:47.25,0:03:49.49,Default,,0000,0000,0000,,즉 여러분이\N를 추가하고
Dialogue: 0,0:03:49.49,0:03:53.43,Default,,0000,0000,0000,,다른 스타일을\N적용하지 않는다면
Dialogue: 0,0:03:53.94,0:03:57.56,Default,,0000,0000,0000,,브라우저는 그 페이지 부분을\N구역화할 거에요
Dialogue: 0,0:03:58.14,0:04:00.53,Default,,0000,0000,0000,,방금 안에 여러 텍스트가\N포함되었던 것 처럼요
Dialogue: 0,0:04:00.53,0:04:02.98,Default,,0000,0000,0000,,이제 새로운 줄이\N앞뒤로 추가되었어요
Dialogue: 0,0:04:02.100,0:04:05.50,Default,,0000,0000,0000,,어쩌면 이게 여러분들이\N원하는 걸지도 몰라요
Dialogue: 0,0:04:05.50,0:04:07.52,Default,,0000,0000,0000,,그냥 이 차이점을\N새겨두기로 해요
Dialogue: 0,0:04:07.55,0:04:08.40,Default,,0000,0000,0000,,그리고 계속해봐요
Dialogue: 0,0:04:08.40,0:04:10.88,Default,,0000,0000,0000,,이 태그로 할 수 있는게\N아주 많으니까요
Dialogue: 0,0:04:10.88,0:04:12.63,Default,,0000,0000,0000,,특히 이 강력한\N로 말이죠