0:00:00.000,0:00:01.428
여러분은 기억날 거에요

0:00:01.428,0:00:04.578
저번 시간에 박스 같은 걸[br]만들었던 것을요

0:00:04.591,0:00:06.409
'div'태그로 만들어서

0:00:06.409,0:00:08.352
배경색을 줬었죠

0:00:08.352,0:00:10.855
하지만 실은 웹페이지의[br]모든 요소가

0:00:10.865,0:00:12.728
박스로 취급돼요

0:00:12.728,0:00:13.939
브라우저에 의해서는요

0:00:13.939,0:00:16.508
그게 박스처럼 보이건[br]보이지 않건 말이죠

0:00:16.508,0:00:20.638
이 헤딩도 박스고[br]문단도 박스고

0:00:20.638,0:00:23.748
우리가 만든 도[br]박스에요

0:00:24.358,0:00:28.018
어떤 박스들은 크고[br]어떤 것은 작고

0:00:28.018,0:00:33.058
'span'같은 것은 줄 안에 있고[br]'div'같은 것은 구역이죠

0:00:33.058,0:00:35.708
하지만 모두 박스로[br]취급돼요

0:00:36.358,0:00:38.294
그게 무슨 상관일까요?

0:00:38.294,0:00:41.054
왜냐하면 '박스 모델'이라고[br]불리는 것이 있기 때문이죠

0:00:41.080,0:00:44.100
제가 방금 붙여넣기한[br]그림에서 처럼요

0:00:44.100,0:00:46.030
모든 요소 박스는[br]네 개의 파트로 구성돼요

0:00:46.033,0:00:48.513
실제 내용, 안쪽 여백,

0:00:48.517,0:00:50.817
테두리, 바깥 여백이죠

0:00:51.297,0:00:54.437
CSS를 이용해서 안쪽 여백, 테두리,[br]바깥 여백을 수정할 수 있어요

0:00:54.437,0:00:56.507
여러분은 그게 어떤 건지[br]곧 깨닫게 될 거에요

0:00:57.287,0:00:59.177
바깥 여백으로[br]시작해 볼게요

0:00:59.177,0:01:01.657
이것은 박스 주변의[br]투명한 영역이에요

0:01:01.672,0:01:03.822
이 박스를 다른 요소들과[br]나누는 영역이죠

0:01:03.822,0:01:08.422
이 바깥 여백은 우리가 가장 즐겨쓰는[br]단위인 '픽셀'로 지정할 수 있어요

0:01:08.762,0:01:13.429
공식 정보 칸의 사방에[br]15픽셀의 바깥 여백을 주려면

0:01:13.819,0:01:19.699
'margin: 15px;'[br]라고 하면 돼요

0:01:20.569,0:01:22.284
변화가 보이세요?

0:01:22.717,0:01:26.357
만약 각 면에 여백을[br]다르게 주고 싶다면요?

0:01:26.357,0:01:28.807
상하여백을 좌우여백보다[br]더 주고 싶다면요?

0:01:28.807,0:01:31.417
여백의 양을 시계방향의[br]순서대로 주면 돼요

0:01:31.643,0:01:33.413
위에서 부터[br]시작해서 말이에요

0:01:33.413,0:01:41.103
그러니까 위는 15px, 오른쪽은 0px,[br]아래는 10px, 왼쪽은 6px라고 써요

0:01:42.963,0:01:45.863
아니면 각 면에 대한 속성을[br]이용할 수 도 있어요

0:01:45.863,0:01:48.223
몇 개의 면에만[br]주고 싶다면요

0:01:48.223,0:01:52.223
고양이 그림 주위에[br]약간의 공백을 주고 싶은데

0:01:52.743,0:02:00.620
오른쪽이랑[br]아래쪽에도 주고 싶네요

0:02:00.882,0:02:03.792
그리고 나머지에는[br]기본 여백 정도면 되고요

0:02:04.662,0:02:07.252
여백으로 줄 수 있는[br]특정한 값도 있어요

0:02:07.252,0:02:09.772
페이지를 좀 더 예쁘게[br]만들 수 있게 말이죠

0:02:09.772,0:02:11.004
이걸 보여주려면

0:02:11.004,0:02:14.234
이 전체 페이지에[br]를 추가할 거에요

0:02:14.234,0:02:17.464
id로 "container"를 줄게요

0:02:18.334,0:02:22.384
이 태그를 추가하고요[br]모든 걸 포함하게 되었네요

0:02:23.004,0:02:27.044
이제 이 div에 대한[br]규칙을 추가할 거에요

0:02:27.514,0:02:33.164
폭은 400픽셀을 주고[br]페이지 가운데 정렬할 거에요

0:02:33.814,0:02:37.744
이걸 'margin-left: 100px;'[br]이라고 할 수도 있을 거에요

0:02:37.744,0:02:40.324
이렇게 하면 제가 보기엔[br]가운데 있는 것 처럼 보이죠

0:02:40.324,0:02:42.104
하지만 여러분에게는[br]아닐 수도 있어요

0:02:42.104,0:02:44.659
왜냐하면 여러분의 브라우저는[br]더 크거나 작을 수도 있으니까요

0:02:44.659,0:02:46.171
우리가 브라우저에게[br]말해주고 싶은 것은

0:02:46.171,0:02:51.641
'여백을 얼마든지 줘서[br]양쪽 여백이 같게 해줘'에요

0:02:52.201,0:02:56.341
이건 'margin: auto;'[br]라고 하면 돼요

0:02:56.341,0:02:58.341
이건 div를 페이지의 가운데로[br]정렬하는데 좋은 방법이에요

