WEBVTT

00:00:00.000 --> 00:00:02.233
이제 우리는
CSS를 이용해서

00:00:02.233 --> 00:00:04.233
어떤 것들을
이동시켜 볼 거에요

00:00:04.233 --> 00:00:06.004
그냥 옆에 나란히
놓는 것 말고요

00:00:06.004 --> 00:00:07.637
실제로
어떤 것들을

00:00:07.637 --> 00:00:09.029
서로 겹치게
하는 것 말이죠

00:00:09.029 --> 00:00:11.611
여기 웹페이지가 있어요

00:00:11.611 --> 00:00:15.521
헤더 몇 개와
이미지들

00:00:15.521 --> 00:00:18.069
그리고 여기 아래에
몇 개의 문단이 있어요

00:00:18.069 --> 00:00:20.155
이것들은
배치되어 있어요

00:00:20.155 --> 00:00:23.837
브라우저의
기본 배치대로요

00:00:24.212 --> 00:00:26.959
우리는 이걸 정적인
혹은 일반적인 배치라고 부르죠

00:00:26.959 --> 00:00:29.388
즉
줄 요소(inline)들은

00:00:29.388 --> 00:00:30.699
그러니까
이미지 같은 것들은

00:00:30.699 --> 00:00:32.297
왼쪽에서 오른쪽으로
배치되어 있고

00:00:32.297 --> 00:00:33.800
구역 요소들(block)들은

00:00:33.800 --> 00:00:35.490
그러니까 헤더나
문단 같은 것들은

00:00:35.490 --> 00:00:37.565
위에서부터 아래로
배치되어 있어요

00:00:37.565 --> 00:00:39.915
우리는 이런 배치 규칙을
바꿀 수 있어요

00:00:39.915 --> 00:00:42.670
CSS 위치 속성을
이용해서 말이죠

00:00:42.670 --> 00:00:45.621
이 풍경 이미지로
한번 해볼게요

00:00:45.621 --> 00:00:49.657
'position: '
라고 쓰고

00:00:49.657 --> 00:00:51.446
값으로는 relative를
쓰세요

00:00:51.446 --> 00:00:53.406
상대적인 위치
규칙이라는 것은

00:00:53.406 --> 00:00:55.407
일반적인 방식으로
배치하지만

00:00:55.407 --> 00:00:57.791
대략적인
위치는 주는 거에요

00:00:57.791 --> 00:01:00.156
브라우저에게
어느 정도로

00:01:00.156 --> 00:01:01.501
위치를 주고 싶은지
지정하려면

00:01:01.501 --> 00:01:03.140
우리는 어떤 조합을
사용해야 해요

00:01:03.140 --> 00:01:05.179
네 개의 새로운 CSS
속성으로 된 조합 말이죠

00:01:05.179 --> 00:01:07.425
위와 아래 그리고
왼쪽과 오른쪽으로요

00:01:07.425 --> 00:01:09.441
예를 들어
우리가 원하는 건

00:01:09.441 --> 00:01:11.875
아래 방향으로
20픽셀

00:01:11.875 --> 00:01:13.626
그러니까
top은 20픽셀

00:01:13.626 --> 00:01:15.222
그리고
10픽셀 옆으로

00:01:15.222 --> 00:01:16.675
그러니까
left는 10픽셀

00:01:16.675 --> 00:01:18.668
이건 좀
깔끔해 보이긴 하지만

00:01:18.668 --> 00:01:20.893
그렇게
깔끔하진 않아요

00:01:20.893 --> 00:01:23.472
저는 더 멋진 걸
보여주고 싶어요

00:01:23.472 --> 00:01:25.077
절대적 위치에요

00:01:25.077 --> 00:01:26.583
이 규칙은
요소들을

00:01:26.583 --> 00:01:28.525
일반적인 방법을
완전히 벗어나

00:01:28.525 --> 00:01:30.613
화면의 어디든
배치할 수 있어요

00:01:30.613 --> 00:01:31.664
이걸 하려면

00:01:31.664 --> 00:01:32.945
relative를

00:01:32.945 --> 00:01:34.042
absolute로 바꾸고

00:01:34.042 --> 00:01:35.199
이 풍경 그림에서요

00:01:35.199 --> 00:01:36.575
top과 left는
그대로 둘게요

00:01:36.575 --> 00:01:37.348
이제 보일거에요

00:01:37.348 --> 00:01:38.473
저 풍경 그림이

00:01:38.473 --> 00:01:41.425
다른 이미지와
'Dance Party'를 가리고 있죠

00:01:41.425 --> 00:01:42.772
이걸 이제
수정해볼거에요

