0:00:00.143,0:00:04.778
저는 칸 아카데미의 캐릭터인 [br]Hopper를 위한 웹페이지를 만들고 있어요

0:00:04.778,0:00:10.418
여기엔 이미지 하나와 링크 몇 개와 한 문단이 있어요

0:00:10.418,0:00:15.516
호퍼의 그림이 문단 옆에 있으면 더 좋을 것 같네요

0:00:15.516,0:00:17.766
그래서 이것을 잘라서

0:00:17.766,0:00:20.331
이 아래에 붙여볼게요

0:00:20.331,0:00:23.821
음.. 생각했던 것 보다 별로네요

0:00:23.821,0:00:26.053
글이 이미지의 바닥에서 시작해버리네요

0:00:26.053,0:00:28.810
저는 글이 이미지의 주변을 두르길 바랐는데요

0:00:28.810,0:00:31.113
신문이나 잡지처럼 말이죠

0:00:31.113,0:00:34.140
이를 위해서는 새로운 CSS 속성이 필요합니다 [br]'float'

0:00:34.140,0:00:37.250
이것으로 요소를 띄울 수 있어요[br](요소의 병렬 배치 가능)

0:00:37.250,0:00:40.025
이미지 주변에 글을 두르게 할 때 적합합니다

0:00:40.025,0:00:44.297
이제 위의 "pic"의 규칙에 'float:'을 추가하고

0:00:44.297,0:00:48.083
값은 그림을 어디에 배치하느냐에 따라 달라집니다

0:00:48.083,0:00:50.772
왼쪽인지 오른쪽인지

0:00:50.772,0:00:52.779
왼쪽으로 해보죠

0:00:52.779,0:00:54.647
완벽해요

0:00:54.647,0:00:57.352
아니, 완벽하진 않네요

0:00:57.352,0:01:00.327
그림과 글이 너무 가깝군요

0:01:00.327,0:01:02.431
그림과 글을 떼어놓기 위해 어떤 속성을

0:01:02.431,0:01:04.793
써야 했는지 기억하세요?

0:01:04.793,0:01:07.506
그건 우리가 막 배웠던 box model (박스 모델)의 일부인

0:01:07.506,0:01:09.017
Margin (여백)입니다

0:01:09.017,0:01:13.665
이 그림에 'margin: right'와[br]'margin: bottom'을 추가해볼게요

0:01:13.665,0:01:16.214
숨 쉴 틈을 조금 주기 위해서요

0:01:16.214,0:01:22.348
훨씬 낫네요

0:01:22.348,0:01:26.653
그림이 아닌 요소들도 띄울 수 있답니다

0:01:26.653,0:01:29.192
사이드바같은 경우처럼요

0:01:29.192,0:01:31.844
이 링크들은 어떤가요?

0:01:31.844,0:01:35.220
이 링크들을 오른쪽에 띄울 수 있어요

0:01:35.220,0:01:38.098
먼저 '#hopper-links' 규칙을 추가하고

0:01:38.098,0:01:41.361
오른쪽에 띄우죠

0:01:41.361,0:01:44.370
띄우긴 했는데 너무 많은 폭을 차지하네요

0:01:44.370,0:01:46.809
생각했던 것 보다 말이죠

0:01:46.809,0:01:50.515
폭을 30%로 제한할게요

0:01:50.515,0:01:55.076
그러면 이것은 항상 페이지의 [br]30%만 차지하게 되고

0:01:55.076,0:01:59.523
페이지의 나머지가 70%를 채웁니다

0:01:59.523,0:02:02.144
보통 우리가 ‘div를 띄우게 만들 때는[br]폭을 지정해 주어야 합니다

0:02:02.144,0:02:04.983
그렇지 않으면 'div'는 공간을 다 차지해버리고

0:02:04.983,0:02:07.198
주변에 아무것도 두를 수 없게 되요

0:02:07.198,0:02:11.486
여기 'margin: left'도 약간 주면 좋을 것 같네요

0:02:11.486,0:02:13.483
좋아요

0:02:13.483,0:02:18.646
하단의 꼬리말에 Hopper의 연락처가 있어요

0:02:18.646,0:02:22.140
그런데 사이드바와 겹쳐진 부분이 [br]어색해 보이네요

0:02:22.140,0:02:24.133
이것은 사이드바가 둘러져 있기 때문이에요[br](병행 배치됨)

0:02:24.133,0:02:26.198
하지만 이것들은 겹쳐지지 않게 해야해요

0:02:26.198,0:02:28.203
꼬리말은 항상 모든 요소의 아래에 두는게 좋아요

0:02:28.203,0:02:30.075
꼬리말이니까요

0:02:30.075,0:02:34.499
이것이 감싸지 않게 하려면, 'clear' 속성을 사용할 수 있어요

0:02:34.499,0:02:38.135
이렇게 'clear: both'를 쓰면

0:02:38.135,0:02:40.226
'clear:left'나 'clear:right'도 쓸 수 있어요

0:02:40.226,0:02:42.086
특정한 방향의 요소를 두르지 않게 할 때 말이죠

0:02:42.086,0:02:44.602
오른쪽 부유 요소나 왼쪽 부유 요소같은

0:02:44.602,0:02:47.660
하지만 보통은 양쪽 다 막아야 하므로

0:02:47.660,0:02:49.394
'clear: both'를 씁니다

0:02:49.394,0:02:52.377
조금은 진짜 웹페이지 같아졌네요

0:02:52.377,0:02:55.139
본문, 사이드바, 꼬리발이 있어요

0:02:55.139,0:03:00.311
이제 여러분은 대부분의 웹페이지를 [br]만드는 CSS 속성을 배웠어요

0:03:00.311,0:03:04.732
'div'를 width, height, padding, margin [br]float, clear을 이용해 조립하면

0:03:04.732,0:03:08.732
여러분의 손끝에 수만 가지의 [br]웹페이지를 만들어낼 수 있답니다