한번씩 읽고 가세요.
“ 만일 디버깅이 벌레를 잡는 과정이라면, 프로그래밍은 그걸 집어넣는 과정이다. ”
- Edsger W. Dijkstra
구조적 프로그래밍, 세마포어로 유명한 컴퓨터 과학자
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>