WEBVTT

00:00:00.360 --> 00:00:02.029
지금까지 여러분은

00:00:02.029 --> 00:00:03.588
CSS를 이용해 텍스트에
스타일을 주는 법을 배웠고

00:00:04.088 --> 00:00:05.904
또 CSS를 이용해서

00:00:05.904 --> 00:00:07.500
페이지의 레이아웃을
변경하는 것을 배웠어요

00:00:07.620 --> 00:00:09.148
즉 위치를 바꿀 수도 있고

00:00:09.157 --> 00:00:10.187
크기를 바꿀 수도 있고

00:00:10.187 --> 00:00:11.777
서로 겹치게 할 수도 있죠

00:00:12.010 --> 00:00:14.331
하지만 우리가 움직이고 싶은 것들은
과연 무엇일까요?

00:00:14.498 --> 00:00:16.118
가끔 그건
요소에요

00:00:16.118 --> 00:00:17.339
우리가 이미 만들어둔 것들요

00:00:17.339 --> 00:00:18.812
특정 문단이나

00:00:18.812 --> 00:00:20.672
특정 헤딩같은 것들이죠

00:00:21.231 --> 00:00:22.365
하지만 종종
그것들은

00:00:22.445 --> 00:00:24.679
우리가 만들어 둔
요소의 집합일거에요

00:00:24.679 --> 00:00:26.889
텍스트 묶음이나

00:00:27.055 --> 00:00:30.065
헤딩과 몇 개의 문단들
같은 것들요

00:00:31.693 --> 00:00:32.946
이것들을
움직이기 위해서는

00:00:32.946 --> 00:00:34.365
한 묶음으로
같이 말이죠

00:00:34.365 --> 00:00:36.785
두 개의 새로운 HTML 태그를
소개해야겠네요

00:00:36.805 --> 00:00:39.225
우리는 요소들의
그룹화라고 불러요

00:00:39.246 --> 00:00:41.460
CSS를 배우기 전에는 
얘기하지 않았어요

00:00:41.460 --> 00:00:42.662
왜냐하면 이것들은 단지

00:00:42.662 --> 00:00:44.210
CSS와 결합되었을 때만
유용하기 때문이에요

00:00:44.210 --> 00:00:46.555
이것은 브라우저에게는
어떤 의미를 주진 않아요

00:00:47.275 --> 00:00:49.176
첫번째 태그는
이에요

00:00:49.596 --> 00:00:51.516
이 태그는 텍스트의
그룹화에 사용해요

00:00:53.244 --> 00:00:54.193
예를 들어 
색상을 적용하고 싶은데

00:00:54.193 --> 00:00:56.503
"Love Red"라는 단어에
적용한다고 해볼게요

00:00:57.055 --> 00:00:58.692
우리는 단어에만
색상을 주고 싶어요

00:00:58.692 --> 00:00:59.952
나머지 헤딩은 말고요

00:01:00.327 --> 00:01:02.458
여기 "Love"앞에
커서를 두고

00:01:02.458 --> 00:01:06.138
시작 태그로
을 쓰세요

00:01:06.499 --> 00:01:10.519
그리고 태그를 닫고요
좋아요

00:01:10.678 --> 00:01:11.644
이제 스타일을
적용할 거에요

00:01:11.644 --> 00:01:12.809
이 사이의
문자에 말이죠

00:01:13.008 --> 00:01:15.353
우리는 페이지의 모든 에
색상을 적용할 수도 있어요

00:01:15.780 --> 00:01:18.558
하지만 모든 걸 빨갛게
하고 싶지 않을 수도 있죠

00:01:18.558 --> 00:01:19.980
이 에게

00:01:20.107 --> 00:01:21.980
"lovey-dovey"라는 클래스를
주도록 하죠

00:01:25.086 --> 00:01:29.053
그리고 이 요소에게만
적용하는 규칙을 추가해요

00:01:29.053 --> 00:01:30.370
"lovey-dovey"라는 클래스를
가지는 요소들에게만요

00:01:30.388 --> 00:01:33.755
그러면 lovey-dovey에게
color: red라고 하죠

00:01:34.613 --> 00:01:36.703
저 텍스트가 이제 얼마나
달콤해졌는지 보세요!

00:01:38.093 --> 00:01:40.557
은 텍스트의 그룹화를
하는데 유용해요

00:01:40.557 --> 00:01:43.007
그렇다면 여러 요소들의 그룹화는
어떻게 하면 될까요?

00:01:43.507 --> 00:01:45.247
여기서 태그가
등장해요

00:01:45.680 --> 00:01:47.677
이 페이지 하단 부분을
그룹화하고 싶다고 해봐요

00:01:48.195 --> 00:01:49.464
공식 정보 헤더와

00:01:49.464 --> 00:01:51.174
문단과 그 아래에
있는 그림까지요

00:01:51.743 --> 00:01:52.714
이걸 하기 위해서

00:01:52.714 --> 00:01:58.129
태그 앞에 커서를 두고

