WEBVTT

00:00:00.000 --> 00:00:01.428
여러분은 기억날 거에요

00:00:01.428 --> 00:00:04.578
저번 시간에 박스 같은 걸
만들었던 것을요

00:00:04.591 --> 00:00:06.409
'div'태그로 만들어서

00:00:06.409 --> 00:00:08.352
배경색을 줬었죠

00:00:08.352 --> 00:00:10.855
하지만 실은 웹페이지의
모든 요소가

00:00:10.865 --> 00:00:12.728
박스로 취급돼요

00:00:12.728 --> 00:00:13.939
브라우저에 의해서는요

00:00:13.939 --> 00:00:16.508
그게 박스처럼 보이건
보이지 않건 말이죠

00:00:16.508 --> 00:00:20.638
이 헤딩도 박스고
문단도 박스고

00:00:20.638 --> 00:00:23.748
우리가 만든 도
박스에요

00:00:24.358 --> 00:00:28.018
어떤 박스들은 크고
어떤 것은 작고

00:00:28.018 --> 00:00:33.058
'span'같은 것은 줄 안에 있고
'div'같은 것은 구역이죠

00:00:33.058 --> 00:00:35.708
하지만 모두 박스로
취급돼요

00:00:36.358 --> 00:00:38.294
그게 무슨 상관일까요?

00:00:38.294 --> 00:00:41.054
왜냐하면 '박스 모델'이라고
불리는 것이 있기 때문이죠

00:00:41.080 --> 00:00:44.100
제가 방금 붙여넣기한
그림에서 처럼요

00:00:44.100 --> 00:00:46.030
모든 요소 박스는
네 개의 파트로 구성돼요

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

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

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

00:00:54.437 --> 00:00:56.507
여러분은 그게 어떤 건지
곧 깨닫게 될 거에요

00:00:57.287 --> 00:00:59.177
바깥 여백으로
시작해 볼게요

00:00:59.177 --> 00:01:01.657
이것은 박스 주변의
투명한 영역이에요

00:01:01.672 --> 00:01:03.822
이 박스를 다른 요소들과
나누는 영역이죠

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

00:01:08.762 --> 00:01:13.429
공식 정보 칸의 사방에
15픽셀의 바깥 여백을 주려면

00:01:13.819 --> 00:01:19.699
'margin: 15px;'
라고 하면 돼요

00:01:20.569 --> 00:01:22.284
변화가 보이세요?

00:01:22.717 --> 00:01:26.357
만약 각 면에 여백을
다르게 주고 싶다면요?

00:01:26.357 --> 00:01:28.807
상하여백을 좌우여백보다
더 주고 싶다면요?

00:01:28.807 --> 00:01:31.417
여백의 양을 시계방향의
순서대로 주면 돼요

00:01:31.643 --> 00:01:33.413
위에서 부터
시작해서 말이에요

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

00:01:42.963 --> 00:01:45.863
아니면 각 면에 대한 속성을
이용할 수 도 있어요

00:01:45.863 --> 00:01:48.223
몇 개의 면에만
주고 싶다면요

00:01:48.223 --> 00:01:52.223
고양이 그림 주위에
약간의 공백을 주고 싶은데

00:01:52.743 --> 00:02:00.620
오른쪽이랑
아래쪽에도 주고 싶네요

00:02:00.882 --> 00:02:03.792
그리고 나머지에는
기본 여백 정도면 되고요

00:02:04.662 --> 00:02:07.252
여백으로 줄 수 있는
특정한 값도 있어요

00:02:07.252 --> 00:02:09.772
페이지를 좀 더 예쁘게
만들 수 있게 말이죠

00:02:09.772 --> 00:02:11.004
이걸 보여주려면

00:02:11.004 --> 00:02:14.234
이 전체 페이지에
를 추가할 거에요

00:02:14.234 --> 00:02:17.464
id로 "container"를 줄게요

00:02:18.334 --> 00:02:22.384
이 태그를 추가하고요
모든 걸 포함하게 되었네요

00:02:23.004 --> 00:02:27.044
이제 이 div에 대한
규칙을 추가할 거에요

00:02:27.514 --> 00:02:33.164
폭은 400픽셀을 주고
페이지 가운데 정렬할 거에요

00:02:33.814 --> 00:02:37.744
이걸 'margin-left: 100px;'
이라고 할 수도 있을 거에요

00:02:37.744 --> 00:02:40.324
이렇게 하면 제가 보기엔
가운데 있는 것 처럼 보이죠

00:02:40.324 --> 00:02:42.104
하지만 여러분에게는
아닐 수도 있어요

00:02:42.104 --> 00:02:44.659
왜냐하면 여러분의 브라우저는
더 크거나 작을 수도 있으니까요

00:02:44.659 --> 00:02:46.171
우리가 브라우저에게
말해주고 싶은 것은

00:02:46.171 --> 00:02:51.641
'여백을 얼마든지 줘서
양쪽 여백이 같게 해줘'에요

00:02:52.201 --> 00:02:56.341
이건 'margin: auto;'
라고 하면 돼요

00:02:56.341 --> 00:02:58.341
이건 div를 페이지의 가운데로
정렬하는데 좋은 방법이에요

00:02:59.931 --> 00:03:02.071
이제 div를 가운데에
위치시켰으니

00:03:02.071 --> 00:03:04.012
조금 더 구별되게끔

00:03:04.024 --> 00:03:06.304
테두리를 추가하고 싶어요

