[css] step09. float

step09. - 01~04. float

		.container{
			width: 500px;
			margin: 0 auto;
			border: 1px solid blue;
		}
		.box{
			width: 100px;
			height: 100px;
			background-color: yellow;
			border: 1px solid red;
		}
		#one{
			float: left;
		}
		#two{
			float: right;
		}
	</style>
</head>
<body>
<div class="container">
	<h1>float 테스트</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem odio commodi, saepe quidem, nobis illo neque repellat, ipsum laboriosam delectus laudantium. Eligendi accusantium odio sint hic, quis aut a autem?</p>
	<div class="box" id="one">div1</div>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est nemo blanditiis ipsam, voluptates vitae, reprehenderit optio tempore consequatur laborum earum officia repellendus error consequuntur, eos voluptatum perferendis voluptate vel. Placeat.</p>
	<div class="box" id="two">div2</div>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure reiciendis, ex odio temporibus ea earum ipsum, a provident enim iusto eum ullam nostrum exercitationem quaerat hic molestiae. Ipsa, repellat, hic.</p>
</div>
</body>

실수의 float이 아니다. 사전적인 의미는 '뜨다.' 로, 해당 객체가 둥둥 떠있게 된다고 상상해야 한다.
float: left는 둥둥 떠서 왼쪽으로, float: right는 둥둥 떠서 오른쪽으로 배치된다.

이런 둥둥 뜨는 특징을 이용해서 block 요소들을 정렬하는데에 사용한다.

	<style>
		.box{
			width: 100px;
			height: 100px;
			background-color: yellow;
			border: 1px solid red;
			float: left; /* left | right */
		}
		p{
			clear: both; /* left | right | both*/
		}
	</style>
</head>
<body>
<h1>block 요소를 inline 요소 처럼 한줄로 배치</h1>
<div class="box">div1</div>
<div class="box">div2</div>
<div class="box">div3</div>
<div class="box">div4</div>
<div class="box">div5</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas repellat velit eius. Minus nesciunt rem repellat officiis similique molestias voluptatem cum tempora, doloribus quas autem. Perspiciatis eos, enim. Velit, numquam!</p>
</body>

css의 clear 옵션은 float과 동반되는 경우가 많다. 여기에서 clear를 하지 않는다면 다섯 번째 box 오른쪽에 <p> 요소에 해당하는 것들이 위치하게 된다.

	<style>
		.box{
			width: 100px;
			height: 100px;
			background-color: yellow;
			border: 1px solid red;
			float: left; /* left | right */
		}
		p{
			clear: both; /* left | right | both*/
		}
		.wrapper{
			border: 1px solid blue;
			background-color: #999;
			/* float 된 자식 요소를 감쌀수 있도록 설정 */
			overflow: auto;
		}
	</style>
</head>
<body>
<h1>block 요소를 inline 요소 처럼 한줄로 배치</h1>
<div class="wrapper">
	<div class="box">div1</div>
	<div class="box">div2</div>
	<div class="box">div3</div>
	<div class="box">div4</div>
	<div class="box">div5</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas repellat velit eius. Minus nesciunt rem repellat officiis similique molestias voluptatem cum tempora, doloribus quas autem. Perspiciatis eos, enim. Velit, numquam!</p>
</body>

overflow: auto; 를 이용하는 것은 편법이라고 했다. 왜 편법이지? ^[각주:1]
floating을 해제하는 방법에 여러 가지가 있다고 한다.
첫째는, 빈 요소를 만들어서 clear 속성을 부여하는 것이라고 한다. 이전 예제에서는 <p> 요소에 부여했지만 저런 방식으로 부여했을 때, 불필요한 요소를 만들어내는 것이므로 가장 권장하지 않는다고 한다.
둘째는, overflow 속성을 부여하는 것이라고 한다. overflow 속성을 hidden으로 하면 넘치는 분량을 숨기겠다는 의미이다. 이 속성은 자식 요소의 박스가 부모 요소의 박스보다 클 경우 자식 요소를 숨겨준다. overflow auto의 경우 자식 요소의 박스가 부모 요소의 박스보다 클 경우 스크롤이 생기기 때문에 권장하지 않는다고 한다.
셋째는, 가장 널리 쓰이고 있는 pseudo element(가상 요소)를 사용하는 것이다. 가상 요소 중에서 :after를 이용해서 clear 옵션을 auto로 준다. 이 요소는 IE7에서 지원하지 않는다.
넷째는, micro clearfix 라는 방법이다. ^[각주:2]
```
	<style>
		.f-left{
			float: left;
			width: 200px;
			border-right: 1px solid #999;
		}
	</style>
</head>
<body>
<h1>float 된 요소의 width 확인!</h1>

<div class="f-left">김구라</div>
<div class="f-left">김구라 해골</div>
<div class="f-left">김구라 해골 원숭이</div>	
</body>
```
width(폭)를 지정하지 않으면 해당 객체가 포함하는 content의 크기만큼의 폭만 가지므로 float 시키면서 동시에 공간을 주고 싶다면 폭을 지정해야 한다.

step09. example

	<style>
		
		.container{
			width: 768px;
			margin: 0 auto;
		}
		/* ul 기본 스타일 제거 */
		
		nav ul{
			list-style-type: none;
			padding: 0;
			margin: 0;
		}
		nav li{
			float: left;
		}
		p{
			clear: left;
		}
		nav{
			background-color: #000;
			overflow: auto;
		}
		nav a{
			text-decoration: none;
			color: #999;
			display: block;
			padding: 10px 20px;
		}
		nav a:hover, nav a:focus{
			color: #fff;
			background-color: #999;
		}
		
	</style>
</head>
<body>
<div class="container">
	<h1>네비게이션 요소 만들기</h1>
	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Cafe</a></li>
			<li><a href="#">Game</a></li>
			<li><a href="#">Contacts</a></li>
		</ul>
	</nav>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo commodi quam odit, veritatis atque quas ex pariatur, maxime laborum cum recusandae magni deleniti cumque rem laboriosam nemo eaque esse! Ea!</p>
</div>	
</body>

차나 휴대폰처럼 누군가 잘하는 사람의 작품을 가져다가 쓰는 법도 있다고 했다.

'뒷북 정리 (국비 교육) > css' 카테고리의 다른 글

[css] step11. z-index (0)	2021.12.14
[css] step10. display (0)	2021.12.13
[css] step08. pseudo element (0)	2021.12.13
[css] step07. position (0)	2021.12.13
[css] step06. pseudo class (0)	2021.12.13