0:00:00.360,0:00:02.029
지금까지 여러분은

0:00:02.029,0:00:03.588
CSS를 이용해 텍스트에[br]스타일을 주는 법을 배웠고

0:00:04.088,0:00:05.904
또 CSS를 이용해서

0:00:05.904,0:00:07.500
페이지의 레이아웃을[br]변경하는 것을 배웠어요

0:00:07.620,0:00:09.148
즉 위치를 바꿀 수도 있고

0:00:09.157,0:00:10.187
크기를 바꿀 수도 있고

0:00:10.187,0:00:11.777
서로 겹치게 할 수도 있죠

0:00:12.010,0:00:14.331
하지만 우리가 움직이고 싶은 것들은[br]과연 무엇일까요?

0:00:14.498,0:00:16.118
가끔 그건[br]요소에요

0:00:16.118,0:00:17.339
우리가 이미 만들어둔 것들요

0:00:17.339,0:00:18.812
특정 문단이나

0:00:18.812,0:00:20.672
특정 헤딩같은 것들이죠

0:00:21.231,0:00:22.365
하지만 종종[br]그것들은

0:00:22.445,0:00:24.679
우리가 만들어 둔[br]요소의 집합일거에요

0:00:24.679,0:00:26.889
텍스트 묶음이나

0:00:27.055,0:00:30.065
헤딩과 몇 개의 문단들[br]같은 것들요

0:00:31.693,0:00:32.946
이것들을[br]움직이기 위해서는

0:00:32.946,0:00:34.365
한 묶음으로[br]같이 말이죠

0:00:34.365,0:00:36.785
두 개의 새로운 HTML 태그를[br]소개해야겠네요

0:00:36.805,0:00:39.225
우리는 요소들의[br]그룹화라고 불러요

0:00:39.246,0:00:41.460
CSS를 배우기 전에는 [br]얘기하지 않았어요

0:00:41.460,0:00:42.662
왜냐하면 이것들은 단지

0:00:42.662,0:00:44.210
CSS와 결합되었을 때만[br]유용하기 때문이에요

0:00:44.210,0:00:46.555
이것은 브라우저에게는[br]어떤 의미를 주진 않아요

0:00:47.275,0:00:49.176
첫번째 태그는[br]이에요

0:00:49.596,0:00:51.516
이 태그는 텍스트의[br]그룹화에 사용해요

0:00:53.244,0:00:54.193
예를 들어 [br]색상을 적용하고 싶은데

0:00:54.193,0:00:56.503
"Love Red"라는 단어에[br]적용한다고 해볼게요

0:00:57.055,0:00:58.692
우리는 단어에만[br]색상을 주고 싶어요

0:00:58.692,0:00:59.952
나머지 헤딩은 말고요

0:01:00.327,0:01:02.458
여기 "Love"앞에[br]커서를 두고

0:01:02.458,0:01:06.138
시작 태그로[br]을 쓰세요

0:01:06.499,0:01:10.519
그리고 태그를 닫고요[br]좋아요

0:01:10.678,0:01:11.644
이제 스타일을[br]적용할 거에요

0:01:11.644,0:01:12.809
이 사이의[br]문자에 말이죠

0:01:13.008,0:01:15.353
우리는 페이지의 모든 에[br]색상을 적용할 수도 있어요

0:01:15.780,0:01:18.558
하지만 모든 걸 빨갛게[br]하고 싶지 않을 수도 있죠

0:01:18.558,0:01:19.980
이 에게

0:01:20.107,0:01:21.980
"lovey-dovey"라는 클래스를[br]주도록 하죠

0:01:25.086,0:01:29.053
그리고 이 요소에게만[br]적용하는 규칙을 추가해요

0:01:29.053,0:01:30.370
"lovey-dovey"라는 클래스를[br]가지는 요소들에게만요

0:01:30.388,0:01:33.755
그러면 lovey-dovey에게[br]color: red라고 하죠

0:01:34.613,0:01:36.703
저 텍스트가 이제 얼마나[br]달콤해졌는지 보세요!

0:01:38.093,0:01:40.557
은 텍스트의 그룹화를[br]하는데 유용해요

0:01:40.557,0:01:43.007
그렇다면 여러 요소들의 그룹화는[br]어떻게 하면 될까요?

0:01:43.507,0:01:45.247
여기서 태그가[br]등장해요

0:01:45.680,0:01:47.677
이 페이지 하단 부분을[br]그룹화하고 싶다고 해봐요

0:01:48.195,0:01:49.464
공식 정보 헤더와

0:01:49.464,0:01:51.174
문단과 그 아래에[br]있는 그림까지요

0:01:51.743,0:01:52.714
이걸 하기 위해서

0:01:52.714,0:01:58.129
태그 앞에 커서를 두고

