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

2
00:00:04,778 --> 00:00:10,418
여기엔 이미지 하나와 링크 몇 개와 한 문단이 있어요

3
00:00:10,418 --> 00:00:15,516
호퍼의 그림이 문단 옆에 있으면 더 좋을 것 같네요

4
00:00:15,516 --> 00:00:17,766
그래서 이것을 잘라서

5
00:00:17,766 --> 00:00:20,331
이 아래에 붙여볼게요

6
00:00:20,331 --> 00:00:23,821
음.. 생각했던 것 보다 별로네요

7
00:00:23,821 --> 00:00:26,053
글이 이미지의 바닥에서 시작해버리네요

8
00:00:26,053 --> 00:00:28,810
저는 글이 이미지의 주변을 두르길 바랐는데요

9
00:00:28,810 --> 00:00:31,113
신문이나 잡지처럼 말이죠

10
00:00:31,113 --> 00:00:34,140
이를 위해서는 새로운 CSS 속성이 필요합니다 
'float'

11
00:00:34,140 --> 00:00:37,250
이것으로 요소를 띄울 수 있어요
(요소의 병렬 배치 가능)

12
00:00:37,250 --> 00:00:40,025
이미지 주변에 글을 두르게 할 때 적합합니다

13
00:00:40,025 --> 00:00:44,297
이제 위의 "pic"의 규칙에 'float:'을 추가하고

14
00:00:44,297 --> 00:00:48,083
값은 그림을 어디에 배치하느냐에 따라 달라집니다

15
00:00:48,083 --> 00:00:50,772
왼쪽인지 오른쪽인지

16
00:00:50,772 --> 00:00:52,779
왼쪽으로 해보죠

17
00:00:52,779 --> 00:00:54,647
완벽해요

18
00:00:54,647 --> 00:00:57,352
아니, 완벽하진 않네요

19
00:00:57,352 --> 00:01:00,327
그림과 글이 너무 가깝군요

20
00:01:00,327 --> 00:01:02,431
그림과 글을 떼어놓기 위해 어떤 속성을

21
00:01:02,431 --> 00:01:04,793
써야 했는지 기억하세요?

22
00:01:04,793 --> 00:01:07,506
그건 우리가 막 배웠던 box model (박스 모델)의 일부인

23
00:01:07,506 --> 00:01:09,017
Margin (여백)입니다

24
00:01:09,017 --> 00:01:13,665
이 그림에 'margin: right'와
'margin: bottom'을 추가해볼게요

25
00:01:13,665 --> 00:01:16,214
숨 쉴 틈을 조금 주기 위해서요

26
00:01:16,214 --> 00:01:22,348
훨씬 낫네요

27
00:01:22,348 --> 00:01:26,653
그림이 아닌 요소들도 띄울 수 있답니다

28
00:01:26,653 --> 00:01:29,192
사이드바같은 경우처럼요

29
00:01:29,192 --> 00:01:31,844
이 링크들은 어떤가요?

30
00:01:31,844 --> 00:01:35,220
이 링크들을 오른쪽에 띄울 수 있어요

31
00:01:35,220 --> 00:01:38,098
먼저 '#hopper-links' 규칙을 추가하고

32
00:01:38,098 --> 00:01:41,361
오른쪽에 띄우죠

33
00:01:41,361 --> 00:01:44,370
띄우긴 했는데 너무 많은 폭을 차지하네요

34
00:01:44,370 --> 00:01:46,809
생각했던 것 보다 말이죠

35
00:01:46,809 --> 00:01:50,515
폭을 30%로 제한할게요

36
00:01:50,515 --> 00:01:55,076
그러면 이것은 항상 페이지의 
30%만 차지하게 되고

37
00:01:55,076 --> 00:01:59,523
페이지의 나머지가 70%를 채웁니다

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

39
00:02:02,144 --> 00:02:04,983
그렇지 않으면 'div'는 공간을 다 차지해버리고

40
00:02:04,983 --> 00:02:07,198
주변에 아무것도 두를 수 없게 되요

41
00:02:07,198 --> 00:02:11,486
여기 'margin: left'도 약간 주면 좋을 것 같네요

42
00:02:11,486 --> 00:02:13,483
좋아요

43
00:02:13,483 --> 00:02:18,646
하단의 꼬리말에 Hopper의 연락처가 있어요

44
00:02:18,646 --> 00:02:22,140
그런데 사이드바와 겹쳐진 부분이 
어색해 보이네요

45
00:02:22,140 --> 00:02:24,133
이것은 사이드바가 둘러져 있기 때문이에요
(병행 배치됨)

46
00:02:24,133 --> 00:02:26,198
하지만 이것들은 겹쳐지지 않게 해야해요

47
00:02:26,198 --> 00:02:28,203
꼬리말은 항상 모든 요소의 아래에 두는게 좋아요

48
00:02:28,203 --> 00:02:30,075
꼬리말이니까요

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

50
00:02:34,499 --> 00:02:38,135
이렇게 'clear: both'를 쓰면

51
00:02:38,135 --> 00:02:40,226
'clear:left'나 'clear:right'도 쓸 수 있어요

52
00:02:40,226 --> 00:02:42,086
특정한 방향의 요소를 두르지 않게 할 때 말이죠

53
00:02:42,086 --> 00:02:44,602
오른쪽 부유 요소나 왼쪽 부유 요소같은

54
00:02:44,602 --> 00:02:47,660
하지만 보통은 양쪽 다 막아야 하므로

55
00:02:47,660 --> 00:02:49,394
'clear: both'를 씁니다

56
00:02:49,394 --> 00:02:52,377
조금은 진짜 웹페이지 같아졌네요

57
00:02:52,377 --> 00:02:55,139
본문, 사이드바, 꼬리발이 있어요

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

59
00:03:00,311 --> 00:03:04,732
'div'를 width, height, padding, margin 
float, clear을 이용해 조립하면

60
00:03:04,732 --> 00:03:08,732
여러분의 손끝에 수만 가지의 
웹페이지를 만들어낼 수 있답니다