0:00:00.000,0:00:02.233
이제 우리는[br]CSS를 이용해서

0:00:02.233,0:00:04.233
어떤 것들을[br]이동시켜 볼 거에요

0:00:04.233,0:00:06.004
그냥 옆에 나란히[br]놓는 것 말고요

0:00:06.004,0:00:07.637
실제로[br]어떤 것들을

0:00:07.637,0:00:09.029
서로 겹치게[br]하는 것 말이죠

0:00:09.029,0:00:11.611
여기 웹페이지가 있어요

0:00:11.611,0:00:15.521
헤더 몇 개와[br]이미지들

0:00:15.521,0:00:18.069
그리고 여기 아래에[br]몇 개의 문단이 있어요

0:00:18.069,0:00:20.155
이것들은[br]배치되어 있어요

0:00:20.155,0:00:23.837
브라우저의[br]기본 배치대로요

0:00:24.212,0:00:26.959
우리는 이걸 정적인[br]혹은 일반적인 배치라고 부르죠

0:00:26.959,0:00:29.388
즉[br]줄 요소(inline)들은

0:00:29.388,0:00:30.699
그러니까[br]이미지 같은 것들은

0:00:30.699,0:00:32.297
왼쪽에서 오른쪽으로[br]배치되어 있고

0:00:32.297,0:00:33.800
구역 요소들(block)들은

0:00:33.800,0:00:35.490
그러니까 헤더나[br]문단 같은 것들은

0:00:35.490,0:00:37.565
위에서부터 아래로[br]배치되어 있어요

0:00:37.565,0:00:39.915
우리는 이런 배치 규칙을[br]바꿀 수 있어요

0:00:39.915,0:00:42.670
CSS 위치 속성을[br]이용해서 말이죠

0:00:42.670,0:00:45.621
이 풍경 이미지로[br]한번 해볼게요

0:00:45.621,0:00:49.657
'position: '[br]라고 쓰고

0:00:49.657,0:00:51.446
값으로는 relative를[br]쓰세요

0:00:51.446,0:00:53.406
상대적인 위치[br]규칙이라는 것은

0:00:53.406,0:00:55.407
일반적인 방식으로[br]배치하지만

0:00:55.407,0:00:57.791
대략적인[br]위치는 주는 거에요

0:00:57.791,0:01:00.156
브라우저에게[br]어느 정도로

0:01:00.156,0:01:01.501
위치를 주고 싶은지[br]지정하려면

0:01:01.501,0:01:03.140
우리는 어떤 조합을[br]사용해야 해요

0:01:03.140,0:01:05.179
네 개의 새로운 CSS[br]속성으로 된 조합 말이죠

0:01:05.179,0:01:07.425
위와 아래 그리고[br]왼쪽과 오른쪽으로요

0:01:07.425,0:01:09.441
예를 들어[br]우리가 원하는 건

0:01:09.441,0:01:11.875
아래 방향으로[br]20픽셀

0:01:11.875,0:01:13.626
그러니까[br]top은 20픽셀

0:01:13.626,0:01:15.222
그리고[br]10픽셀 옆으로

0:01:15.222,0:01:16.675
그러니까[br]left는 10픽셀

0:01:16.675,0:01:18.668
이건 좀[br]깔끔해 보이긴 하지만

0:01:18.668,0:01:20.893
그렇게[br]깔끔하진 않아요

0:01:20.893,0:01:23.472
저는 더 멋진 걸[br]보여주고 싶어요

0:01:23.472,0:01:25.077
절대적 위치에요

0:01:25.077,0:01:26.583
이 규칙은[br]요소들을

0:01:26.583,0:01:28.525
일반적인 방법을[br]완전히 벗어나

0:01:28.525,0:01:30.613
화면의 어디든[br]배치할 수 있어요

0:01:30.613,0:01:31.664
이걸 하려면

0:01:31.664,0:01:32.945
relative를

0:01:32.945,0:01:34.042
absolute로 바꾸고

0:01:34.042,0:01:35.199
이 풍경 그림에서요

0:01:35.199,0:01:36.575
top과 left는[br]그대로 둘게요

0:01:36.575,0:01:37.348
이제 보일거에요

0:01:37.348,0:01:38.473
저 풍경 그림이

0:01:38.473,0:01:41.425
다른 이미지와[br]'Dance Party'를 가리고 있죠

0:01:41.425,0:01:42.772
이걸 이제[br]수정해볼거에요

