본문 바로가기
UIUX Web Standard/COA Lab's CSS

float 속성 2 - 박스정리

림스타일 2021. 1. 27. 17:18

※ float의 특징

1. float 속성은 레이아웃을 위하여 많이 사용하는 속성 중 하나이며,

2. 좌우의 위치를 정해주는 속성이다. 

3. float속성을 지정하게 되면 블록요소이더라도, width 속성을 부여해 주어야 크로스브라우징이 된다.

 

float의 속성을 활용하겠습니다.

float은 위치속성은 아니지만 위치를 잡아줄 때 많이 쓰는(던?) 속성입니다.

 

속성 속성명 설명
float left float된 박스중 좌측이 짧을 때 좌측의 빈 공간부터 채워 내려옴
right float된 박스중 우측이 짧을 때 좌측의 빈 공간부터 채워 내려옴
none left나 right 적용한 float속성을 없앰

※ float 속성을 해제 하는 방법

속성 : 속성값 설명
clear : both; float속성이 적용되어 좌측이나 우측으로 배치 되는 박스를 float속성을 해제하여 아래로 떨어뜨려 줌 (줄바꿈)
-----------------------------------------------
가상선택자에게 clear:both를 부여 할 때는 
.box:;after{
    content:'';
    display:block;
    clear:both;
}
를 적용함
overflow:hidden | auto; 박스크기 밖으로 넘쳐나는 요소에 대해 정의하는 속성이지만,
float이 적용된 요소의 부모요소에 이 속성을 주게 되면 그 다음 오는 박스가 아래로 줄바꿈이 된다.
박스에 height값 부여 박스가 높이값을 가지고 있으면, 부여된 높이 다음에 배치가 되므로, 줄이 겹치지 않음
그러나, 일반적으로 본문내용에는 높이값을 주지 않기 때문에 잘 사용하지 않음

 

여러가지 레이아웃 구현 방법이 있지만,

float속성을 배웠으므로, 이를 이용해 모양을 잡아보도록 한다.

 

 

 

 

이렇게 다섯개의 박스로 정리하고, 모두 같은 스타일이므로 클래스명으로 정리,

제목은 H태그로 선언한 다음 모양을 맞춰보도록 한다.

네번째 박스에는 clear라는 아이디를 준다.

 

 

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>float으로 레이아웃 - 1</title>
  <style>
  #titleBox{
	width:900px;
	border-bottom:2px solid #f28a02;
	color:#333;
	font-size:30px;
  }
  .box_small{
	width:250px;
	height: 200px;
	float: left;
	border:1px solid #f28a02;
	color:#333;
	font-size:12px;
	margin:10px;	
  }
  .clear{
	clear: both;
  }
  .box_small h2{
	font-size:20px;
	font-weight:bold;
	border-bottom: 2px solid #F202E2;
	text-align: center;
	color: #F202E2;
	padding:5px;
	box-sizing: border-box;
	height: 35px;
  }
  .box_small li{
	margin:10px 0;
	list-style:none;
  }
	
  </style>
 </head>
 <body>
	<h1 id="titleBox">Site Map</h1>

	<div class="box_small">
		<h2>sub_Title_1</h2>
		<ul>
			<li>submenu list</li>
			<li>submenu list</li>
			<li>submenu list</li>
			<li>submenu list</li>
			<li>submenu list</li>
		</ul>
	</div>	
	<div class="box_small">
		<h2>sub_Title_2</h2>
		<ul>
			<li>submenu list</li>
			<li>submenu list</li>
			<li>submenu list</li>
			<li>submenu list</li>
			<li>submenu list</li>
		</ul>
	</div>
	<div class="box_small">
		<h2>sub_Title_3</h2>
		<ul>
			<li>submenu list</li>
			<li>submenu list</li>
			<li>submenu list</li>
			<li>submenu list</li>
			<li>submenu list</li>
		</ul>
	</div>
	<div class="box_small clear">
		<h2>sub_Title_4</h2>
		<ul>
			<li>submenu list</li>
			<li>submenu list</li>
			<li>submenu list</li>
			<li>submenu list</li>
			<li>submenu list</li>
		</ul>
	</div>
	<div class="box_small">
		<h2>sub_Title_5</h2>
		<ul>
			<li>submenu list</li>
			<li>submenu list</li>
			<li>submenu list</li>
			<li>submenu list</li>
			<li>submenu list</li>
		</ul>
	</div>



 </body>
</html>

 

 

[ Tip ]

위의 표에서 설명한 대로,

clear: both;는 줄바꿈 역할을 해 주게 된다.

 

 

float속성을 해제 하기 위해 사용하는 방법으로 아래와 같이 하기도 한다.

가상선택자(::after)를 만들어, block속성을 부여하고 clear:both를 주는 것이다.

 

위의 그림처럼 footer 영역이 clearfix영역을 침범하게 된다. 

이를 방지 하기 위해 아래와 같은 속성을 부여하는데, 둘 중 한가지 방법을 사용한다. 

1. ::after 선택자에 clear:both;을 적용하는 방법

#clearfix::after{ 
content:''; 
display:block; 
clear: both; 
}

 

2. 해당박스에 overflow:hidden이나 auto를 적용하는 방법

#clearfix{  overflow:auto; }

 

이렇게 하게 되면, footer가 그 위의 요소 영역을 침범하지 않고 다음 그림처럼 만들수 있다. 

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
	#header{
		padding:50px;
		background: #a6e258;
	}
	#clearfix{
		border: 2px solid #f00;
		/* overflow:auto; */
	} 
	#clearfix::after{
		content:'';
		display:block;
		clear: both;
	}
	#aside{
		width:25%;
		padding:15px;
		box-sizing:border-box;
		background: #bfc3ba;
		float: left;
	}
	#section{
		width:75%;
		padding:15px;
		box-sizing: border-box;
		float: left;
		background: #f0e3e3;
	}
	#footer{
		padding:50px;
		background: #948eb6;
	}
  </style>
 </head>
 <body>
  <div id="header">HEADER</div>
  <div id="clearfix">	
	<div id="aside">
		<ul>
			<li>menu</li>
			<li>menu</li>
			<li>menu</li>
			<li>menu</li>
			<li>menu</li>
		</ul>
	</div>
	<div id="section">
		<h1>Title</h1>
		<p>
			Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
		</p>
		<p>
			Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
		</p>
	</div>
  </div>
  <div id="footer">FOOTER</div>
 </body>
</html>

 

 

 

'UIUX Web Standard > COA Lab's CSS' 카테고리의 다른 글

position 속성 1, z-index  (0) 2021.01.27
float 속성 3 - 레이아웃 연습 1~5  (0) 2021.01.27
float속성 1  (0) 2021.01.26
블록요소 속성 - 공간의 크기와 box-sizing  (0) 2021.01.26
border속성 2 - 활용  (0) 2021.01.26

'UIUX Web Standard/COA Lab's CSS' Related Articles

티스토리툴바