WEBVTT

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

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

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

00:00:15.516 --> 00:00:17.766
그래서 이것을 잘라서

00:00:17.766 --> 00:00:20.331
이 아래에 붙여볼게요

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

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

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

00:00:28.810 --> 00:00:31.113
신문이나 잡지처럼 말이죠

00:00:31.113 --> 00:00:34.140
이를 위해서는 새로운 CSS 속성이 필요합니다 
'float'

00:00:34.140 --> 00:00:37.250
이것으로 요소를 띄울 수 있어요
(요소의 병렬 배치 가능)

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

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

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

00:00:48.083 --> 00:00:50.772
왼쪽인지 오른쪽인지

00:00:50.772 --> 00:00:52.779
왼쪽으로 해보죠

00:00:52.779 --> 00:00:54.647
완벽해요

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

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

00:01:00.327 --> 00:01:02.431
그림과 글을 떼어놓기 위해 어떤 속성을

00:01:02.431 --> 00:01:04.793
써야 했는지 기억하세요?

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

00:01:07.506 --> 00:01:09.017
Margin (여백)입니다

00:01:09.017 --> 00:01:13.665
이 그림에 'margin: right'와
'margin: bottom'을 추가해볼게요

00:01:13.665 --> 00:01:16.214
숨 쉴 틈을 조금 주기 위해서요

00:01:16.214 --> 00:01:22.348
훨씬 낫네요

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

00:01:26.653 --> 00:01:29.192
사이드바같은 경우처럼요

00:01:29.192 --> 00:01:31.844
이 링크들은 어떤가요?

00:01:31.844 --> 00:01:35.220
이 링크들을 오른쪽에 띄울 수 있어요

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

00:01:38.098 --> 00:01:41.361
오른쪽에 띄우죠

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

00:01:44.370 --> 00:01:46.809
생각했던 것 보다 말이죠

00:01:46.809 --> 00:01:50.515
폭을 30%로 제한할게요

00:01:50.515 --> 00:01:55.076
그러면 이것은 항상 페이지의 
30%만 차지하게 되고

00:01:55.076 --> 00:01:59.523
페이지의 나머지가 70%를 채웁니다

00:01:59.523 --> 00:02:02.144
보통 우리가 ‘div를 띄우게 만들 때는
폭을 지정해 주어야 합니다

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

00:02:04.983 --> 00:02:07.198
주변에 아무것도 두를 수 없게 되요

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

00:02:11.486 --> 00:02:13.483
좋아요

00:02:13.483 --> 00:02:18.646
하단의 꼬리말에 Hopper의 연락처가 있어요

00:02:18.646 --> 00:02:22.140
그런데 사이드바와 겹쳐진 부분이 
어색해 보이네요

00:02:22.140 --> 00:02:24.133
이것은 사이드바가 둘러져 있기 때문이에요
(병행 배치됨)

00:02:24.133 --> 00:02:26.198
하지만 이것들은 겹쳐지지 않게 해야해요

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

00:02:28.203 --> 00:02:30.075
꼬리말이니까요

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

00:02:34.499 --> 00:02:38.135
이렇게 'clear: both'를 쓰면

00:02:38.135 --> 00:02:40.226
'clear:left'나 'clear:right'도 쓸 수 있어요

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

00:02:42.086 --> 00:02:44.602
오른쪽 부유 요소나 왼쪽 부유 요소같은

00:02:44.602 --> 00:02:47.660
하지만 보통은 양쪽 다 막아야 하므로

00:02:47.660 --> 00:02:49.394
'clear: both'를 씁니다

00:02:49.394 --> 00:02:52.377
조금은 진짜 웹페이지 같아졌네요

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

00:02:55.139 --> 00:03:00.311
이제 여러분은 대부분의 웹페이지를 
만드는 CSS 속성을 배웠어요

00:03:00.311 --> 00:03:04.732
'div'를 width, height, padding, margin 
float, clear을 이용해 조립하면

00:03:04.732 --> 00:03:08.732
여러분의 손끝에 수만 가지의 
웹페이지를 만들어낼 수 있답니다