00:01:42.772 --> 00:01:44.791
윈스턴 그림으로부터
시작해보죠

00:01:44.791 --> 00:01:48.456
윈스턴 그림에
규칙을 추가할 거에요

00:01:48.456 --> 00:01:52.096
그리고 윈스턴에게
절대 위치를 줄 거에요

00:01:52.096 --> 00:01:54.302
그럼 이렇게 하죠

00:01:54.302 --> 00:01:56.110
top은
40픽셀

00:01:56.110 --> 00:01:58.394
아니에요
top은 50픽셀

00:01:58.394 --> 00:02:00.055
left는
50픽셀

00:02:00.055 --> 00:02:02.204
괜찮아
보이네요

00:02:02.204 --> 00:02:05.202
호퍼도 위로
올라가고 싶어해요

00:02:05.617 --> 00:02:07.295
호퍼도
필요할 거에요

00:02:07.295 --> 00:02:11.241
절대 위치를요

00:02:11.241 --> 00:02:15.218
그리고
top은 30픽셀

00:02:15.218 --> 00:02:17.814
left는
60픽셀

00:02:17.814 --> 00:02:19.613
좋아요
제 목표는

00:02:19.613 --> 00:02:23.733
호퍼가 윈스턴 앞에서
춤추는 것처럼 보이게 하는거에요

00:02:23.733 --> 00:02:26.640
하지만 지금은
그렇게 보이지 않아요

00:02:26.640 --> 00:02:27.754
왜냐하면
윈스턴이

00:02:27.754 --> 00:02:30.358
호퍼의 위에
그려져 있기 때문이죠

00:02:30.358 --> 00:02:31.948
이걸 수정하려면

00:02:31.948 --> 00:02:34.926
실제 이미지 태그의
순서를 바꿀 수 있어요

00:02:34.926 --> 00:02:36.684
HTML에서의
순서 말이죠

00:02:36.684 --> 00:02:38.699
하지만
더 나은 방법은

00:02:38.699 --> 00:02:42.257
CSS의 z축 속성을
사용하는 거에요

00:02:42.257 --> 00:02:43.939
이걸 이용하면
브라우저에게

00:02:43.939 --> 00:02:45.755
요소들을 그릴 순서를
알려줄 수 있어요

00:02:45.755 --> 00:02:47.384
z축 순서를
다르게 해주면 돼요

00:02:48.247 --> 00:02:50.691
풍경 그림으로
시작해보죠

00:02:50.691 --> 00:02:53.268
z축 값으로
1을 줄거에요

00:02:53.268 --> 00:02:56.345
윈스턴은 그 위에
올라가니까 2를 주고

00:02:56.345 --> 00:02:59.054
호퍼는 그 위에
올라가니까 3을 줄게요

00:02:59.054 --> 00:03:00.081
좋아요!

00:03:00.081 --> 00:03:02.641
이제 호퍼는 윈스턴
앞에서 춤추고 있네요

00:03:02.641 --> 00:03:04.178
호퍼가 별로 좋아하지
않을지도 모르지만요

00:03:04.178 --> 00:03:05.239
그치만 호퍼는
춤춰야해요

00:03:05.239 --> 00:03:07.801
여기 헤딩이
아직 가려져있고

00:03:07.801 --> 00:03:09.991
그리고 문단들도
가려져 있어요

00:03:09.991 --> 00:03:12.450
그러면
이렇게 해보죠

00:03:12.450 --> 00:03:13.942
이걸 가지고

00:03:13.942 --> 00:03:16.886
저는 'Dance Party'가
가장 위에 있게 하고 싶어요

00:03:16.886 --> 00:03:18.401
그래서 여기도

00:03:18.401 --> 00:03:20.268
절대 위치를 줄거에요

00:03:20.268 --> 00:03:21.757
그리고 z축 값은
4를 주고요

00:03:21.757 --> 00:03:22.997
괜찮네요

00:03:22.997 --> 00:03:24.421
왼쪽으로
십 픽셀만 옮길게요

00:03:24.421 --> 00:03:25.252
살짝 옮겨줘요

00:03:25.252 --> 00:03:26.912
조금만 더요

00:03:26.912 --> 00:03:28.518
좋아요
괜찮네요

00:03:28.518 --> 00:03:29.688
이 노래 가사는

00:03:29.688 --> 00:03:31.113
전 사실
이 가사가

00:03:31.113 --> 00:03:32.816
가장 아래에
있었으면 좋겠어요

00:03:32.816 --> 00:03:35.525
그래서 저는

00:03:35.525 --> 00:03:38.219
상대적인 위치를
줘서

00:03:38.219 --> 00:03:39.468
위쪽 위치만
주는 거에요

