1
00:00:00,000 --> 00:00:02,233
이제 우리는
CSS를 이용해서

2
00:00:02,233 --> 00:00:04,233
어떤 것들을
이동시켜 볼 거에요

3
00:00:04,233 --> 00:00:06,004
그냥 옆에 나란히
놓는 것 말고요

4
00:00:06,004 --> 00:00:07,637
실제로
어떤 것들을

5
00:00:07,637 --> 00:00:09,029
서로 겹치게
하는 것 말이죠

6
00:00:09,029 --> 00:00:11,611
여기 웹페이지가 있어요

7
00:00:11,611 --> 00:00:15,521
헤더 몇 개와
이미지들

8
00:00:15,521 --> 00:00:18,069
그리고 여기 아래에
몇 개의 문단이 있어요

9
00:00:18,069 --> 00:00:20,155
이것들은
배치되어 있어요

10
00:00:20,155 --> 00:00:23,837
브라우저의
기본 배치대로요

11
00:00:24,212 --> 00:00:26,959
우리는 이걸 정적인
혹은 일반적인 배치라고 부르죠

12
00:00:26,959 --> 00:00:29,388
즉
줄 요소(inline)들은

13
00:00:29,388 --> 00:00:30,699
그러니까
이미지 같은 것들은

14
00:00:30,699 --> 00:00:32,297
왼쪽에서 오른쪽으로
배치되어 있고

15
00:00:32,297 --> 00:00:33,800
구역 요소들(block)들은

16
00:00:33,800 --> 00:00:35,490
그러니까 헤더나
문단 같은 것들은

17
00:00:35,490 --> 00:00:37,565
위에서부터 아래로
배치되어 있어요

18
00:00:37,565 --> 00:00:39,915
우리는 이런 배치 규칙을
바꿀 수 있어요

19
00:00:39,915 --> 00:00:42,670
CSS 위치 속성을
이용해서 말이죠

20
00:00:42,670 --> 00:00:45,621
이 풍경 이미지로
한번 해볼게요

21
00:00:45,621 --> 00:00:49,657
'position: '
라고 쓰고

22
00:00:49,657 --> 00:00:51,446
값으로는 relative를
쓰세요

23
00:00:51,446 --> 00:00:53,406
상대적인 위치
규칙이라는 것은

24
00:00:53,406 --> 00:00:55,407
일반적인 방식으로
배치하지만

25
00:00:55,407 --> 00:00:57,791
대략적인
위치는 주는 거에요

26
00:00:57,791 --> 00:01:00,156
브라우저에게
어느 정도로

27
00:01:00,156 --> 00:01:01,501
위치를 주고 싶은지
지정하려면

28
00:01:01,501 --> 00:01:03,140
우리는 어떤 조합을
사용해야 해요

29
00:01:03,140 --> 00:01:05,179
네 개의 새로운 CSS
속성으로 된 조합 말이죠

30
00:01:05,179 --> 00:01:07,425
위와 아래 그리고
왼쪽과 오른쪽으로요

31
00:01:07,425 --> 00:01:09,441
예를 들어
우리가 원하는 건

32
00:01:09,441 --> 00:01:11,875
아래 방향으로
20픽셀

33
00:01:11,875 --> 00:01:13,626
그러니까
top은 20픽셀

34
00:01:13,626 --> 00:01:15,222
그리고
10픽셀 옆으로

35
00:01:15,222 --> 00:01:16,675
그러니까
left는 10픽셀

36
00:01:16,675 --> 00:01:18,668
이건 좀
깔끔해 보이긴 하지만

37
00:01:18,668 --> 00:01:20,893
그렇게
깔끔하진 않아요

38
00:01:20,893 --> 00:01:23,472
저는 더 멋진 걸
보여주고 싶어요

39
00:01:23,472 --> 00:01:25,077
절대적 위치에요

40
00:01:25,077 --> 00:01:26,583
이 규칙은
요소들을

41
00:01:26,583 --> 00:01:28,525
일반적인 방법을
완전히 벗어나

42
00:01:28,525 --> 00:01:30,613
화면의 어디든
배치할 수 있어요

43
00:01:30,613 --> 00:01:31,664
이걸 하려면

44
00:01:31,664 --> 00:01:32,945
relative를

45
00:01:32,945 --> 00:01:34,042
absolute로 바꾸고

46
00:01:34,042 --> 00:01:35,199
이 풍경 그림에서요

47
00:01:35,199 --> 00:01:36,575
top과 left는
그대로 둘게요

48
00:01:36,575 --> 00:01:37,348
이제 보일거에요

49
00:01:37,348 --> 00:01:38,473
저 풍경 그림이

50
00:01:38,473 --> 00:01:41,425
다른 이미지와
'Dance Party'를 가리고 있죠

51
00:01:41,425 --> 00:01:42,772
이걸 이제
수정해볼거에요