0:01:42.772,0:01:44.791
윈스턴 그림으로부터[br]시작해보죠

0:01:44.791,0:01:48.456
윈스턴 그림에[br]규칙을 추가할 거에요

0:01:48.456,0:01:52.096
그리고 윈스턴에게[br]절대 위치를 줄 거에요

0:01:52.096,0:01:54.302
그럼 이렇게 하죠

0:01:54.302,0:01:56.110
top은[br]40픽셀

0:01:56.110,0:01:58.394
아니에요[br]top은 50픽셀

0:01:58.394,0:02:00.055
left는[br]50픽셀

0:02:00.055,0:02:02.204
괜찮아[br]보이네요

0:02:02.204,0:02:05.202
호퍼도 위로[br]올라가고 싶어해요

0:02:05.617,0:02:07.295
호퍼도[br]필요할 거에요

0:02:07.295,0:02:11.241
절대 위치를요

0:02:11.241,0:02:15.218
그리고[br]top은 30픽셀

0:02:15.218,0:02:17.814
left는[br]60픽셀

0:02:17.814,0:02:19.613
좋아요[br]제 목표는

0:02:19.613,0:02:23.733
호퍼가 윈스턴 앞에서[br]춤추는 것처럼 보이게 하는거에요

0:02:23.733,0:02:26.640
하지만 지금은[br]그렇게 보이지 않아요

0:02:26.640,0:02:27.754
왜냐하면[br]윈스턴이

0:02:27.754,0:02:30.358
호퍼의 위에[br]그려져 있기 때문이죠

0:02:30.358,0:02:31.948
이걸 수정하려면

0:02:31.948,0:02:34.926
실제 이미지 태그의[br]순서를 바꿀 수 있어요

0:02:34.926,0:02:36.684
HTML에서의[br]순서 말이죠

0:02:36.684,0:02:38.699
하지만[br]더 나은 방법은

0:02:38.699,0:02:42.257
CSS의 z축 속성을[br]사용하는 거에요

0:02:42.257,0:02:43.939
이걸 이용하면[br]브라우저에게

0:02:43.939,0:02:45.755
요소들을 그릴 순서를[br]알려줄 수 있어요

0:02:45.755,0:02:47.384
z축 순서를[br]다르게 해주면 돼요

0:02:48.247,0:02:50.691
풍경 그림으로[br]시작해보죠

0:02:50.691,0:02:53.268
z축 값으로[br]1을 줄거에요

0:02:53.268,0:02:56.345
윈스턴은 그 위에[br]올라가니까 2를 주고

0:02:56.345,0:02:59.054
호퍼는 그 위에[br]올라가니까 3을 줄게요

0:02:59.054,0:03:00.081
좋아요!

0:03:00.081,0:03:02.641
이제 호퍼는 윈스턴[br]앞에서 춤추고 있네요

0:03:02.641,0:03:04.178
호퍼가 별로 좋아하지[br]않을지도 모르지만요

0:03:04.178,0:03:05.239
그치만 호퍼는[br]춤춰야해요

0:03:05.239,0:03:07.801
여기 헤딩이[br]아직 가려져있고

0:03:07.801,0:03:09.991
그리고 문단들도[br]가려져 있어요

0:03:09.991,0:03:12.450
그러면[br]이렇게 해보죠

0:03:12.450,0:03:13.942
이걸 가지고

0:03:13.942,0:03:16.886
저는 'Dance Party'가[br]가장 위에 있게 하고 싶어요

0:03:16.886,0:03:18.401
그래서 여기도

0:03:18.401,0:03:20.268
절대 위치를 줄거에요

0:03:20.268,0:03:21.757
그리고 z축 값은[br]4를 주고요

0:03:21.757,0:03:22.997
괜찮네요

0:03:22.997,0:03:24.421
왼쪽으로[br]십 픽셀만 옮길게요

0:03:24.421,0:03:25.252
살짝 옮겨줘요

0:03:25.252,0:03:26.912
조금만 더요

0:03:26.912,0:03:28.518
좋아요[br]괜찮네요

0:03:28.518,0:03:29.688
이 노래 가사는

0:03:29.688,0:03:31.113
전 사실[br]이 가사가

0:03:31.113,0:03:32.816
가장 아래에[br]있었으면 좋겠어요

0:03:32.816,0:03:35.525
그래서 저는

0:03:35.525,0:03:38.219
상대적인 위치를[br]줘서

0:03:38.219,0:03:39.468
위쪽 위치만[br]주는 거에요