00:03:39.468 --> 00:03:40.679
그러니까
그건

00:03:40.679 --> 00:03:42.574
이미지의
높이와 같겠네요

00:03:42.574 --> 00:03:45.119
그러면
220픽셀이겠네요

00:03:45.119 --> 00:03:48.425
좋아요
정말 괜찮아 보여요

00:03:48.425 --> 00:03:51.239
우리는 열광적인
댄스 파티를 열었어요

00:03:52.179 --> 00:03:53.822
이제 이 프로그램을
멈추고

00:03:53.822 --> 00:03:55.770
페이지를
스크롤 해보세요

00:03:55.770 --> 00:03:58.051
이 모든 것들이

00:03:58.051 --> 00:03:59.209
함께 움직이는게
보일 거에요

00:03:59.209 --> 00:04:00.619
가장 중요한 점은

00:04:00.619 --> 00:04:01.816
절대적 위치는

00:04:01.816 --> 00:04:04.053
웹페이지의 맨 위에
상대적이라는 거에요

00:04:04.053 --> 00:04:06.017
그러니까
웹페이지를 아래로 내리면

00:04:06.040 --> 00:04:07.733
top이 10픽셀
이었던 것들은

00:04:07.733 --> 00:04:10.550
화면에서
벗어날 거에요

00:04:10.550 --> 00:04:11.919
왜냐하면 여러분은

00:04:11.919 --> 00:04:14.640
웹페이지의 맨 위와
멀어지고 있으니까요

00:04:14.640 --> 00:04:15.807
다른 선택지는

00:04:15.807 --> 00:04:17.109
고정 위치에요

00:04:17.109 --> 00:04:20.035
이건 전혀 움직이지 않는
것처럼 보이게 해줄 거에요

00:04:20.354 --> 00:04:22.097
이걸 한번 해보고 싶다면

00:04:22.097 --> 00:04:25.681
h1을 'absolute'에서
'fixed'로 바꿔보죠

00:04:25.693 --> 00:04:29.073
이제 프로그램을 잠시 멈추고
스크롤을 해보세요

00:04:29.073 --> 00:04:30.625
그러면
보일 거에요

00:04:30.625 --> 00:04:33.678
'Dance Party'는
항상 같은 곳에 있다는걸요

00:04:33.678 --> 00:04:35.667
왜냐하면 이젠

00:04:35.667 --> 00:04:39.216
화면의 맨 위와
상대적이 되었으니까요

00:04:39.216 --> 00:04:40.852
바로 이 창요

00:04:40.852 --> 00:04:43.917
좋아요
우리는 이제

00:04:43.917 --> 00:04:45.941
세 개의 위치 속성을
사용하는 법을 배웠어요

00:04:45.941 --> 00:04:47.697
더 멋진 것들을
해볼 수 있을 때

00:04:47.697 --> 00:04:48.519
우리가 실제로

00:04:48.519 --> 00:04:51.071
절대위치나 고정위치를
사용할 수 있을 때요

00:04:51.071 --> 00:04:53.109
여러분은
이것들을

00:04:53.109 --> 00:04:54.183
게임을 만들 때
쓸 수 있어요

00:04:54.183 --> 00:04:55.233
제가 여기서
한 것 처럼요

00:04:55.233 --> 00:04:56.389
왜냐하면
여러분은

00:04:56.389 --> 00:04:58.864
브라우저의 모든 부분을
배치하고 싶을 거니까요

00:04:58.864 --> 00:05:00.229
하지만 이럴 때도
사용할 수 있어요

00:05:00.229 --> 00:05:01.634
일반적인
웹페이지에서

00:05:01.634 --> 00:05:02.826
예를 들어
칸아카데미 같은 곳 말이죠

00:05:02.826 --> 00:05:04.083
우리는 절대 위치를
이용할 수 있어요

00:05:04.083 --> 00:05:06.279
페이지 가운데의
팝업창을 만들 때 말이죠

00:05:06.279 --> 00:05:07.650
그리고 고정 위치를
이용할 수 있어요

00:05:07.650 --> 00:05:09.171
팀 페이지의
검색창에 말이죠

00:05:09.171 --> 00:05:11.813
그래서 스크롤해도
항상 보일 수 있게요

00:05:11.813 --> 00:05:14.232
여러분은
이 위치 배치를

00:05:14.232 --> 00:05:15.431
모든 웹페이지에서
사용하진 않을 거에요

00:05:15.431 --> 00:05:16.704
하지만
이걸 사용할 때면

00:05:16.704 --> 00:05:18.967
여러분은 이게 있어서
정말 기쁠거에요