52
00:01:42,772 --> 00:01:44,791
윈스턴 그림으로부터
시작해보죠

53
00:01:44,791 --> 00:01:48,456
윈스턴 그림에
규칙을 추가할 거에요

54
00:01:48,456 --> 00:01:52,096
그리고 윈스턴에게
절대 위치를 줄 거에요

55
00:01:52,096 --> 00:01:54,302
그럼 이렇게 하죠

56
00:01:54,302 --> 00:01:56,110
top은
40픽셀

57
00:01:56,110 --> 00:01:58,394
아니에요
top은 50픽셀

58
00:01:58,394 --> 00:02:00,055
left는
50픽셀

59
00:02:00,055 --> 00:02:02,204
괜찮아
보이네요

60
00:02:02,204 --> 00:02:05,202
호퍼도 위로
올라가고 싶어해요

61
00:02:05,617 --> 00:02:07,295
호퍼도
필요할 거에요

62
00:02:07,295 --> 00:02:11,241
절대 위치를요

63
00:02:11,241 --> 00:02:15,218
그리고
top은 30픽셀

64
00:02:15,218 --> 00:02:17,814
left는
60픽셀

65
00:02:17,814 --> 00:02:19,613
좋아요
제 목표는

66
00:02:19,613 --> 00:02:23,733
호퍼가 윈스턴 앞에서
춤추는 것처럼 보이게 하는거에요

67
00:02:23,733 --> 00:02:26,640
하지만 지금은
그렇게 보이지 않아요

68
00:02:26,640 --> 00:02:27,754
왜냐하면
윈스턴이

69
00:02:27,754 --> 00:02:30,358
호퍼의 위에
그려져 있기 때문이죠

70
00:02:30,358 --> 00:02:31,948
이걸 수정하려면

71
00:02:31,948 --> 00:02:34,926
실제 이미지 태그의
순서를 바꿀 수 있어요

72
00:02:34,926 --> 00:02:36,684
HTML에서의
순서 말이죠

73
00:02:36,684 --> 00:02:38,699
하지만
더 나은 방법은

74
00:02:38,699 --> 00:02:42,257
CSS의 z축 속성을
사용하는 거에요

75
00:02:42,257 --> 00:02:43,939
이걸 이용하면
브라우저에게

76
00:02:43,939 --> 00:02:45,755
요소들을 그릴 순서를
알려줄 수 있어요

77
00:02:45,755 --> 00:02:47,384
z축 순서를
다르게 해주면 돼요

78
00:02:48,247 --> 00:02:50,691
풍경 그림으로
시작해보죠

79
00:02:50,691 --> 00:02:53,268
z축 값으로
1을 줄거에요

80
00:02:53,268 --> 00:02:56,345
윈스턴은 그 위에
올라가니까 2를 주고

81
00:02:56,345 --> 00:02:59,054
호퍼는 그 위에
올라가니까 3을 줄게요

82
00:02:59,054 --> 00:03:00,081
좋아요!

83
00:03:00,081 --> 00:03:02,641
이제 호퍼는 윈스턴
앞에서 춤추고 있네요

84
00:03:02,641 --> 00:03:04,178
호퍼가 별로 좋아하지
않을지도 모르지만요

85
00:03:04,178 --> 00:03:05,239
그치만 호퍼는
춤춰야해요

86
00:03:05,239 --> 00:03:07,801
여기 헤딩이
아직 가려져있고

87
00:03:07,801 --> 00:03:09,991
그리고 문단들도
가려져 있어요

88
00:03:09,991 --> 00:03:12,450
그러면
이렇게 해보죠

89
00:03:12,450 --> 00:03:13,942
이걸 가지고

90
00:03:13,942 --> 00:03:16,886
저는 'Dance Party'가
가장 위에 있게 하고 싶어요

91
00:03:16,886 --> 00:03:18,401
그래서 여기도

92
00:03:18,401 --> 00:03:20,268
절대 위치를 줄거에요

93
00:03:20,268 --> 00:03:21,757
그리고 z축 값은
4를 주고요

94
00:03:21,757 --> 00:03:22,997
괜찮네요

95
00:03:22,997 --> 00:03:24,421
왼쪽으로
십 픽셀만 옮길게요

96
00:03:24,421 --> 00:03:25,252
살짝 옮겨줘요

97
00:03:25,252 --> 00:03:26,912
조금만 더요

98
00:03:26,912 --> 00:03:28,518
좋아요
괜찮네요

99
00:03:28,518 --> 00:03:29,688
이 노래 가사는

100
00:03:29,688 --> 00:03:31,113
전 사실
이 가사가

101
00:03:31,113 --> 00:03:32,816
가장 아래에
있었으면 좋겠어요

102
00:03:32,816 --> 00:03:35,525
그래서 저는

103
00:03:35,525 --> 00:03:38,219
상대적인 위치를
줘서

104
00:03:38,219 --> 00:03:39,468
위쪽 위치만
주는 거에요

