7.1 float 속성
float
와 clear
속성을 사용한 떠다니는 요소들은 웹 디자인에서 복잡한 레이아웃을 만드는 초기 방법 중 하나였어. 요즘은 Flexbox나 Grid 같은 현대적인 방법들이 더 많이 쓰이지만, float
와 clear
의 사용법을 아는 건 여전히 중요해.
float 속성
float
속성은 요소를 왼쪽이나 오른쪽으로 "떠다니게" 하고, 텍스트나 다른 요소들이 그것을 감싸도록 해. 컬럼 레이아웃이나 이미지 주변에 텍스트를 배치할 때 특히 유용하지.
문법:
.element {
float: left; /* 또는 right */
}
float 속성의 값:
left
: 요소가 왼쪽으로 떠다니고, 뒤따르는 요소들이 오른쪽에서 감싸준다right
: 요소가 오른쪽으로 떠다니고, 뒤따르는 요소들이 왼쪽에서 감싸준다none
: 기본값, 요소가 떠다니지 않음inherit
: 부모 요소로부터 값을 상속
float 사용 예제:
.float-left {
float: left;
width: 200px;
height: 200px;
background-color: lightblue;
}
.float-right {
float: right;
width: 200px;
height: 200px;
background-color: lightgreen;
}
.content {
background-color: lightgrey;
padding: 10px;
}
<div class="float-left">Left Float</div>
<div class="float-right">Right Float</div>
<div class="content">
<p>This is some content that will wrap around the floated elements. The left floated element will be placed to the left, and the right floated element will be placed to the right.</p>
</div>
7.2 clear 속성
clear
속성은 떠다니는 요소들 주변의 동작을 제어해. 특정 방향에서 떠다니는 요소들이 요소를 감싸지 못하도록 할 수 있어.
문법:
.element {
clear: left; /* 또는 right */
}
clear 속성의 값:
left
: 요소는 왼쪽에서 감싸지 않음right
: 요소는 오른쪽에서 감싸지 않음both
: 요소는 어느 쪽에서도 감싸지 않음none
: 기본값, 요소가 양쪽에서 감싸짐
clear 사용 예제:
.float-left {
float: left;
width: 200px;
height: 200px;
background-color: lightblue;
}
.float-right {
float: right;
width: 200px;
height: 200px;
background-color: lightgreen;
}
.clear {
clear: both;
background-color: lightcoral;
padding: 10px;
}
.content {
background-color: lightgrey;
padding: 10px;
}
<div class="float-left">Left Float</div>
<div class="float-right">Right Float</div>
<div class="clear">Cleared Element</div>
<div class="content">
<p>This content will not wrap around the floated elements because of the cleared element above.</p>
</div>
"clearfix" 기법의 예제:
.container::after {
content: "";
display: table;
clear: both;
}
<div class="container">
<div class="sidebar">Sidebar Content</div>
<div class="main">Main Content</div>
</div>
7.3 float 사용의 장단점
장점
- 쉬운 사용법:
float
를 사용하여 간단한 레이아웃을 쉽게 만들 수 있어
- 폭넓은 브라우저 지원:
float
는 모든 현대적인 브라우저에서 지원되고, 옛날 버전에서도 지원돼
- 레이아웃의 유연성:
- 이미지를 텍스트로 감싸는 것부터 다중 행 레이아웃까지 다양한 레이아웃을 만들 수 있어
단점
- 복잡한 레이아웃 관리의 어려움:
float
는 복잡한 레이아웃을 만들 때 특히 수직 정렬이 필요할 때 문제를 일으킬 수 있어
- 부모 요소의 높이 문제:
- 모든 자식 요소가 떠다니면 부모 요소가 "축소"될 수 있어. 이를 해결하기 위해
clearfix
같은 기법이 필요해
- 모든 자식 요소가 떠다니면 부모 요소가 "축소"될 수 있어. 이를 해결하기 위해
- 구식 방법:
- Flexbox와 Grid 같은 현대적 방법들이 더 강력하고 유연한 레이아웃 방법을 제공해줘
float와 clear를 사용한 레이아웃 만들기 예제
float
와 clear
를 사용하여 두 개의 컬럼 레이아웃을 만드는 방법이야.
이 예제에서는 사이드바(.sidebar
)와 메인 콘텐츠(.main
)를 가진 두 개의 컬럼 레이아웃을 만들어. .sidebar
와 .main
요소는 왼쪽으로 떠다니고, clear: both;
가 있는 .footer
요소는 감싸는 것을 방지해.
.container {
width: 100%;
}
.sidebar {
float: left;
width: 25%;
background-color: lightblue;
padding: 10px;
}
.main {
float: left;
width: 75%;
background-color: lightgreen;
padding: 10px;
}
.footer {
clear: both;
background-color: lightcoral;
padding: 10px;
text-align: center;
}
<div class="container">
<div class="sidebar">Sidebar Content</div>
<div class="main">Main Content</div>
<div class="footer">Footer Content</div>
</div>
float
와 clear
는 여전히 웹 개발자들의 도구 상자에서 중요한 도구야, 비록 더 현대적인 방법들이 나오긴 했지만. 그것들에 대한 이해는 오래된 프로젝트를 지원하고 업데이트하는 데 도움이 되고, 간단한 레이아웃을 만드는 데에도 여전히 유용해. Flexbox와 Grid 같은 현대적인 방법들이 복잡하고 반응형인 레이아웃을 만드는 데 더 선호되긴 하지만, float
와 clear
에 대한 지식은 여전히 유효해.