[HTML/CSS] CSS의 Float속성
[HTML/CSS] CSS의 Float속성
|
본 포스팅은 우선 CSS의 작성법 이해했다는 가정하에 작성되었습니다. 잘 모르겠으면 관련 포스팅을 참조해주세요. |
|
Float은 Position과 함께 레이아웃을 구성할때 많이 사용합니다. * Float : Left * Float : Right * Clear : Both |
|
태그 |
속성 |
속성값 |
비고 |
|
style |
float |
left |
왼쪽으로 배치 |
|
right |
오른쪽으로 배치 | ||
|
clear |
left, right, both |
float 제외 |
|
Float은 레이아웃을 구성하거나 이미지와 텍스트를 배치 할때도 자주 사용됩니다. Float은 Position의 Absolute처럼 문서의 흐름과 상관없이 위칳기 때문에 겹침이 발생합니다. |
|
|
|
|
|
보통 본문과 사이드바, 푸터가 한줄로 세워져 있는 형태를 1열, 본문과 사이드바가 나란하고 푸터가 하단에 있는 형태를 2열, 본문과 사이드바, 푸터가 나란히 있는 형태를 3열 배치라고 하는데 흔히 블로그에서 가장 많이 사용하는 2열을 기준으로 설명합니다. |
기본형태
|
가로 600px의 문서 안에 각 레이아웃을 넣었습니다. Float을 지정하지 않으면 문서 흐름에 맞에 블록이 쌓아집니다. |
Float 속성
|
"Content"에 Float : left를 지정해주고, "Sidebar"에 Float : right를 지정하여 위치를 잡았습니다. 그런데 Float은 문서의 흐름과 별개로 작동하기 때문에 "Footer"가 딸려올라오며 뒤로 겹쳐졌어요. 이럴때는 Clear속성을 사용해서 Float속성에서 제외시켜줘야 합니다. |
Clear 속성
|
Clear : right를 사용하여 Float : right에서 제외시켰더니 "Footer"가 "Sidebar"아래로 밀려나왔어요. |
|
이번엔 Clear : left로 Float : left에서 제외 시켰더니 원하는 형태로 나왔습니다. 하지만 우리가 웹문서를 다루다보면 "Content"가 "Sidebar"보다 작아질 때도 있을 것입니다. 그렇기 때문에 일반적으로는 Clear : both로 양쪽 모두의 Float에서 제외를 시켜주면 된답니다. |
메밀꽃 필 무렵여름 장이란 애시당초에 글러서, 해는 아직 중천에 있건만 장판은 벌써 쓸쓸하고 더운 햇발이 벌려 놓은 전 휘장 밑으로 등줄기를 훅훅 볶는다. 마을 사람들은 거지반 돌아간 뒤요, 팔리지 못한 나무꾼패가 길거리에 궁싯거리고들 있으나 석유병이나 받고 고깃마리나 사면 족할 이 축들을 바라고 언제까지든지 버티고 있을 법은 없다. 춥춥스럽게 날아드는 파리떼도 장난꾼 각다귀들도 귀찮다. 얼금뱅이요 왼손잡이인 드팀전의 허생원은 기어코 동업의 조선달을 나꾸어 보았다. "그만 거둘까?" "잘 생각했네. 봉평 장에서 한번이나 흐붓하게 사본 일 있었을까. 내일 대화 장에서나 한몫 벌어야겠네." "오늘 밤은 밤을 새서 걸어야 될걸." "달이 뜨렷다." 절렁절렁 소리를 내며 조선달이 그 날 산 돈을 따지는 것을 보고 허생원은 말뚝에서 넓은 휘장을 걷고 벌여놓았던 물건을 거두기 시작하였다. 무명 필과 주단 바리가 두 고리짝에 꼭 찼다. 멍석 위에는 천 조각이 어수선하게 남았다. |
|
텍스트와 이미지를 매칭할때도 <img src="url" style="float:right">같은 방식으로 이미지에 Float속성을 부여하여 사용 합니다. |
< 연습하기 >