00:03:06.333 --> 00:03:09.223
CSS 테두리 속성을
사용해서 말이죠

00:03:09.223 --> 00:03:12.223
이 div에 빨간 테두리를
추가해 볼게요

00:03:12.963 --> 00:03:14.253
'border: '라고 쓰고

00:03:14.253 --> 00:03:16.943
우리는 테두리의 세 가지
속성을 정해줘야 해요

00:03:16.943 --> 00:03:19.073
두께, 스타일, 색상이죠

00:03:19.253 --> 00:03:22.633
얇은 테두리로 하려면
'1px'라고 쓸게요

00:03:22.633 --> 00:03:25.369
평범한 실선
테두리로 하려면

00:03:25.369 --> 00:03:27.529
'solid'라고 쓰고

00:03:27.529 --> 00:03:31.649
빨간색으로 하려면
제 RGB 선택창을 띄워서

00:03:31.649 --> 00:03:37.399
타오르는 붉은색을
고를게요

00:03:37.399 --> 00:03:39.919
마치 바깥 여백처럼
테두리도

00:03:39.919 --> 00:03:41.928
한 쪽에만 줄 수 있어요

00:03:41.928 --> 00:03:46.078
만약 정말 두꺼운 보라색
테두리를 위에 주고 싶다면

00:03:46.078 --> 00:03:49.238
새로운 속성을
추가하면 돼요

00:03:49.248 --> 00:03:53.915
'border-top: 10px solid purple;'

00:03:53.915 --> 00:03:58.675
좋아요
이제 이미지에 액자를 추가해보죠

00:03:58.675 --> 00:04:00.445
테두리 속성으로
이것저것 해볼게요

00:04:01.705 --> 00:04:07.605
'cute-cat'으로 올라가서
'border: 6px'

00:04:07.605 --> 00:04:11.825
'groove red'로 해보죠

00:04:12.105 --> 00:04:15.225
저는 그루브를 좋아하지 않으니까
'double'로 해볼까요?

00:04:15.225 --> 00:04:19.955
그냥 'ridge'로 해볼게요
아! 이제 액자 같아 보이네요


00:04:20.835 --> 00:04:23.815
그러면 공식 정보칸에도
테두리를 적용해볼까요?

00:04:24.965 --> 00:04:26.955
'border:'
너무 크게하지 않을게요

00:04:26.955 --> 00:04:27.965
'2px'

00:04:28.405 --> 00:04:31.185
'dotted'로 해볼게요

00:04:31.200 --> 00:04:34.430
그냥 차분한 회색으로 하죠

00:04:35.080 --> 00:04:37.388
'dashed'를 한번 해볼게요

00:04:37.388 --> 00:04:39.188
좋아요
이제 제가 원하던 거에요

00:04:39.638 --> 00:04:42.438
테두리를 적용했는데
뭔가가 거슬리네요

00:04:42.438 --> 00:04:45.018
사실 정말 많이 거슬려요

00:04:45.648 --> 00:04:50.118
이 텍스트가 'container' 테두리에
딱 붙어있는 게 보이세요?

00:04:50.578 --> 00:04:54.218
그리고 공식 정보 칸도
딱 붙어있네요

00:04:54.218 --> 00:04:56.178
정말 이상해보이는데다

00:04:56.178 --> 00:04:58.898
글자를 읽기 어려워요

00:04:58.898 --> 00:05:01.148
여기서 안쪽 여백이
등장해요

00:05:01.148 --> 00:05:03.778
여러분의 요소가
배경색이나 테두리를 가진다면

00:05:03.778 --> 00:05:06.062
여러분은 아마
안쪽 여백도 주고 싶을 거에요

00:05:06.062 --> 00:05:08.742
내용과 테두리 사이에
공백을 줘야하니까요

00:05:09.286 --> 00:05:11.965
'container'에 안쪽 여백을
추가해 볼게요

00:05:11.965 --> 00:05:17.371
이 박스 주위로
15px를 넣어 볼게요

00:05:17.371 --> 00:05:19.391
아주 낫네요

00:05:19.391 --> 00:05:22.912
이제 공식 정보칸에도
안쪽 여백을 줄게요

00:05:22.912 --> 00:05:27.462
'padding: 6px'
아름다워요

00:05:27.462 --> 00:05:29.362
이미지에는 여백을
주지 않아도 될 것 같아요

00:05:29.363 --> 00:05:31.843
액자 안에 저렇게 있으니
괜찮아 보이니까요

00:05:31.843 --> 00:05:34.732
이제 여러분은
박스 모델에 대해 알게 되었어요

00:05:34.732 --> 00:05:36.552
바깥 여백, 테두리
그리고 안쪽 여백까지요

00:05:36.552 --> 00:05:38.622
저는 큰 값과
밝은 색을 써서

00:05:38.632 --> 00:05:40.082
여러분에게
잘 보여주려고 했지만

00:05:40.082 --> 00:05:42.260
제 페이지는
약간 부담스러워요

00:05:42.260 --> 00:05:45.220
여러분의 페이지가 세련되고
복잡해보이게 하고 싶다면

00:05:45.220 --> 00:05:47.440
차분한 흰색이나
회색을 쓰세요

00:05:47.440 --> 00:05:48.890
여러분이
어떻게 하든지

00:05:48.890 --> 00:05:50.610
이 속성들을
사용하도록 해요

00:05:50.610 --> 00:05:54.100
왜냐하면 페이지가 어떻게 보여지고
느껴지는지에 큰 영향을 끼치니까요