[CSS] 9. Float

in Web on CSS


Layout



이제부터 배울 속성들은 블록들의 위치를 가로로 나열하거나

요소들을 겹치게 배열하는 ‘배치’에 관련된 요소들 입니다~!

배치에 관련된 요소들을 배운 후 한 번 레이아웃도 작성해보겠습니다.

float



float 속성은 박스를 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게 하는 속성인데,

세로로만 나열되던 블록들을 가로로 서로 어울려 배치할 때 필요한 것입니다.

float한 박스에 가로 사이즈를 함께 주어야 모든 구형 브라우저에서 크로스 브라우징됩니다.

크루스 브라우징은 각 브라우저들에서 한 웹페이지가 동일한 결과로 표현되는 것입니다.


  • left: 박스를 왼쪽에 배치하고 나머지 컨텐츠는 그 주변을 흐르게함


  • right: 박스를 오른쪽에 배치하고 나머지 컨텐츠는 그 주변을 흐르게함



다음 예제를 보시죠!

다음과 같은 단락들을 한 줄에 붙이고 싶이고 싶습니다~!


image



이럴 때 float을 사용하면 됩니다~! 


<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>float 속성 연습</title>
	<style>
	body{width:35%; border: 1px dashed #000;}
	img{width:100%; height:150px;}
	.con1, .con2, .con3{width:30%;float:left; margin: 0 10px;} /* 각 블록요소 con1, con2, con3을 왼쪽부터 차례로 배치 */
	
		
		
	</style>
</head>
<body>
<div class="content">
	<h1>귀여운 캐릭터들</h1>
	<div class="con1">
	<img src="C:\Users\Administrator\Desktop\img.png" alt="">
	<p>하늘을 바라보는 캐릭터이다. 무엇을 생각하는 것일까?</p>
	</div>
	
	<div class="con2">
	<img src="C:\Users\Administrator\Desktop\img2.png" alt="">
	<p>카카오톡의 이모티콘 라이언. 곰돌이처럼 생겼지만 사자이다.</p>
	</div>
	
	<div class="con3">
	<img src="C:\Users\Administrator\Desktop\img3.png" alt="">
	<p>귀엽게 생겼지만 전기를 내뿜는다. 피카피카피카</p>
	</div>
</div>
</body>
</html>



결과를 확인해보죠!


image



블록요소인 con1,con2,con3이 가로로 배열되는 것을 볼 수 있습니다!

그런데 부모인 content의 범위를 넘어버렸네요??

이처럼 박스 안의 내용이 박스보다 클 경우에는 overflow라는 속성을 사용해서 처리해주어야합니다.

위의 예 같은 경우에는 con1, con2 , con3의 부모 컨텐츠인 content에 overflow:hidden을 추가하면 됩니다. 


<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>float 속성 연습</title>
	<style>
	body{width:35%; border: 1px dashed #000;}
	img{width:100%; height:150px;}
	.content{overflow:hidden} /* 박스의 내용이 박스를 넘는 경우 넘치는 컨텐츠를 숨김 */
	.con1, .con2, .con3{width:30%;float:left; margin: 0 10px;} /* 각 블록요소 con1, con2, con3을 왼쪽부터 차례로 배치 */
	
		
		
	</style>
</head>
<body>
<div class="content">
	<h1>귀여운 캐릭터들</h1>
	<div class="con1">
	<img src="C:\Users\Administrator\Desktop\img.png" alt="">
	<p>하늘을 바라보는 캐릭터이다. 무엇을 생각하는 것일까?</p>
	</div>
	
	<div class="con2">
	<img src="C:\Users\Administrator\Desktop\img2.png" alt="">
	<p>카카오톡의 이모티콘 라이언. 곰돌이처럼 생겼지만 사자이다.</p>
	</div>
	
	<div class="con3">
	<img src="C:\Users\Administrator\Desktop\img3.png" alt="">
	<p>귀엽게 생겼지만 전기를 내뿜는다. 피카피카피카</p>
	</div>
</div>
</body>
</html>



image



내용이 박스안으로 제대로 들어갔죠?

overflow에 대해서는 다음 장에 다시 배우니 걱정마세요!

글만 있는 컨텐츠를 가로배치할 때도 마찬가지입니다! 


<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>float 속성 연습</title>
	<style>
	body{width:35%; border: 1px dashed #000;}
	.content{overflow:hidden} /* 박스의 내용이 박스를 넘는 경우 넘치는 컨텐츠를 숨김 */
	.con1, .con2{width:30%;float:left; margin: 0 10px;} /* 각 블록요소 con1, con2을 왼쪽부터 차례로 배치 */
	
		
		
	</style>
</head>
<body>
<div class="content">
	<h1>뉴스</h1>
	<div class="con1">
		<h2>날씨</h2>
		<p>내륙 호우주의보…장맛비 이어 태풍 북상

		현재 경기 남부와 충청, 경북을 중심으로 강한 비가 내리고 있습니다.

		장마전선에 의해 발달된 비구름이 국지적으로 폭우를 쏟아내고 있는데요.

		이들 지역은 벼락을 동반한 시간당 20mm 안팎의 장대비가 내리고 있고요.

		그밖에 중부 곳곳에서도 약한 비가 내렸다 그쳤다를 반복하고 있습니다.</p>
	</div>
	
	<div class="con2">
		<h2>축구</h2>
		<p>브라질을 멕시코가 꺾기는 쉽지 않다는 전망이 나왔다. 한국 덕분에 올라간 월드컵 16강 얘기다.

		사마라의 코스모스 아레나에서는 2일 오후 11시 2018 국제축구연맹(FIFA) 러시아월드컵 16강전 브라질-멕시코가 열린다.

		스포츠방송 ESPN이 자체 알고리즘 ‘사커 파워 인덱스’로 계산한 러시아월드컵 16강 승률은 브라질 82%-멕시코 18%다.</p>
	</div>
</div>
</body>
</html>




image



제대로 단락들이 부모 컨텐츠 안에 가로배치 되는 것을 볼 수 있습니다.