0:02:59.931,0:03:02.071
이제 div를 가운데에[br]위치시켰으니

0:03:02.071,0:03:04.012
조금 더 구별되게끔

0:03:04.024,0:03:06.304
테두리를 추가하고 싶어요

0:03:06.333,0:03:09.223
CSS 테두리 속성을[br]사용해서 말이죠

0:03:09.223,0:03:12.223
이 div에 빨간 테두리를[br]추가해 볼게요

0:03:12.963,0:03:14.253
'border: '라고 쓰고

0:03:14.253,0:03:16.943
우리는 테두리의 세 가지[br]속성을 정해줘야 해요

0:03:16.943,0:03:19.073
두께, 스타일, 색상이죠

0:03:19.253,0:03:22.633
얇은 테두리로 하려면[br]'1px'라고 쓸게요

0:03:22.633,0:03:25.369
평범한 실선[br]테두리로 하려면

0:03:25.369,0:03:27.529
'solid'라고 쓰고

0:03:27.529,0:03:31.649
빨간색으로 하려면[br]제 RGB 선택창을 띄워서

0:03:31.649,0:03:37.399
타오르는 붉은색을[br]고를게요

0:03:37.399,0:03:39.919
마치 바깥 여백처럼[br]테두리도

0:03:39.919,0:03:41.928
한 쪽에만 줄 수 있어요

0:03:41.928,0:03:46.078
만약 정말 두꺼운 보라색[br]테두리를 위에 주고 싶다면

0:03:46.078,0:03:49.238
새로운 속성을[br]추가하면 돼요

0:03:49.248,0:03:53.915
'border-top: 10px solid purple;'

0:03:53.915,0:03:58.675
좋아요[br]이제 이미지에 액자를 추가해보죠

0:03:58.675,0:04:00.445
테두리 속성으로[br]이것저것 해볼게요

0:04:01.705,0:04:07.605
'cute-cat'으로 올라가서[br]'border: 6px'

0:04:07.605,0:04:11.825
'groove red'로 해보죠

0:04:12.105,0:04:15.225
저는 그루브를 좋아하지 않으니까[br]'double'로 해볼까요?

0:04:15.225,0:04:19.955
그냥 'ridge'로 해볼게요[br]아! 이제 액자 같아 보이네요[br]

0:04:20.835,0:04:23.815
그러면 공식 정보칸에도[br]테두리를 적용해볼까요?

0:04:24.965,0:04:26.955
'border:'[br]너무 크게하지 않을게요

0:04:26.955,0:04:27.965
'2px'

0:04:28.405,0:04:31.185
'dotted'로 해볼게요

0:04:31.200,0:04:34.430
그냥 차분한 회색으로 하죠

0:04:35.080,0:04:37.388
'dashed'를 한번 해볼게요

0:04:37.388,0:04:39.188
좋아요[br]이제 제가 원하던 거에요

0:04:39.638,0:04:42.438
테두리를 적용했는데[br]뭔가가 거슬리네요

0:04:42.438,0:04:45.018
사실 정말 많이 거슬려요

0:04:45.648,0:04:50.118
이 텍스트가 'container' 테두리에[br]딱 붙어있는 게 보이세요?

0:04:50.578,0:04:54.218
그리고 공식 정보 칸도[br]딱 붙어있네요

0:04:54.218,0:04:56.178
정말 이상해보이는데다

0:04:56.178,0:04:58.898
글자를 읽기 어려워요

0:04:58.898,0:05:01.148
여기서 안쪽 여백이[br]등장해요

0:05:01.148,0:05:03.778
여러분의 요소가[br]배경색이나 테두리를 가진다면

0:05:03.778,0:05:06.062
여러분은 아마[br]안쪽 여백도 주고 싶을 거에요

0:05:06.062,0:05:08.742
내용과 테두리 사이에[br]공백을 줘야하니까요

0:05:09.286,0:05:11.965
'container'에 안쪽 여백을[br]추가해 볼게요

0:05:11.965,0:05:17.371
이 박스 주위로[br]15px를 넣어 볼게요

0:05:17.371,0:05:19.391
아주 낫네요

0:05:19.391,0:05:22.912
이제 공식 정보칸에도[br]안쪽 여백을 줄게요

0:05:22.912,0:05:27.462
'padding: 6px'[br]아름다워요

0:05:27.462,0:05:29.362
이미지에는 여백을[br]주지 않아도 될 것 같아요

0:05:29.363,0:05:31.843
액자 안에 저렇게 있으니[br]괜찮아 보이니까요

0:05:31.843,0:05:34.732
이제 여러분은[br]박스 모델에 대해 알게 되었어요

0:05:34.732,0:05:36.552
바깥 여백, 테두리[br]그리고 안쪽 여백까지요

0:05:36.552,0:05:38.622
저는 큰 값과[br]밝은 색을 써서

0:05:38.632,0:05:40.082
여러분에게[br]잘 보여주려고 했지만

0:05:40.082,0:05:42.260
제 페이지는[br]약간 부담스러워요

0:05:42.260,0:05:45.220
여러분의 페이지가 세련되고[br]복잡해보이게 하고 싶다면

0:05:45.220,0:05:47.440
차분한 흰색이나[br]회색을 쓰세요

0:05:47.440,0:05:48.890
여러분이[br]어떻게 하든지

0:05:48.890,0:05:50.610
이 속성들을[br]사용하도록 해요

0:05:50.610,0:05:54.100
왜냐하면 페이지가 어떻게 보여지고[br]느껴지는지에 큰 영향을 끼치니까요