< Return to Video

CSS floating elements

  • 0:00 - 0:05
    저는 칸 아카데미의 캐릭터인
    Hopper를 위한 웹페이지를 만들고 있어요
  • 0:05 - 0:10
    여기엔 이미지 하나와 링크 몇 개와 한 문단이 있어요
  • 0:10 - 0:16
    호퍼의 그림이 문단 옆에 있으면 더 좋을 것 같네요
  • 0:16 - 0:18
    그래서 이것을 잘라서
  • 0:18 - 0:20
    이 아래에 붙여볼게요
  • 0:20 - 0:24
    음.. 생각했던 것 보다 별로네요
  • 0:24 - 0:26
    글이 이미지의 바닥에서 시작해버리네요
  • 0:26 - 0:29
    저는 글이 이미지의 주변을 두르길 바랐는데요
  • 0:29 - 0:31
    신문이나 잡지처럼 말이죠
  • 0:31 - 0:34
    이를 위해서는 새로운 CSS 속성이 필요합니다
    'float'
  • 0:34 - 0:37
    이것으로 요소를 띄울 수 있어요
    (요소의 병렬 배치 가능)
  • 0:37 - 0:40
    이미지 주변에 글을 두르게 할 때 적합합니다
  • 0:40 - 0:44
    이제 위의 "pic"의 규칙에 'float:'을 추가하고
  • 0:44 - 0:48
    값은 그림을 어디에 배치하느냐에 따라 달라집니다
  • 0:48 - 0:51
    왼쪽인지 오른쪽인지
  • 0:51 - 0:53
    왼쪽으로 해보죠
  • 0:53 - 0:55
    완벽해요
  • 0:55 - 0:57
    아니, 완벽하진 않네요
  • 0:57 - 1:00
    그림과 글이 너무 가깝군요
  • 1:00 - 1:02
    그림과 글을 떼어놓기 위해 어떤 속성을
  • 1:02 - 1:05
    써야 했는지 기억하세요?
  • 1:05 - 1:08
    그건 우리가 막 배웠던 box model (박스 모델)의 일부인
  • 1:08 - 1:09
    Margin (여백)입니다
  • 1:09 - 1:14
    이 그림에 'margin: right'와
    'margin: bottom'을 추가해볼게요
  • 1:14 - 1:16
    숨 쉴 틈을 조금 주기 위해서요
  • 1:16 - 1:22
    훨씬 낫네요
  • 1:22 - 1:27
    그림이 아닌 요소들도 띄울 수 있답니다
  • 1:27 - 1:29
    사이드바같은 경우처럼요
  • 1:29 - 1:32
    이 링크들은 어떤가요?
  • 1:32 - 1:35
    이 링크들을 오른쪽에 띄울 수 있어요
  • 1:35 - 1:38
    먼저 '#hopper-links' 규칙을 추가하고
  • 1:38 - 1:41
    오른쪽에 띄우죠
  • 1:41 - 1:44
    띄우긴 했는데 너무 많은 폭을 차지하네요
  • 1:44 - 1:47
    생각했던 것 보다 말이죠
  • 1:47 - 1:51
    폭을 30%로 제한할게요
  • 1:51 - 1:55
    그러면 이것은 항상 페이지의
    30%만 차지하게 되고
  • 1:55 - 2:00
    페이지의 나머지가 70%를 채웁니다
  • 2:00 - 2:02
    보통 우리가 ‘div를 띄우게 만들 때는
    폭을 지정해 주어야 합니다
  • 2:02 - 2:05
    그렇지 않으면 'div'는 공간을 다 차지해버리고
  • 2:05 - 2:07
    주변에 아무것도 두를 수 없게 되요
  • 2:07 - 2:11
    여기 'margin: left'도 약간 주면 좋을 것 같네요
  • 2:11 - 2:13
    좋아요
  • 2:13 - 2:19
    하단의 꼬리말에 Hopper의 연락처가 있어요
  • 2:19 - 2:22
    그런데 사이드바와 겹쳐진 부분이
    어색해 보이네요
  • 2:22 - 2:24
    이것은 사이드바가 둘러져 있기 때문이에요
    (병행 배치됨)
  • 2:24 - 2:26
    하지만 이것들은 겹쳐지지 않게 해야해요
  • 2:26 - 2:28
    꼬리말은 항상 모든 요소의 아래에 두는게 좋아요
  • 2:28 - 2:30
    꼬리말이니까요
  • 2:30 - 2:34
    이것이 감싸지 않게 하려면, 'clear' 속성을 사용할 수 있어요
  • 2:34 - 2:38
    이렇게 'clear: both'를 쓰면
  • 2:38 - 2:40
    'clear:left'나 'clear:right'도 쓸 수 있어요
  • 2:40 - 2:42
    특정한 방향의 요소를 두르지 않게 할 때 말이죠
  • 2:42 - 2:45
    오른쪽 부유 요소나 왼쪽 부유 요소같은
  • 2:45 - 2:48
    하지만 보통은 양쪽 다 막아야 하므로
  • 2:48 - 2:49
    'clear: both'를 씁니다
  • 2:49 - 2:52
    조금은 진짜 웹페이지 같아졌네요
  • 2:52 - 2:55
    본문, 사이드바, 꼬리발이 있어요
  • 2:55 - 3:00
    이제 여러분은 대부분의 웹페이지를
    만드는 CSS 속성을 배웠어요
  • 3:00 - 3:05
    'div'를 width, height, padding, margin
    float, clear을 이용해 조립하면
  • 3:05 - 3:09
    여러분의 손끝에 수만 가지의
    웹페이지를 만들어낼 수 있답니다
Title:
CSS floating elements
Description:

more » « less
Video Language:
English
Duration:
03:09

Korean subtitles

Revisions