[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:02.23,Default,,0000,0000,0000,,이제 우리는\NCSS를 이용해서
Dialogue: 0,0:00:02.23,0:00:04.23,Default,,0000,0000,0000,,어떤 것들을\N이동시켜 볼 거에요
Dialogue: 0,0:00:04.23,0:00:06.00,Default,,0000,0000,0000,,그냥 옆에 나란히\N놓는 것 말고요
Dialogue: 0,0:00:06.00,0:00:07.64,Default,,0000,0000,0000,,실제로\N어떤 것들을
Dialogue: 0,0:00:07.64,0:00:09.03,Default,,0000,0000,0000,,서로 겹치게\N하는 것 말이죠
Dialogue: 0,0:00:09.03,0:00:11.61,Default,,0000,0000,0000,,여기 웹페이지가 있어요
Dialogue: 0,0:00:11.61,0:00:15.52,Default,,0000,0000,0000,,헤더 몇 개와\N이미지들
Dialogue: 0,0:00:15.52,0:00:18.07,Default,,0000,0000,0000,,그리고 여기 아래에\N몇 개의 문단이 있어요
Dialogue: 0,0:00:18.07,0:00:20.16,Default,,0000,0000,0000,,이것들은\N배치되어 있어요
Dialogue: 0,0:00:20.16,0:00:23.84,Default,,0000,0000,0000,,브라우저의\N기본 배치대로요
Dialogue: 0,0:00:24.21,0:00:26.96,Default,,0000,0000,0000,,우리는 이걸 정적인\N혹은 일반적인 배치라고 부르죠
Dialogue: 0,0:00:26.96,0:00:29.39,Default,,0000,0000,0000,,즉\N줄 요소(inline)들은
Dialogue: 0,0:00:29.39,0:00:30.70,Default,,0000,0000,0000,,그러니까\N이미지 같은 것들은
Dialogue: 0,0:00:30.70,0:00:32.30,Default,,0000,0000,0000,,왼쪽에서 오른쪽으로\N배치되어 있고
Dialogue: 0,0:00:32.30,0:00:33.80,Default,,0000,0000,0000,,구역 요소들(block)들은
Dialogue: 0,0:00:33.80,0:00:35.49,Default,,0000,0000,0000,,그러니까 헤더나\N문단 같은 것들은
Dialogue: 0,0:00:35.49,0:00:37.56,Default,,0000,0000,0000,,위에서부터 아래로\N배치되어 있어요
Dialogue: 0,0:00:37.56,0:00:39.92,Default,,0000,0000,0000,,우리는 이런 배치 규칙을\N바꿀 수 있어요
Dialogue: 0,0:00:39.92,0:00:42.67,Default,,0000,0000,0000,,CSS 위치 속성을\N이용해서 말이죠
Dialogue: 0,0:00:42.67,0:00:45.62,Default,,0000,0000,0000,,이 풍경 이미지로\N한번 해볼게요
Dialogue: 0,0:00:45.62,0:00:49.66,Default,,0000,0000,0000,,'position: '\N라고 쓰고
Dialogue: 0,0:00:49.66,0:00:51.45,Default,,0000,0000,0000,,값으로는 relative를\N쓰세요
Dialogue: 0,0:00:51.45,0:00:53.41,Default,,0000,0000,0000,,상대적인 위치\N규칙이라는 것은
Dialogue: 0,0:00:53.41,0:00:55.41,Default,,0000,0000,0000,,일반적인 방식으로\N배치하지만
Dialogue: 0,0:00:55.41,0:00:57.79,Default,,0000,0000,0000,,대략적인\N위치는 주는 거에요
Dialogue: 0,0:00:57.79,0:01:00.16,Default,,0000,0000,0000,,브라우저에게\N어느 정도로
Dialogue: 0,0:01:00.16,0:01:01.50,Default,,0000,0000,0000,,위치를 주고 싶은지\N지정하려면
Dialogue: 0,0:01:01.50,0:01:03.14,Default,,0000,0000,0000,,우리는 어떤 조합을\N사용해야 해요
Dialogue: 0,0:01:03.14,0:01:05.18,Default,,0000,0000,0000,,네 개의 새로운 CSS\N속성으로 된 조합 말이죠
Dialogue: 0,0:01:05.18,0:01:07.42,Default,,0000,0000,0000,,위와 아래 그리고\N왼쪽과 오른쪽으로요
Dialogue: 0,0:01:07.42,0:01:09.44,Default,,0000,0000,0000,,예를 들어\N우리가 원하는 건
Dialogue: 0,0:01:09.44,0:01:11.88,Default,,0000,0000,0000,,아래 방향으로\N20픽셀
Dialogue: 0,0:01:11.88,0:01:13.63,Default,,0000,0000,0000,,그러니까\Ntop은 20픽셀
Dialogue: 0,0:01:13.63,0:01:15.22,Default,,0000,0000,0000,,그리고\N10픽셀 옆으로
Dialogue: 0,0:01:15.22,0:01:16.68,Default,,0000,0000,0000,,그러니까\Nleft는 10픽셀
Dialogue: 0,0:01:16.68,0:01:18.67,Default,,0000,0000,0000,,이건 좀\N깔끔해 보이긴 하지만
Dialogue: 0,0:01:18.67,0:01:20.89,Default,,0000,0000,0000,,그렇게\N깔끔하진 않아요
Dialogue: 0,0:01:20.89,0:01:23.47,Default,,0000,0000,0000,,저는 더 멋진 걸\N보여주고 싶어요
Dialogue: 0,0:01:23.47,0:01:25.08,Default,,0000,0000,0000,,절대적 위치에요
Dialogue: 0,0:01:25.08,0:01:26.58,Default,,0000,0000,0000,,이 규칙은\N요소들을
Dialogue: 0,0:01:26.58,0:01:28.52,Default,,0000,0000,0000,,일반적인 방법을\N완전히 벗어나
Dialogue: 0,0:01:28.52,0:01:30.61,Default,,0000,0000,0000,,화면의 어디든\N배치할 수 있어요
Dialogue: 0,0:01:30.61,0:01:31.66,Default,,0000,0000,0000,,이걸 하려면
Dialogue: 0,0:01:31.66,0:01:32.94,Default,,0000,0000,0000,,relative를
Dialogue: 0,0:01:32.94,0:01:34.04,Default,,0000,0000,0000,,absolute로 바꾸고
Dialogue: 0,0:01:34.04,0:01:35.20,Default,,0000,0000,0000,,이 풍경 그림에서요
Dialogue: 0,0:01:35.20,0:01:36.58,Default,,0000,0000,0000,,top과 left는\N그대로 둘게요
Dialogue: 0,0:01:36.58,0:01:37.35,Default,,0000,0000,0000,,이제 보일거에요
Dialogue: 0,0:01:37.35,0:01:38.47,Default,,0000,0000,0000,,저 풍경 그림이
Dialogue: 0,0:01:38.47,0:01:41.42,Default,,0000,0000,0000,,다른 이미지와\N'Dance Party'를 가리고 있죠
Dialogue: 0,0:01:41.42,0:01:42.77,Default,,0000,0000,0000,,이걸 이제\N수정해볼거에요
Dialogue: 0,0:01:42.77,0:01:44.79,Default,,0000,0000,0000,,윈스턴 그림으로부터\N시작해보죠
Dialogue: 0,0:01:44.79,0:01:48.46,Default,,0000,0000,0000,,윈스턴 그림에\N규칙을 추가할 거에요
Dialogue: 0,0:01:48.46,0:01:52.10,Default,,0000,0000,0000,,그리고 윈스턴에게\N절대 위치를 줄 거에요
Dialogue: 0,0:01:52.10,0:01:54.30,Default,,0000,0000,0000,,그럼 이렇게 하죠
Dialogue: 0,0:01:54.30,0:01:56.11,Default,,0000,0000,0000,,top은\N40픽셀
Dialogue: 0,0:01:56.11,0:01:58.39,Default,,0000,0000,0000,,아니에요\Ntop은 50픽셀
Dialogue: 0,0:01:58.39,0:02:00.06,Default,,0000,0000,0000,,left는\N50픽셀
Dialogue: 0,0:02:00.06,0:02:02.20,Default,,0000,0000,0000,,괜찮아\N보이네요
Dialogue: 0,0:02:02.20,0:02:05.20,Default,,0000,0000,0000,,호퍼도 위로\N올라가고 싶어해요
Dialogue: 0,0:02:05.62,0:02:07.30,Default,,0000,0000,0000,,호퍼도\N필요할 거에요
Dialogue: 0,0:02:07.30,0:02:11.24,Default,,0000,0000,0000,,절대 위치를요
Dialogue: 0,0:02:11.24,0:02:15.22,Default,,0000,0000,0000,,그리고\Ntop은 30픽셀
Dialogue: 0,0:02:15.22,0:02:17.81,Default,,0000,0000,0000,,left는\N60픽셀
Dialogue: 0,0:02:17.81,0:02:19.61,Default,,0000,0000,0000,,좋아요\N제 목표는
Dialogue: 0,0:02:19.61,0:02:23.73,Default,,0000,0000,0000,,호퍼가 윈스턴 앞에서\N춤추는 것처럼 보이게 하는거에요
Dialogue: 0,0:02:23.73,0:02:26.64,Default,,0000,0000,0000,,하지만 지금은\N그렇게 보이지 않아요
Dialogue: 0,0:02:26.64,0:02:27.75,Default,,0000,0000,0000,,왜냐하면\N윈스턴이
Dialogue: 0,0:02:27.75,0:02:30.36,Default,,0000,0000,0000,,호퍼의 위에\N그려져 있기 때문이죠
Dialogue: 0,0:02:30.36,0:02:31.95,Default,,0000,0000,0000,,이걸 수정하려면
Dialogue: 0,0:02:31.95,0:02:34.93,Default,,0000,0000,0000,,실제 이미지 태그의\N순서를 바꿀 수 있어요
Dialogue: 0,0:02:34.93,0:02:36.68,Default,,0000,0000,0000,,HTML에서의\N순서 말이죠
Dialogue: 0,0:02:36.68,0:02:38.70,Default,,0000,0000,0000,,하지만\N더 나은 방법은
Dialogue: 0,0:02:38.70,0:02:42.26,Default,,0000,0000,0000,,CSS의 z축 속성을\N사용하는 거에요
Dialogue: 0,0:02:42.26,0:02:43.94,Default,,0000,0000,0000,,이걸 이용하면\N브라우저에게
Dialogue: 0,0:02:43.94,0:02:45.76,Default,,0000,0000,0000,,요소들을 그릴 순서를\N알려줄 수 있어요
Dialogue: 0,0:02:45.76,0:02:47.38,Default,,0000,0000,0000,,z축 순서를\N다르게 해주면 돼요
Dialogue: 0,0:02:48.25,0:02:50.69,Default,,0000,0000,0000,,풍경 그림으로\N시작해보죠
Dialogue: 0,0:02:50.69,0:02:53.27,Default,,0000,0000,0000,,z축 값으로\N1을 줄거에요
Dialogue: 0,0:02:53.27,0:02:56.34,Default,,0000,0000,0000,,윈스턴은 그 위에\N올라가니까 2를 주고
Dialogue: 0,0:02:56.34,0:02:59.05,Default,,0000,0000,0000,,호퍼는 그 위에\N올라가니까 3을 줄게요
Dialogue: 0,0:02:59.05,0:03:00.08,Default,,0000,0000,0000,,좋아요!
Dialogue: 0,0:03:00.08,0:03:02.64,Default,,0000,0000,0000,,이제 호퍼는 윈스턴\N앞에서 춤추고 있네요
Dialogue: 0,0:03:02.64,0:03:04.18,Default,,0000,0000,0000,,호퍼가 별로 좋아하지\N않을지도 모르지만요
Dialogue: 0,0:03:04.18,0:03:05.24,Default,,0000,0000,0000,,그치만 호퍼는\N춤춰야해요
Dialogue: 0,0:03:05.24,0:03:07.80,Default,,0000,0000,0000,,여기 헤딩이\N아직 가려져있고
Dialogue: 0,0:03:07.80,0:03:09.99,Default,,0000,0000,0000,,그리고 문단들도\N가려져 있어요
Dialogue: 0,0:03:09.99,0:03:12.45,Default,,0000,0000,0000,,그러면\N이렇게 해보죠
Dialogue: 0,0:03:12.45,0:03:13.94,Default,,0000,0000,0000,,이걸 가지고
Dialogue: 0,0:03:13.94,0:03:16.89,Default,,0000,0000,0000,,저는 'Dance Party'가\N가장 위에 있게 하고 싶어요
Dialogue: 0,0:03:16.89,0:03:18.40,Default,,0000,0000,0000,,그래서 여기도
Dialogue: 0,0:03:18.40,0:03:20.27,Default,,0000,0000,0000,,절대 위치를 줄거에요
Dialogue: 0,0:03:20.27,0:03:21.76,Default,,0000,0000,0000,,그리고 z축 값은\N4를 주고요
Dialogue: 0,0:03:21.76,0:03:22.100,Default,,0000,0000,0000,,괜찮네요
Dialogue: 0,0:03:22.100,0:03:24.42,Default,,0000,0000,0000,,왼쪽으로\N십 픽셀만 옮길게요
Dialogue: 0,0:03:24.42,0:03:25.25,Default,,0000,0000,0000,,살짝 옮겨줘요
Dialogue: 0,0:03:25.25,0:03:26.91,Default,,0000,0000,0000,,조금만 더요
Dialogue: 0,0:03:26.91,0:03:28.52,Default,,0000,0000,0000,,좋아요\N괜찮네요
Dialogue: 0,0:03:28.52,0:03:29.69,Default,,0000,0000,0000,,이 노래 가사는
Dialogue: 0,0:03:29.69,0:03:31.11,Default,,0000,0000,0000,,전 사실\N이 가사가
Dialogue: 0,0:03:31.11,0:03:32.82,Default,,0000,0000,0000,,가장 아래에\N있었으면 좋겠어요
Dialogue: 0,0:03:32.82,0:03:35.52,Default,,0000,0000,0000,,그래서 저는
Dialogue: 0,0:03:35.52,0:03:38.22,Default,,0000,0000,0000,,상대적인 위치를\N줘서
Dialogue: 0,0:03:38.22,0:03:39.47,Default,,0000,0000,0000,,위쪽 위치만\N주는 거에요
Dialogue: 0,0:03:39.47,0:03:40.68,Default,,0000,0000,0000,,그러니까\N그건
Dialogue: 0,0:03:40.68,0:03:42.57,Default,,0000,0000,0000,,이미지의\N높이와 같겠네요
Dialogue: 0,0:03:42.57,0:03:45.12,Default,,0000,0000,0000,,그러면\N220픽셀이겠네요
Dialogue: 0,0:03:45.12,0:03:48.42,Default,,0000,0000,0000,,좋아요\N정말 괜찮아 보여요
Dialogue: 0,0:03:48.42,0:03:51.24,Default,,0000,0000,0000,,우리는 열광적인\N댄스 파티를 열었어요
Dialogue: 0,0:03:52.18,0:03:53.82,Default,,0000,0000,0000,,이제 이 프로그램을\N멈추고
Dialogue: 0,0:03:53.82,0:03:55.77,Default,,0000,0000,0000,,페이지를\N스크롤 해보세요
Dialogue: 0,0:03:55.77,0:03:58.05,Default,,0000,0000,0000,,이 모든 것들이
Dialogue: 0,0:03:58.05,0:03:59.21,Default,,0000,0000,0000,,함께 움직이는게\N보일 거에요
Dialogue: 0,0:03:59.21,0:04:00.62,Default,,0000,0000,0000,,가장 중요한 점은
Dialogue: 0,0:04:00.62,0:04:01.82,Default,,0000,0000,0000,,절대적 위치는
Dialogue: 0,0:04:01.82,0:04:04.05,Default,,0000,0000,0000,,웹페이지의 맨 위에\N상대적이라는 거에요
Dialogue: 0,0:04:04.05,0:04:06.02,Default,,0000,0000,0000,,그러니까\N웹페이지를 아래로 내리면
Dialogue: 0,0:04:06.04,0:04:07.73,Default,,0000,0000,0000,,top이 10픽셀\N이었던 것들은
Dialogue: 0,0:04:07.73,0:04:10.55,Default,,0000,0000,0000,,화면에서\N벗어날 거에요
Dialogue: 0,0:04:10.55,0:04:11.92,Default,,0000,0000,0000,,왜냐하면 여러분은
Dialogue: 0,0:04:11.92,0:04:14.64,Default,,0000,0000,0000,,웹페이지의 맨 위와\N멀어지고 있으니까요
Dialogue: 0,0:04:14.64,0:04:15.81,Default,,0000,0000,0000,,다른 선택지는
Dialogue: 0,0:04:15.81,0:04:17.11,Default,,0000,0000,0000,,고정 위치에요
Dialogue: 0,0:04:17.11,0:04:20.04,Default,,0000,0000,0000,,이건 전혀 움직이지 않는\N것처럼 보이게 해줄 거에요
Dialogue: 0,0:04:20.35,0:04:22.10,Default,,0000,0000,0000,,이걸 한번 해보고 싶다면
Dialogue: 0,0:04:22.10,0:04:25.68,Default,,0000,0000,0000,,h1을 'absolute'에서\N'fixed'로 바꿔보죠
Dialogue: 0,0:04:25.69,0:04:29.07,Default,,0000,0000,0000,,이제 프로그램을 잠시 멈추고\N스크롤을 해보세요
Dialogue: 0,0:04:29.07,0:04:30.62,Default,,0000,0000,0000,,그러면\N보일 거에요
Dialogue: 0,0:04:30.62,0:04:33.68,Default,,0000,0000,0000,,'Dance Party'는\N항상 같은 곳에 있다는걸요
Dialogue: 0,0:04:33.68,0:04:35.67,Default,,0000,0000,0000,,왜냐하면 이젠
Dialogue: 0,0:04:35.67,0:04:39.22,Default,,0000,0000,0000,,화면의 맨 위와\N상대적이 되었으니까요
Dialogue: 0,0:04:39.22,0:04:40.85,Default,,0000,0000,0000,,바로 이 창요
Dialogue: 0,0:04:40.85,0:04:43.92,Default,,0000,0000,0000,,좋아요\N우리는 이제
Dialogue: 0,0:04:43.92,0:04:45.94,Default,,0000,0000,0000,,세 개의 위치 속성을\N사용하는 법을 배웠어요
Dialogue: 0,0:04:45.94,0:04:47.70,Default,,0000,0000,0000,,더 멋진 것들을\N해볼 수 있을 때
Dialogue: 0,0:04:47.70,0:04:48.52,Default,,0000,0000,0000,,우리가 실제로
Dialogue: 0,0:04:48.52,0:04:51.07,Default,,0000,0000,0000,,절대위치나 고정위치를\N사용할 수 있을 때요
Dialogue: 0,0:04:51.07,0:04:53.11,Default,,0000,0000,0000,,여러분은\N이것들을
Dialogue: 0,0:04:53.11,0:04:54.18,Default,,0000,0000,0000,,게임을 만들 때\N쓸 수 있어요
Dialogue: 0,0:04:54.18,0:04:55.23,Default,,0000,0000,0000,,제가 여기서\N한 것 처럼요
Dialogue: 0,0:04:55.23,0:04:56.39,Default,,0000,0000,0000,,왜냐하면\N여러분은
Dialogue: 0,0:04:56.39,0:04:58.86,Default,,0000,0000,0000,,브라우저의 모든 부분을\N배치하고 싶을 거니까요
Dialogue: 0,0:04:58.86,0:05:00.23,Default,,0000,0000,0000,,하지만 이럴 때도\N사용할 수 있어요
Dialogue: 0,0:05:00.23,0:05:01.63,Default,,0000,0000,0000,,일반적인\N웹페이지에서
Dialogue: 0,0:05:01.63,0:05:02.83,Default,,0000,0000,0000,,예를 들어\N칸아카데미 같은 곳 말이죠
Dialogue: 0,0:05:02.83,0:05:04.08,Default,,0000,0000,0000,,우리는 절대 위치를\N이용할 수 있어요
Dialogue: 0,0:05:04.08,0:05:06.28,Default,,0000,0000,0000,,페이지 가운데의\N팝업창을 만들 때 말이죠
Dialogue: 0,0:05:06.28,0:05:07.65,Default,,0000,0000,0000,,그리고 고정 위치를\N이용할 수 있어요
Dialogue: 0,0:05:07.65,0:05:09.17,Default,,0000,0000,0000,,팀 페이지의\N검색창에 말이죠
Dialogue: 0,0:05:09.17,0:05:11.81,Default,,0000,0000,0000,,그래서 스크롤해도\N항상 보일 수 있게요
Dialogue: 0,0:05:11.81,0:05:14.23,Default,,0000,0000,0000,,여러분은\N이 위치 배치를
Dialogue: 0,0:05:14.23,0:05:15.43,Default,,0000,0000,0000,,모든 웹페이지에서\N사용하진 않을 거에요
Dialogue: 0,0:05:15.43,0:05:16.70,Default,,0000,0000,0000,,하지만\N이걸 사용할 때면
Dialogue: 0,0:05:16.70,0:05:18.97,Default,,0000,0000,0000,,여러분은 이게 있어서\N정말 기쁠거에요