[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:01.43,Default,,0000,0000,0000,,여러분은 기억날 거에요
Dialogue: 0,0:00:01.43,0:00:04.58,Default,,0000,0000,0000,,저번 시간에 박스 같은 걸\N만들었던 것을요
Dialogue: 0,0:00:04.59,0:00:06.41,Default,,0000,0000,0000,,'div'태그로 만들어서
Dialogue: 0,0:00:06.41,0:00:08.35,Default,,0000,0000,0000,,배경색을 줬었죠
Dialogue: 0,0:00:08.35,0:00:10.86,Default,,0000,0000,0000,,하지만 실은 웹페이지의\N모든 요소가
Dialogue: 0,0:00:10.86,0:00:12.73,Default,,0000,0000,0000,,박스로 취급돼요
Dialogue: 0,0:00:12.73,0:00:13.94,Default,,0000,0000,0000,,브라우저에 의해서는요
Dialogue: 0,0:00:13.94,0:00:16.51,Default,,0000,0000,0000,,그게 박스처럼 보이건\N보이지 않건 말이죠
Dialogue: 0,0:00:16.51,0:00:20.64,Default,,0000,0000,0000,,이 헤딩도 박스고\N문단도 박스고
Dialogue: 0,0:00:20.64,0:00:23.75,Default,,0000,0000,0000,,우리가 만든 도\N박스에요
Dialogue: 0,0:00:24.36,0:00:28.02,Default,,0000,0000,0000,,어떤 박스들은 크고\N어떤 것은 작고
Dialogue: 0,0:00:28.02,0:00:33.06,Default,,0000,0000,0000,,'span'같은 것은 줄 안에 있고\N'div'같은 것은 구역이죠
Dialogue: 0,0:00:33.06,0:00:35.71,Default,,0000,0000,0000,,하지만 모두 박스로\N취급돼요
Dialogue: 0,0:00:36.36,0:00:38.29,Default,,0000,0000,0000,,그게 무슨 상관일까요?
Dialogue: 0,0:00:38.29,0:00:41.05,Default,,0000,0000,0000,,왜냐하면 '박스 모델'이라고\N불리는 것이 있기 때문이죠
Dialogue: 0,0:00:41.08,0:00:44.10,Default,,0000,0000,0000,,제가 방금 붙여넣기한\N그림에서 처럼요
Dialogue: 0,0:00:44.10,0:00:46.03,Default,,0000,0000,0000,,모든 요소 박스는\N네 개의 파트로 구성돼요
Dialogue: 0,0:00:46.03,0:00:48.51,Default,,0000,0000,0000,,실제 내용, 안쪽 여백,
Dialogue: 0,0:00:48.52,0:00:50.82,Default,,0000,0000,0000,,테두리, 바깥 여백이죠
Dialogue: 0,0:00:51.30,0:00:54.44,Default,,0000,0000,0000,,CSS를 이용해서 안쪽 여백, 테두리,\N바깥 여백을 수정할 수 있어요
Dialogue: 0,0:00:54.44,0:00:56.51,Default,,0000,0000,0000,,여러분은 그게 어떤 건지\N곧 깨닫게 될 거에요
Dialogue: 0,0:00:57.29,0:00:59.18,Default,,0000,0000,0000,,바깥 여백으로\N시작해 볼게요
Dialogue: 0,0:00:59.18,0:01:01.66,Default,,0000,0000,0000,,이것은 박스 주변의\N투명한 영역이에요
Dialogue: 0,0:01:01.67,0:01:03.82,Default,,0000,0000,0000,,이 박스를 다른 요소들과\N나누는 영역이죠
Dialogue: 0,0:01:03.82,0:01:08.42,Default,,0000,0000,0000,,이 바깥 여백은 우리가 가장 즐겨쓰는\N단위인 '픽셀'로 지정할 수 있어요
Dialogue: 0,0:01:08.76,0:01:13.43,Default,,0000,0000,0000,,공식 정보 칸의 사방에\N15픽셀의 바깥 여백을 주려면
Dialogue: 0,0:01:13.82,0:01:19.70,Default,,0000,0000,0000,,'margin: 15px;'\N라고 하면 돼요
Dialogue: 0,0:01:20.57,0:01:22.28,Default,,0000,0000,0000,,변화가 보이세요?
Dialogue: 0,0:01:22.72,0:01:26.36,Default,,0000,0000,0000,,만약 각 면에 여백을\N다르게 주고 싶다면요?
Dialogue: 0,0:01:26.36,0:01:28.81,Default,,0000,0000,0000,,상하여백을 좌우여백보다\N더 주고 싶다면요?
Dialogue: 0,0:01:28.81,0:01:31.42,Default,,0000,0000,0000,,여백의 양을 시계방향의\N순서대로 주면 돼요
Dialogue: 0,0:01:31.64,0:01:33.41,Default,,0000,0000,0000,,위에서 부터\N시작해서 말이에요
Dialogue: 0,0:01:33.41,0:01:41.10,Default,,0000,0000,0000,,그러니까 위는 15px, 오른쪽은 0px,\N아래는 10px, 왼쪽은 6px라고 써요
Dialogue: 0,0:01:42.96,0:01:45.86,Default,,0000,0000,0000,,아니면 각 면에 대한 속성을\N이용할 수 도 있어요
Dialogue: 0,0:01:45.86,0:01:48.22,Default,,0000,0000,0000,,몇 개의 면에만\N주고 싶다면요
Dialogue: 0,0:01:48.22,0:01:52.22,Default,,0000,0000,0000,,고양이 그림 주위에\N약간의 공백을 주고 싶은데
Dialogue: 0,0:01:52.74,0:02:00.62,Default,,0000,0000,0000,,오른쪽이랑\N아래쪽에도 주고 싶네요
Dialogue: 0,0:02:00.88,0:02:03.79,Default,,0000,0000,0000,,그리고 나머지에는\N기본 여백 정도면 되고요
Dialogue: 0,0:02:04.66,0:02:07.25,Default,,0000,0000,0000,,여백으로 줄 수 있는\N특정한 값도 있어요
Dialogue: 0,0:02:07.25,0:02:09.77,Default,,0000,0000,0000,,페이지를 좀 더 예쁘게\N만들 수 있게 말이죠
Dialogue: 0,0:02:09.77,0:02:11.00,Default,,0000,0000,0000,,이걸 보여주려면
Dialogue: 0,0:02:11.00,0:02:14.23,Default,,0000,0000,0000,,이 전체 페이지에\N를 추가할 거에요
Dialogue: 0,0:02:14.23,0:02:17.46,Default,,0000,0000,0000,,id로 "container"를 줄게요
Dialogue: 0,0:02:18.33,0:02:22.38,Default,,0000,0000,0000,,이 태그를 추가하고요\N모든 걸 포함하게 되었네요
Dialogue: 0,0:02:23.00,0:02:27.04,Default,,0000,0000,0000,,이제 이 div에 대한\N규칙을 추가할 거에요
Dialogue: 0,0:02:27.51,0:02:33.16,Default,,0000,0000,0000,,폭은 400픽셀을 주고\N페이지 가운데 정렬할 거에요
Dialogue: 0,0:02:33.81,0:02:37.74,Default,,0000,0000,0000,,이걸 'margin-left: 100px;'\N이라고 할 수도 있을 거에요
Dialogue: 0,0:02:37.74,0:02:40.32,Default,,0000,0000,0000,,이렇게 하면 제가 보기엔\N가운데 있는 것 처럼 보이죠
Dialogue: 0,0:02:40.32,0:02:42.10,Default,,0000,0000,0000,,하지만 여러분에게는\N아닐 수도 있어요
Dialogue: 0,0:02:42.10,0:02:44.66,Default,,0000,0000,0000,,왜냐하면 여러분의 브라우저는\N더 크거나 작을 수도 있으니까요
Dialogue: 0,0:02:44.66,0:02:46.17,Default,,0000,0000,0000,,우리가 브라우저에게\N말해주고 싶은 것은
Dialogue: 0,0:02:46.17,0:02:51.64,Default,,0000,0000,0000,,'여백을 얼마든지 줘서\N양쪽 여백이 같게 해줘'에요
Dialogue: 0,0:02:52.20,0:02:56.34,Default,,0000,0000,0000,,이건 'margin: auto;'\N라고 하면 돼요
Dialogue: 0,0:02:56.34,0:02:58.34,Default,,0000,0000,0000,,이건 div를 페이지의 가운데로\N정렬하는데 좋은 방법이에요
Dialogue: 0,0:02:59.93,0:03:02.07,Default,,0000,0000,0000,,이제 div를 가운데에\N위치시켰으니
Dialogue: 0,0:03:02.07,0:03:04.01,Default,,0000,0000,0000,,조금 더 구별되게끔
Dialogue: 0,0:03:04.02,0:03:06.30,Default,,0000,0000,0000,,테두리를 추가하고 싶어요
Dialogue: 0,0:03:06.33,0:03:09.22,Default,,0000,0000,0000,,CSS 테두리 속성을\N사용해서 말이죠
Dialogue: 0,0:03:09.22,0:03:12.22,Default,,0000,0000,0000,,이 div에 빨간 테두리를\N추가해 볼게요
Dialogue: 0,0:03:12.96,0:03:14.25,Default,,0000,0000,0000,,'border: '라고 쓰고
Dialogue: 0,0:03:14.25,0:03:16.94,Default,,0000,0000,0000,,우리는 테두리의 세 가지\N속성을 정해줘야 해요
Dialogue: 0,0:03:16.94,0:03:19.07,Default,,0000,0000,0000,,두께, 스타일, 색상이죠
Dialogue: 0,0:03:19.25,0:03:22.63,Default,,0000,0000,0000,,얇은 테두리로 하려면\N'1px'라고 쓸게요
Dialogue: 0,0:03:22.63,0:03:25.37,Default,,0000,0000,0000,,평범한 실선\N테두리로 하려면
Dialogue: 0,0:03:25.37,0:03:27.53,Default,,0000,0000,0000,,'solid'라고 쓰고
Dialogue: 0,0:03:27.53,0:03:31.65,Default,,0000,0000,0000,,빨간색으로 하려면\N제 RGB 선택창을 띄워서
Dialogue: 0,0:03:31.65,0:03:37.40,Default,,0000,0000,0000,,타오르는 붉은색을\N고를게요
Dialogue: 0,0:03:37.40,0:03:39.92,Default,,0000,0000,0000,,마치 바깥 여백처럼\N테두리도
Dialogue: 0,0:03:39.92,0:03:41.93,Default,,0000,0000,0000,,한 쪽에만 줄 수 있어요
Dialogue: 0,0:03:41.93,0:03:46.08,Default,,0000,0000,0000,,만약 정말 두꺼운 보라색\N테두리를 위에 주고 싶다면
Dialogue: 0,0:03:46.08,0:03:49.24,Default,,0000,0000,0000,,새로운 속성을\N추가하면 돼요
Dialogue: 0,0:03:49.25,0:03:53.92,Default,,0000,0000,0000,,'border-top: 10px solid purple;'
Dialogue: 0,0:03:53.92,0:03:58.68,Default,,0000,0000,0000,,좋아요\N이제 이미지에 액자를 추가해보죠
Dialogue: 0,0:03:58.68,0:04:00.44,Default,,0000,0000,0000,,테두리 속성으로\N이것저것 해볼게요
Dialogue: 0,0:04:01.70,0:04:07.60,Default,,0000,0000,0000,,'cute-cat'으로 올라가서\N'border: 6px'
Dialogue: 0,0:04:07.60,0:04:11.82,Default,,0000,0000,0000,,'groove red'로 해보죠
Dialogue: 0,0:04:12.10,0:04:15.22,Default,,0000,0000,0000,,저는 그루브를 좋아하지 않으니까\N'double'로 해볼까요?
Dialogue: 0,0:04:15.22,0:04:19.96,Default,,0000,0000,0000,,그냥 'ridge'로 해볼게요\N아! 이제 액자 같아 보이네요\N
Dialogue: 0,0:04:20.84,0:04:23.82,Default,,0000,0000,0000,,그러면 공식 정보칸에도\N테두리를 적용해볼까요?
Dialogue: 0,0:04:24.96,0:04:26.96,Default,,0000,0000,0000,,'border:'\N너무 크게하지 않을게요
Dialogue: 0,0:04:26.96,0:04:27.96,Default,,0000,0000,0000,,'2px'
Dialogue: 0,0:04:28.40,0:04:31.18,Default,,0000,0000,0000,,'dotted'로 해볼게요
Dialogue: 0,0:04:31.20,0:04:34.43,Default,,0000,0000,0000,,그냥 차분한 회색으로 하죠
Dialogue: 0,0:04:35.08,0:04:37.39,Default,,0000,0000,0000,,'dashed'를 한번 해볼게요
Dialogue: 0,0:04:37.39,0:04:39.19,Default,,0000,0000,0000,,좋아요\N이제 제가 원하던 거에요
Dialogue: 0,0:04:39.64,0:04:42.44,Default,,0000,0000,0000,,테두리를 적용했는데\N뭔가가 거슬리네요
Dialogue: 0,0:04:42.44,0:04:45.02,Default,,0000,0000,0000,,사실 정말 많이 거슬려요
Dialogue: 0,0:04:45.65,0:04:50.12,Default,,0000,0000,0000,,이 텍스트가 'container' 테두리에\N딱 붙어있는 게 보이세요?
Dialogue: 0,0:04:50.58,0:04:54.22,Default,,0000,0000,0000,,그리고 공식 정보 칸도\N딱 붙어있네요
Dialogue: 0,0:04:54.22,0:04:56.18,Default,,0000,0000,0000,,정말 이상해보이는데다
Dialogue: 0,0:04:56.18,0:04:58.90,Default,,0000,0000,0000,,글자를 읽기 어려워요
Dialogue: 0,0:04:58.90,0:05:01.15,Default,,0000,0000,0000,,여기서 안쪽 여백이\N등장해요
Dialogue: 0,0:05:01.15,0:05:03.78,Default,,0000,0000,0000,,여러분의 요소가\N배경색이나 테두리를 가진다면
Dialogue: 0,0:05:03.78,0:05:06.06,Default,,0000,0000,0000,,여러분은 아마\N안쪽 여백도 주고 싶을 거에요
Dialogue: 0,0:05:06.06,0:05:08.74,Default,,0000,0000,0000,,내용과 테두리 사이에\N공백을 줘야하니까요
Dialogue: 0,0:05:09.29,0:05:11.96,Default,,0000,0000,0000,,'container'에 안쪽 여백을\N추가해 볼게요
Dialogue: 0,0:05:11.96,0:05:17.37,Default,,0000,0000,0000,,이 박스 주위로\N15px를 넣어 볼게요
Dialogue: 0,0:05:17.37,0:05:19.39,Default,,0000,0000,0000,,아주 낫네요
Dialogue: 0,0:05:19.39,0:05:22.91,Default,,0000,0000,0000,,이제 공식 정보칸에도\N안쪽 여백을 줄게요
Dialogue: 0,0:05:22.91,0:05:27.46,Default,,0000,0000,0000,,'padding: 6px'\N아름다워요
Dialogue: 0,0:05:27.46,0:05:29.36,Default,,0000,0000,0000,,이미지에는 여백을\N주지 않아도 될 것 같아요
Dialogue: 0,0:05:29.36,0:05:31.84,Default,,0000,0000,0000,,액자 안에 저렇게 있으니\N괜찮아 보이니까요
Dialogue: 0,0:05:31.84,0:05:34.73,Default,,0000,0000,0000,,이제 여러분은\N박스 모델에 대해 알게 되었어요
Dialogue: 0,0:05:34.73,0:05:36.55,Default,,0000,0000,0000,,바깥 여백, 테두리\N그리고 안쪽 여백까지요
Dialogue: 0,0:05:36.55,0:05:38.62,Default,,0000,0000,0000,,저는 큰 값과\N밝은 색을 써서
Dialogue: 0,0:05:38.63,0:05:40.08,Default,,0000,0000,0000,,여러분에게\N잘 보여주려고 했지만
Dialogue: 0,0:05:40.08,0:05:42.26,Default,,0000,0000,0000,,제 페이지는\N약간 부담스러워요
Dialogue: 0,0:05:42.26,0:05:45.22,Default,,0000,0000,0000,,여러분의 페이지가 세련되고\N복잡해보이게 하고 싶다면
Dialogue: 0,0:05:45.22,0:05:47.44,Default,,0000,0000,0000,,차분한 흰색이나\N회색을 쓰세요
Dialogue: 0,0:05:47.44,0:05:48.89,Default,,0000,0000,0000,,여러분이\N어떻게 하든지
Dialogue: 0,0:05:48.89,0:05:50.61,Default,,0000,0000,0000,,이 속성들을\N사용하도록 해요
Dialogue: 0,0:05:50.61,0:05:54.10,Default,,0000,0000,0000,,왜냐하면 페이지가 어떻게 보여지고\N느껴지는지에 큰 영향을 끼치니까요