한번씩 읽고 가세요.
“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
CSS Float 사용방법 정리
CSS Float는 요소를 좌우 방향으로 이동시켜 다른 요소들과의 배치를 조정하는 속성입니다. 이를 이용하면 웹페이지의 레이아웃을 구성하거나 이미지와 텍스트를 함께 배치하는 등 다양한 디자인을 구현할 수 있습니다.
Float 속성 사용 방법
Float 속성은 CSS의 속성 중 하나로, float 값을 이용하여 설정합니다. 일반적으로 left 또는 right 값을 사용하며, none은 float 속성을 취소합니다.
/* 요소를 왼쪽으로 이동시키는 예시 */
.box {
float: left;
}
/* 요소를 오른쪽으로 이동시키는 예시 */
.box {
float: right;
}
/* float 속성을 취소하는 예시 */
.box {
float: none;
}
주의사항
- Float 속성을 사용하면 요소가 이동하므로, 부모 요소의 높이가 사라지는 문제가 발생할 수 있습니다. 이를 방지하기 위해서는 부모 요소에 overflow: hidden; 속성을 추가하거나, 부모 요소 뒤에 clear 요소를 추가해주는 방법을 사용합니다.
- Float 속성을 사용하면 요소가 이동하므로, 다음 요소들과의 간격이 예상치 못하게 벌어질 수 있습니다. 이를 방지하기 위해서는 clear: both; 속성을 사용하여 float 속성을 취소하는 요소를 추가해주는 방법을 사용합니다.
Float 속성 사용 예시
이미지와 텍스트 배치
<div class="wrapper">
<img src="image.jpg" alt="image" class="img-left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<style>
.img-left {
float: left;
margin-right: 20px;
}
.wrapper {
overflow: hidden;
}
</style>레이아웃 구성
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #0e0808;
}
#wrap {
width: 1200px;
height: 1080px;
margin: 0 auto;
}
#header {
width: 1200px;
height: 100px;
background-color: #d33434;
}
#nav {
width: 1200px;
height: 100px;
background-color: #775959;
}
#side {
width: 400px;
height: 780px;
background-color: #e70909;
float: left;
}
#contents {
width: 800px;
height: 780px;
background-color: #270101;
float: left;
}
#footer {
width: 1200px;
height: 100px;
background-color: #642828;
clear: both;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header"></div>
<div id="nav"></div>
<div id="side"></div>
<div id="contents"></div>
<div id="footer"></div>
</div>
</body>