[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.14,0:00:04.78,Default,,0000,0000,0000,,저는 칸 아카데미의 캐릭터인 \NHopper를 위한 웹페이지를 만들고 있어요
Dialogue: 0,0:00:04.78,0:00:10.42,Default,,0000,0000,0000,,여기엔 이미지 하나와 링크 몇 개와 한 문단이 있어요
Dialogue: 0,0:00:10.42,0:00:15.52,Default,,0000,0000,0000,,호퍼의 그림이 문단 옆에 있으면 더 좋을 것 같네요
Dialogue: 0,0:00:15.52,0:00:17.77,Default,,0000,0000,0000,,그래서 이것을 잘라서
Dialogue: 0,0:00:17.77,0:00:20.33,Default,,0000,0000,0000,,이 아래에 붙여볼게요
Dialogue: 0,0:00:20.33,0:00:23.82,Default,,0000,0000,0000,,음.. 생각했던 것 보다 별로네요
Dialogue: 0,0:00:23.82,0:00:26.05,Default,,0000,0000,0000,,글이 이미지의 바닥에서 시작해버리네요
Dialogue: 0,0:00:26.05,0:00:28.81,Default,,0000,0000,0000,,저는 글이 이미지의 주변을 두르길 바랐는데요
Dialogue: 0,0:00:28.81,0:00:31.11,Default,,0000,0000,0000,,신문이나 잡지처럼 말이죠
Dialogue: 0,0:00:31.11,0:00:34.14,Default,,0000,0000,0000,,이를 위해서는 새로운 CSS 속성이 필요합니다 \N'float'
Dialogue: 0,0:00:34.14,0:00:37.25,Default,,0000,0000,0000,,이것으로 요소를 띄울 수 있어요\N(요소의 병렬 배치 가능)
Dialogue: 0,0:00:37.25,0:00:40.02,Default,,0000,0000,0000,,이미지 주변에 글을 두르게 할 때 적합합니다
Dialogue: 0,0:00:40.02,0:00:44.30,Default,,0000,0000,0000,,이제 위의 "pic"의 규칙에 'float:'을 추가하고
Dialogue: 0,0:00:44.30,0:00:48.08,Default,,0000,0000,0000,,값은 그림을 어디에 배치하느냐에 따라 달라집니다
Dialogue: 0,0:00:48.08,0:00:50.77,Default,,0000,0000,0000,,왼쪽인지 오른쪽인지
Dialogue: 0,0:00:50.77,0:00:52.78,Default,,0000,0000,0000,,왼쪽으로 해보죠
Dialogue: 0,0:00:52.78,0:00:54.65,Default,,0000,0000,0000,,완벽해요
Dialogue: 0,0:00:54.65,0:00:57.35,Default,,0000,0000,0000,,아니, 완벽하진 않네요
Dialogue: 0,0:00:57.35,0:01:00.33,Default,,0000,0000,0000,,그림과 글이 너무 가깝군요
Dialogue: 0,0:01:00.33,0:01:02.43,Default,,0000,0000,0000,,그림과 글을 떼어놓기 위해 어떤 속성을
Dialogue: 0,0:01:02.43,0:01:04.79,Default,,0000,0000,0000,,써야 했는지 기억하세요?
Dialogue: 0,0:01:04.79,0:01:07.51,Default,,0000,0000,0000,,그건 우리가 막 배웠던 box model (박스 모델)의 일부인
Dialogue: 0,0:01:07.51,0:01:09.02,Default,,0000,0000,0000,,Margin (여백)입니다
Dialogue: 0,0:01:09.02,0:01:13.66,Default,,0000,0000,0000,,이 그림에 'margin: right'와\N'margin: bottom'을 추가해볼게요
Dialogue: 0,0:01:13.66,0:01:16.21,Default,,0000,0000,0000,,숨 쉴 틈을 조금 주기 위해서요
Dialogue: 0,0:01:16.21,0:01:22.35,Default,,0000,0000,0000,,훨씬 낫네요
Dialogue: 0,0:01:22.35,0:01:26.65,Default,,0000,0000,0000,,그림이 아닌 요소들도 띄울 수 있답니다
Dialogue: 0,0:01:26.65,0:01:29.19,Default,,0000,0000,0000,,사이드바같은 경우처럼요
Dialogue: 0,0:01:29.19,0:01:31.84,Default,,0000,0000,0000,,이 링크들은 어떤가요?
Dialogue: 0,0:01:31.84,0:01:35.22,Default,,0000,0000,0000,,이 링크들을 오른쪽에 띄울 수 있어요
Dialogue: 0,0:01:35.22,0:01:38.10,Default,,0000,0000,0000,,먼저 '#hopper-links' 규칙을 추가하고
Dialogue: 0,0:01:38.10,0:01:41.36,Default,,0000,0000,0000,,오른쪽에 띄우죠
Dialogue: 0,0:01:41.36,0:01:44.37,Default,,0000,0000,0000,,띄우긴 했는데 너무 많은 폭을 차지하네요
Dialogue: 0,0:01:44.37,0:01:46.81,Default,,0000,0000,0000,,생각했던 것 보다 말이죠
Dialogue: 0,0:01:46.81,0:01:50.52,Default,,0000,0000,0000,,폭을 30%로 제한할게요
Dialogue: 0,0:01:50.52,0:01:55.08,Default,,0000,0000,0000,,그러면 이것은 항상 페이지의 \N30%만 차지하게 되고
Dialogue: 0,0:01:55.08,0:01:59.52,Default,,0000,0000,0000,,페이지의 나머지가 70%를 채웁니다
Dialogue: 0,0:01:59.52,0:02:02.14,Default,,0000,0000,0000,,보통 우리가 ‘div를 띄우게 만들 때는\N폭을 지정해 주어야 합니다
Dialogue: 0,0:02:02.14,0:02:04.98,Default,,0000,0000,0000,,그렇지 않으면 'div'는 공간을 다 차지해버리고
Dialogue: 0,0:02:04.98,0:02:07.20,Default,,0000,0000,0000,,주변에 아무것도 두를 수 없게 되요
Dialogue: 0,0:02:07.20,0:02:11.49,Default,,0000,0000,0000,,여기 'margin: left'도 약간 주면 좋을 것 같네요
Dialogue: 0,0:02:11.49,0:02:13.48,Default,,0000,0000,0000,,좋아요
Dialogue: 0,0:02:13.48,0:02:18.65,Default,,0000,0000,0000,,하단의 꼬리말에 Hopper의 연락처가 있어요
Dialogue: 0,0:02:18.65,0:02:22.14,Default,,0000,0000,0000,,그런데 사이드바와 겹쳐진 부분이 \N어색해 보이네요
Dialogue: 0,0:02:22.14,0:02:24.13,Default,,0000,0000,0000,,이것은 사이드바가 둘러져 있기 때문이에요\N(병행 배치됨)
Dialogue: 0,0:02:24.13,0:02:26.20,Default,,0000,0000,0000,,하지만 이것들은 겹쳐지지 않게 해야해요
Dialogue: 0,0:02:26.20,0:02:28.20,Default,,0000,0000,0000,,꼬리말은 항상 모든 요소의 아래에 두는게 좋아요
Dialogue: 0,0:02:28.20,0:02:30.08,Default,,0000,0000,0000,,꼬리말이니까요
Dialogue: 0,0:02:30.08,0:02:34.50,Default,,0000,0000,0000,,이것이 감싸지 않게 하려면, 'clear' 속성을 사용할 수 있어요
Dialogue: 0,0:02:34.50,0:02:38.14,Default,,0000,0000,0000,,이렇게 'clear: both'를 쓰면
Dialogue: 0,0:02:38.14,0:02:40.23,Default,,0000,0000,0000,,'clear:left'나 'clear:right'도 쓸 수 있어요
Dialogue: 0,0:02:40.23,0:02:42.09,Default,,0000,0000,0000,,특정한 방향의 요소를 두르지 않게 할 때 말이죠
Dialogue: 0,0:02:42.09,0:02:44.60,Default,,0000,0000,0000,,오른쪽 부유 요소나 왼쪽 부유 요소같은
Dialogue: 0,0:02:44.60,0:02:47.66,Default,,0000,0000,0000,,하지만 보통은 양쪽 다 막아야 하므로
Dialogue: 0,0:02:47.66,0:02:49.39,Default,,0000,0000,0000,,'clear: both'를 씁니다
Dialogue: 0,0:02:49.39,0:02:52.38,Default,,0000,0000,0000,,조금은 진짜 웹페이지 같아졌네요
Dialogue: 0,0:02:52.38,0:02:55.14,Default,,0000,0000,0000,,본문, 사이드바, 꼬리발이 있어요
Dialogue: 0,0:02:55.14,0:03:00.31,Default,,0000,0000,0000,,이제 여러분은 대부분의 웹페이지를 \N만드는 CSS 속성을 배웠어요
Dialogue: 0,0:03:00.31,0:03:04.73,Default,,0000,0000,0000,,'div'를 width, height, padding, margin \Nfloat, clear을 이용해 조립하면
Dialogue: 0,0:03:04.73,0:03:08.73,Default,,0000,0000,0000,,여러분의 손끝에 수만 가지의 \N웹페이지를 만들어낼 수 있답니다