0:01:58.129,0:01:59.389
태그를 열게요

0:01:59.859,0:02:02.259
그리고 마지막[br]문단으로 내려가서

0:02:02.690,0:02:04.620
태그를 닫아요

0:02:05.467,0:02:07.847
이제 가 생겼으니[br]스타일을 줘야겠죠

0:02:08.510,0:02:09.568
에 스타일을[br]적용하려면

0:02:09.568,0:02:11.426
id를 줄거에요

0:02:11.426,0:02:13.516
"official-info"[br]라고 할게요

0:02:15.117,0:02:16.417
그리고 이 id에 대한[br]규칙을 추가해요

0:02:16.422,0:02:21.102
그럼 #official-info[br]그리고 background:

0:02:22.275,0:02:23.715
멋진 회색으로 해보죠

0:02:23.884,0:02:26.934
이렇게 하고[br]좋아요

0:02:27.133,0:02:28.646
이제 를 보면

0:02:28.646,0:02:30.841
모든 요소를 속에 포함하는[br]회색 상자가 되었어요

0:02:31.772,0:02:34.267
만약 각각 하나씩

0:02:34.267,0:02:35.947
회색 배경을 주는 것과는[br]다를거에요

0:02:35.998,0:02:38.228
만약 그렇게 했다면[br]사이에 공백이 있어서

0:02:38.228,0:02:39.308
이렇게 전체가 회색은[br]아닐 거에요

0:02:39.520,0:02:41.120
우리는 를[br]이렇게 사용해요

0:02:41.129,0:02:42.909
모든 요소들 주위에[br]박스를 만들고 싶을 때죠

0:02:44.708,0:02:46.185
을 사용할 때는

0:02:46.185,0:02:47.735
텍스트를 그룹화[br]할 때에요

0:02:48.303,0:02:50.759
를 사용할 때는

0:02:50.759,0:02:52.269
요소들을 그룹화[br]할 때에요

0:02:52.478,0:02:54.718
하지만 두 개를 구별할[br]다른 방법이 있어요

0:02:55.451,0:02:58.224
CSS세계에서는 두 가지[br]종류의 요소가 있어요

0:02:58.412,0:03:00.232
줄(inline)과[br]구역(block)이죠

0:03:00.499,0:03:03.409
줄 요소는 요소 다음에[br]새로운 줄이 없어요

0:03:03.570,0:03:06.726
여러 개의 줄 요소가 있다면[br]같은 줄에 위치할 거에요

0:03:06.726,0:03:08.751
우리가 얘기했던 것들 중에는

0:03:08.751,0:03:11.651
a와 image태그가 있죠

0:03:11.832,0:03:13.432
이 이미지를 보면

0:03:13.451,0:03:16.431
텍스트가 바로 따라오는 것을[br]볼 수 있어요

0:03:16.616,0:03:18.326
뒤에 새로운 줄이[br]없기 때문이죠

0:03:18.657,0:03:21.887
구역 요소는 뒤에[br]새로운 줄이 있어요

0:03:21.912,0:03:24.602
거의 모든 HTML태그들이[br]새로운 줄을 생성하죠

0:03:24.818,0:03:26.978
이 페이지의 예시를 보세요

0:03:27.041,0:03:30.281
헤딩, 문단, 리스트

0:03:30.799,0:03:33.699
브라우저는 매번[br]새로운 줄을 추가해요

0:03:33.732,0:03:36.152
여러분이 [br]태그를[br]쓸 필요가 없게 말이죠

0:03:37.027,0:03:39.379
근데 이게 과 에[br]무슨 상관이죠?

0:03:39.835,0:03:43.203
은 줄 요소를 만들고

0:03:43.203,0:03:47.123
는 구역 요소를 만들어요

0:03:47.252,0:03:49.492
즉 여러분이[br]를 추가하고

0:03:49.492,0:03:53.432
다른 스타일을[br]적용하지 않는다면

0:03:53.940,0:03:57.560
브라우저는 그 페이지 부분을[br]구역화할 거에요

0:03:58.145,0:04:00.534
방금 안에 여러 텍스트가[br]포함되었던 것 처럼요

0:04:00.534,0:04:02.984
이제 새로운 줄이[br]앞뒤로 추가되었어요

0:04:02.998,0:04:05.495
어쩌면 이게 여러분들이[br]원하는 걸지도 몰라요

0:04:05.495,0:04:07.525
그냥 이 차이점을[br]새겨두기로 해요

0:04:07.553,0:04:08.395
그리고 계속해봐요

0:04:08.395,0:04:10.885
이 태그로 할 수 있는게[br]아주 많으니까요

0:04:10.885,0:04:12.631
특히 이 강력한[br]로 말이죠