이제 우리는 CSS를 이용해서
어떤 것들을 이동시켜 볼 거에요
그냥 옆에 나란히 놓는 것 말고요
실제로 어떤 것들을
서로 겹치게 하는 것 말이죠
여기 웹페이지가 있어요
헤더 몇 개와 이미지들
그리고 여기 아래에 몇 개의 문단이 있어요
이것들은 배치되어 있어요
브라우저의 기본 배치대로요
우리는 이걸 정적인 혹은 일반적인 배치라고 부르죠
즉 줄 요소(inline)들은
그러니까 이미지 같은 것들은
왼쪽에서 오른쪽으로 배치되어 있고
구역 요소들(block)들은
그러니까 헤더나 문단 같은 것들은
위에서부터 아래로 배치되어 있어요
우리는 이런 배치 규칙을 바꿀 수 있어요
CSS 위치 속성을 이용해서 말이죠
이 풍경 이미지로 한번 해볼게요
'position: ' 라고 쓰고
값으로는 relative를 쓰세요
상대적인 위치 규칙이라는 것은
일반적인 방식으로 배치하지만
대략적인 위치는 주는 거에요
브라우저에게 어느 정도로
위치를 주고 싶은지 지정하려면
우리는 어떤 조합을 사용해야 해요
네 개의 새로운 CSS 속성으로 된 조합 말이죠
위와 아래 그리고 왼쪽과 오른쪽으로요
예를 들어 우리가 원하는 건
아래 방향으로 20픽셀
그러니까 top은 20픽셀
그리고 10픽셀 옆으로
그러니까 left는 10픽셀
이건 좀 깔끔해 보이긴 하지만
그렇게 깔끔하진 않아요
저는 더 멋진 걸 보여주고 싶어요
절대적 위치에요
이 규칙은 요소들을
일반적인 방법을 완전히 벗어나
화면의 어디든 배치할 수 있어요
이걸 하려면
relative를
absolute로 바꾸고
이 풍경 그림에서요
top과 left는 그대로 둘게요
이제 보일거에요
저 풍경 그림이
다른 이미지와 'Dance Party'를 가리고 있죠
이걸 이제 수정해볼거에요
윈스턴 그림으로부터 시작해보죠
윈스턴 그림에 규칙을 추가할 거에요
그리고 윈스턴에게 절대 위치를 줄 거에요
그럼 이렇게 하죠
top은 40픽셀
아니에요 top은 50픽셀
left는 50픽셀
괜찮아 보이네요
호퍼도 위로 올라가고 싶어해요
호퍼도 필요할 거에요
절대 위치를요
그리고 top은 30픽셀
left는 60픽셀
좋아요 제 목표는
호퍼가 윈스턴 앞에서 춤추는 것처럼 보이게 하는거에요
하지만 지금은 그렇게 보이지 않아요
왜냐하면 윈스턴이
호퍼의 위에 그려져 있기 때문이죠
이걸 수정하려면
실제 이미지 태그의 순서를 바꿀 수 있어요
HTML에서의 순서 말이죠
하지만 더 나은 방법은
CSS의 z축 속성을 사용하는 거에요
이걸 이용하면 브라우저에게
요소들을 그릴 순서를 알려줄 수 있어요
z축 순서를 다르게 해주면 돼요
풍경 그림으로 시작해보죠
z축 값으로 1을 줄거에요
윈스턴은 그 위에 올라가니까 2를 주고
호퍼는 그 위에 올라가니까 3을 줄게요
좋아요!
이제 호퍼는 윈스턴 앞에서 춤추고 있네요
호퍼가 별로 좋아하지 않을지도 모르지만요
그치만 호퍼는 춤춰야해요
여기 헤딩이 아직 가려져있고
그리고 문단들도 가려져 있어요
그러면 이렇게 해보죠
이걸 가지고
저는 'Dance Party'가 가장 위에 있게 하고 싶어요
그래서 여기도
절대 위치를 줄거에요
그리고 z축 값은 4를 주고요
괜찮네요
왼쪽으로 십 픽셀만 옮길게요
살짝 옮겨줘요
조금만 더요
좋아요 괜찮네요
이 노래 가사는
전 사실 이 가사가
가장 아래에 있었으면 좋겠어요
그래서 저는
상대적인 위치를 줘서
위쪽 위치만 주는 거에요
그러니까 그건
이미지의 높이와 같겠네요
그러면 220픽셀이겠네요
좋아요 정말 괜찮아 보여요
우리는 열광적인 댄스 파티를 열었어요
이제 이 프로그램을 멈추고
페이지를 스크롤 해보세요
이 모든 것들이
함께 움직이는게 보일 거에요
가장 중요한 점은
절대적 위치는
웹페이지의 맨 위에 상대적이라는 거에요
그러니까 웹페이지를 아래로 내리면
top이 10픽셀 이었던 것들은
화면에서 벗어날 거에요
왜냐하면 여러분은
웹페이지의 맨 위와 멀어지고 있으니까요
다른 선택지는
고정 위치에요
이건 전혀 움직이지 않는 것처럼 보이게 해줄 거에요
이걸 한번 해보고 싶다면
h1을 'absolute'에서 'fixed'로 바꿔보죠
이제 프로그램을 잠시 멈추고 스크롤을 해보세요
그러면 보일 거에요
'Dance Party'는 항상 같은 곳에 있다는걸요
왜냐하면 이젠
화면의 맨 위와 상대적이 되었으니까요
바로 이 창요
좋아요 우리는 이제
세 개의 위치 속성을 사용하는 법을 배웠어요
더 멋진 것들을 해볼 수 있을 때
우리가 실제로
절대위치나 고정위치를 사용할 수 있을 때요
여러분은 이것들을
게임을 만들 때 쓸 수 있어요
제가 여기서 한 것 처럼요
왜냐하면 여러분은
브라우저의 모든 부분을 배치하고 싶을 거니까요
하지만 이럴 때도 사용할 수 있어요
일반적인 웹페이지에서
예를 들어 칸아카데미 같은 곳 말이죠
우리는 절대 위치를 이용할 수 있어요
페이지 가운데의 팝업창을 만들 때 말이죠
그리고 고정 위치를 이용할 수 있어요
팀 페이지의 검색창에 말이죠
그래서 스크롤해도 항상 보일 수 있게요
여러분은 이 위치 배치를
모든 웹페이지에서 사용하진 않을 거에요
하지만 이걸 사용할 때면
여러분은 이게 있어서 정말 기쁠거에요