105
00:03:39,468 --> 00:03:40,679
그러니까
그건

106
00:03:40,679 --> 00:03:42,574
이미지의
높이와 같겠네요

107
00:03:42,574 --> 00:03:45,119
그러면
220픽셀이겠네요

108
00:03:45,119 --> 00:03:48,425
좋아요
정말 괜찮아 보여요

109
00:03:48,425 --> 00:03:51,239
우리는 열광적인
댄스 파티를 열었어요

110
00:03:52,179 --> 00:03:53,822
이제 이 프로그램을
멈추고

111
00:03:53,822 --> 00:03:55,770
페이지를
스크롤 해보세요

112
00:03:55,770 --> 00:03:58,051
이 모든 것들이

113
00:03:58,051 --> 00:03:59,209
함께 움직이는게
보일 거에요

114
00:03:59,209 --> 00:04:00,619
가장 중요한 점은

115
00:04:00,619 --> 00:04:01,816
절대적 위치는

116
00:04:01,816 --> 00:04:04,053
웹페이지의 맨 위에
상대적이라는 거에요

117
00:04:04,053 --> 00:04:06,017
그러니까
웹페이지를 아래로 내리면

118
00:04:06,040 --> 00:04:07,733
top이 10픽셀
이었던 것들은

119
00:04:07,733 --> 00:04:10,550
화면에서
벗어날 거에요

120
00:04:10,550 --> 00:04:11,919
왜냐하면 여러분은

121
00:04:11,919 --> 00:04:14,640
웹페이지의 맨 위와
멀어지고 있으니까요

122
00:04:14,640 --> 00:04:15,807
다른 선택지는

123
00:04:15,807 --> 00:04:17,109
고정 위치에요

124
00:04:17,109 --> 00:04:20,035
이건 전혀 움직이지 않는
것처럼 보이게 해줄 거에요

125
00:04:20,354 --> 00:04:22,097
이걸 한번 해보고 싶다면

126
00:04:22,097 --> 00:04:25,681
h1을 'absolute'에서
'fixed'로 바꿔보죠

127
00:04:25,693 --> 00:04:29,073
이제 프로그램을 잠시 멈추고
스크롤을 해보세요

128
00:04:29,073 --> 00:04:30,625
그러면
보일 거에요

129
00:04:30,625 --> 00:04:33,678
'Dance Party'는
항상 같은 곳에 있다는걸요

130
00:04:33,678 --> 00:04:35,667
왜냐하면 이젠

131
00:04:35,667 --> 00:04:39,216
화면의 맨 위와
상대적이 되었으니까요

132
00:04:39,216 --> 00:04:40,852
바로 이 창요

133
00:04:40,852 --> 00:04:43,917
좋아요
우리는 이제

134
00:04:43,917 --> 00:04:45,941
세 개의 위치 속성을
사용하는 법을 배웠어요

135
00:04:45,941 --> 00:04:47,697
더 멋진 것들을
해볼 수 있을 때

136
00:04:47,697 --> 00:04:48,519
우리가 실제로

137
00:04:48,519 --> 00:04:51,071
절대위치나 고정위치를
사용할 수 있을 때요

138
00:04:51,071 --> 00:04:53,109
여러분은
이것들을

139
00:04:53,109 --> 00:04:54,183
게임을 만들 때
쓸 수 있어요

140
00:04:54,183 --> 00:04:55,233
제가 여기서
한 것 처럼요

141
00:04:55,233 --> 00:04:56,389
왜냐하면
여러분은

142
00:04:56,389 --> 00:04:58,864
브라우저의 모든 부분을
배치하고 싶을 거니까요

143
00:04:58,864 --> 00:05:00,229
하지만 이럴 때도
사용할 수 있어요

144
00:05:00,229 --> 00:05:01,634
일반적인
웹페이지에서

145
00:05:01,634 --> 00:05:02,826
예를 들어
칸아카데미 같은 곳 말이죠

146
00:05:02,826 --> 00:05:04,083
우리는 절대 위치를
이용할 수 있어요

147
00:05:04,083 --> 00:05:06,279
페이지 가운데의
팝업창을 만들 때 말이죠

148
00:05:06,279 --> 00:05:07,650
그리고 고정 위치를
이용할 수 있어요

149
00:05:07,650 --> 00:05:09,171
팀 페이지의
검색창에 말이죠

150
00:05:09,171 --> 00:05:11,813
그래서 스크롤해도
항상 보일 수 있게요

151
00:05:11,813 --> 00:05:14,232
여러분은
이 위치 배치를

152
00:05:14,232 --> 00:05:15,431
모든 웹페이지에서
사용하진 않을 거에요

153
00:05:15,431 --> 00:05:16,704
하지만
이걸 사용할 때면

154
00:05:16,704 --> 00:05:18,967
여러분은 이게 있어서
정말 기쁠거에요