Return to Video

CSS 위치 배치

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

Korean subtitles

Incomplete

Revisions

Our website uses cookies for analysis purposes.