0:03:39.468,0:03:40.679
그러니까[br]그건

0:03:40.679,0:03:42.574
이미지의[br]높이와 같겠네요

0:03:42.574,0:03:45.119
그러면[br]220픽셀이겠네요

0:03:45.119,0:03:48.425
좋아요[br]정말 괜찮아 보여요

0:03:48.425,0:03:51.239
우리는 열광적인[br]댄스 파티를 열었어요

0:03:52.179,0:03:53.822
이제 이 프로그램을[br]멈추고

0:03:53.822,0:03:55.770
페이지를[br]스크롤 해보세요

0:03:55.770,0:03:58.051
이 모든 것들이

0:03:58.051,0:03:59.209
함께 움직이는게[br]보일 거에요

0:03:59.209,0:04:00.619
가장 중요한 점은

0:04:00.619,0:04:01.816
절대적 위치는

0:04:01.816,0:04:04.053
웹페이지의 맨 위에[br]상대적이라는 거에요

0:04:04.053,0:04:06.017
그러니까[br]웹페이지를 아래로 내리면

0:04:06.040,0:04:07.733
top이 10픽셀[br]이었던 것들은

0:04:07.733,0:04:10.550
화면에서[br]벗어날 거에요

0:04:10.550,0:04:11.919
왜냐하면 여러분은

0:04:11.919,0:04:14.640
웹페이지의 맨 위와[br]멀어지고 있으니까요

0:04:14.640,0:04:15.807
다른 선택지는

0:04:15.807,0:04:17.109
고정 위치에요

0:04:17.109,0:04:20.035
이건 전혀 움직이지 않는[br]것처럼 보이게 해줄 거에요

0:04:20.354,0:04:22.097
이걸 한번 해보고 싶다면

0:04:22.097,0:04:25.681
h1을 'absolute'에서[br]'fixed'로 바꿔보죠

0:04:25.693,0:04:29.073
이제 프로그램을 잠시 멈추고[br]스크롤을 해보세요

0:04:29.073,0:04:30.625
그러면[br]보일 거에요

0:04:30.625,0:04:33.678
'Dance Party'는[br]항상 같은 곳에 있다는걸요

0:04:33.678,0:04:35.667
왜냐하면 이젠

0:04:35.667,0:04:39.216
화면의 맨 위와[br]상대적이 되었으니까요

0:04:39.216,0:04:40.852
바로 이 창요

0:04:40.852,0:04:43.917
좋아요[br]우리는 이제

0:04:43.917,0:04:45.941
세 개의 위치 속성을[br]사용하는 법을 배웠어요

0:04:45.941,0:04:47.697
더 멋진 것들을[br]해볼 수 있을 때

0:04:47.697,0:04:48.519
우리가 실제로

0:04:48.519,0:04:51.071
절대위치나 고정위치를[br]사용할 수 있을 때요

0:04:51.071,0:04:53.109
여러분은[br]이것들을

0:04:53.109,0:04:54.183
게임을 만들 때[br]쓸 수 있어요

0:04:54.183,0:04:55.233
제가 여기서[br]한 것 처럼요

0:04:55.233,0:04:56.389
왜냐하면[br]여러분은

0:04:56.389,0:04:58.864
브라우저의 모든 부분을[br]배치하고 싶을 거니까요

0:04:58.864,0:05:00.229
하지만 이럴 때도[br]사용할 수 있어요

0:05:00.229,0:05:01.634
일반적인[br]웹페이지에서

0:05:01.634,0:05:02.826
예를 들어[br]칸아카데미 같은 곳 말이죠

0:05:02.826,0:05:04.083
우리는 절대 위치를[br]이용할 수 있어요

0:05:04.083,0:05:06.279
페이지 가운데의[br]팝업창을 만들 때 말이죠

0:05:06.279,0:05:07.650
그리고 고정 위치를[br]이용할 수 있어요

0:05:07.650,0:05:09.171
팀 페이지의[br]검색창에 말이죠

0:05:09.171,0:05:11.813
그래서 스크롤해도[br]항상 보일 수 있게요

0:05:11.813,0:05:14.232
여러분은[br]이 위치 배치를

0:05:14.232,0:05:15.431
모든 웹페이지에서[br]사용하진 않을 거에요

0:05:15.431,0:05:16.704
하지만[br]이걸 사용할 때면

0:05:16.704,0:05:18.967
여러분은 이게 있어서[br]정말 기쁠거에요