저는 칸 아카데미의 캐릭터인 
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을 이용해 조립하면

여러분의 손끝에 수만 가지의 
웹페이지를 만들어낼 수 있답니다