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