00:01:58.129 --> 00:01:59.389
태그를 열게요

00:01:59.859 --> 00:02:02.259
그리고 마지막
문단으로 내려가서

00:02:02.690 --> 00:02:04.620
태그를 닫아요

00:02:05.467 --> 00:02:07.847
이제 가 생겼으니
스타일을 줘야겠죠

00:02:08.510 --> 00:02:09.568
에 스타일을
적용하려면

00:02:09.568 --> 00:02:11.426
id를 줄거에요

00:02:11.426 --> 00:02:13.516
"official-info"
라고 할게요

00:02:15.117 --> 00:02:16.417
그리고 이 id에 대한
규칙을 추가해요

00:02:16.422 --> 00:02:21.102
그럼 #official-info
그리고 background:

00:02:22.275 --> 00:02:23.715
멋진 회색으로 해보죠

00:02:23.884 --> 00:02:26.934
이렇게 하고
좋아요

00:02:27.133 --> 00:02:28.646
이제 를 보면

00:02:28.646 --> 00:02:30.841
모든 요소를 속에 포함하는
회색 상자가 되었어요

00:02:31.772 --> 00:02:34.267
만약 각각 하나씩

00:02:34.267 --> 00:02:35.947
회색 배경을 주는 것과는
다를거에요

00:02:35.998 --> 00:02:38.228
만약 그렇게 했다면
사이에 공백이 있어서

00:02:38.228 --> 00:02:39.308
이렇게 전체가 회색은
아닐 거에요

00:02:39.520 --> 00:02:41.120
우리는 를
이렇게 사용해요

00:02:41.129 --> 00:02:42.909
모든 요소들 주위에
박스를 만들고 싶을 때죠

00:02:44.708 --> 00:02:46.185
을 사용할 때는

00:02:46.185 --> 00:02:47.735
텍스트를 그룹화
할 때에요

00:02:48.303 --> 00:02:50.759
를 사용할 때는

00:02:50.759 --> 00:02:52.269
요소들을 그룹화
할 때에요

00:02:52.478 --> 00:02:54.718
하지만 두 개를 구별할
다른 방법이 있어요

00:02:55.451 --> 00:02:58.224
CSS세계에서는 두 가지
종류의 요소가 있어요

00:02:58.412 --> 00:03:00.232
줄(inline)과
구역(block)이죠

00:03:00.499 --> 00:03:03.409
줄 요소는 요소 다음에
새로운 줄이 없어요

00:03:03.570 --> 00:03:06.726
여러 개의 줄 요소가 있다면
같은 줄에 위치할 거에요

00:03:06.726 --> 00:03:08.751
우리가 얘기했던 것들 중에는

00:03:08.751 --> 00:03:11.651
a와 image태그가 있죠

00:03:11.832 --> 00:03:13.432
이 이미지를 보면

00:03:13.451 --> 00:03:16.431
텍스트가 바로 따라오는 것을
볼 수 있어요

00:03:16.616 --> 00:03:18.326
뒤에 새로운 줄이
없기 때문이죠

00:03:18.657 --> 00:03:21.887
구역 요소는 뒤에
새로운 줄이 있어요

00:03:21.912 --> 00:03:24.602
거의 모든 HTML태그들이
새로운 줄을 생성하죠

00:03:24.818 --> 00:03:26.978
이 페이지의 예시를 보세요

00:03:27.041 --> 00:03:30.281
헤딩, 문단, 리스트

00:03:30.799 --> 00:03:33.699
브라우저는 매번
새로운 줄을 추가해요

00:03:33.732 --> 00:03:36.152
여러분이 
태그를
쓸 필요가 없게 말이죠

00:03:37.027 --> 00:03:39.379
근데 이게 과 에
무슨 상관이죠?

00:03:39.835 --> 00:03:43.203
은 줄 요소를 만들고

00:03:43.203 --> 00:03:47.123
는 구역 요소를 만들어요

00:03:47.252 --> 00:03:49.492
즉 여러분이
를 추가하고

00:03:49.492 --> 00:03:53.432
다른 스타일을
적용하지 않는다면

00:03:53.940 --> 00:03:57.560
브라우저는 그 페이지 부분을
구역화할 거에요

00:03:58.145 --> 00:04:00.534
방금 안에 여러 텍스트가
포함되었던 것 처럼요

00:04:00.534 --> 00:04:02.984
이제 새로운 줄이
앞뒤로 추가되었어요

00:04:02.998 --> 00:04:05.495
어쩌면 이게 여러분들이
원하는 걸지도 몰라요

00:04:05.495 --> 00:04:07.525
그냥 이 차이점을
새겨두기로 해요

00:04:07.553 --> 00:04:08.395
그리고 계속해봐요

00:04:08.395 --> 00:04:10.885
이 태그로 할 수 있는게
아주 많으니까요

00:04:10.885 --> 00:04:12.631
특히 이 강력한
로 말이죠