CSS의 float 속성과 미디어 쿼리를 함께 활용하면 화면 크기에 따라 요소의 위치가 자동으로 바뀌는 반응형 플로팅 레이아웃을 손쉽게 구현할 수 있습니다.
핵심 개념 이해하기
플로팅(float)은 요소를 좌측 또는 우측으로 배치하여 주변 텍스트가 자연스럽게 흐르도록 하는 CSS 기법입니다. 여기에 @media 쿼리를 추가하면 특정 화면 너비 조건에서 플로트 방향을 전환할 수 있어, 데스크톱과 모바일 환경 모두에서 최적화된 레이아웃을 제공합니다.
예제 코드
다음 코드는 화면 너비가 768px 이하로 줄어들면 플로팅 요소들의 위치가 서로 교체되는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.floatRight, .floatLeft {
color: white;
font-size: 20px;
padding: 10px;
font-weight: 500;
}
.floatRight {
background-color: rgb(0, 2, 95);
float: right;
}
.floatLeft {
background-color: rgb(85, 0, 74);
float: left;
}
@media (max-width: 768px) {
.floatRight {
float: left;
}
.floatLeft {
float: right;
}
}
</style>
</head>
<body>
<h1>반응형 플로트 예제</h1>
<h2>작은 화면에서는 플로트 위치가 서로 바뀝니다</h2>
<div class="clearfix">
<div class="floatRight">Float Right ></div>
<div class="floatLeft">Float Left <</div>
<br />
</div>
</body>
</html>코드 설명
1. 기본 스타일 설정
.floatRight와 .floatLeft 클래스에는 흰색 텍스트, 20px 글꼴 크기, 10px 패딩 등 공통 스타일을 적용했습니다. 각각 진한 남색과 보라색 계열의 배경색으로 구분됩니다.
2. 플로트 방향 지정
.floatRight 클래스에는 float: right;, .floatLeft 클래스에는 float: left;를 적용하여 기본적으로 오른쪽과 왼쪽에 각각 배치되도록 했습니다.
3. 미디어 쿼리로 반응형 구현
@media (max-width: 768px) 쿼리를 사용해 화면 너비가 768px보다 작아지면 두 요소의 플로트 방향을 서로 교체합니다. 즉, 원래 오른쪽에 있던 요소는 왼쪽으로, 왼쪽에 있던 요소는 오른쪽으로 이동합니다.
실행 결과
위 코드를 실행하면 일반적인 화면(768px 초과)에서는 'Float Right' 요소가 오른쪽에, 'Float Left' 요소가 왼쪽에 배치된 것을 확인할 수 있습니다.
브라우저 창 크기를 줄여 화면 너비가 768px 이하가 되면, 두 플로팅 요소의 위치가 아래와 같이 서로 교체됩니다.
추가 팁: clearfix 활용
플로트 속성은 부모 컨테이너의 높이에 영향을 주지 않으므로, 부모 요소에 clearfix 기법을 적용하는 것이 좋습니다. 대표적인 방법은 다음과 같습니다.
.clearfix::after {
content: "";
display: table;
clear: both;
}이렇게 하면 플로팅 요소들이 부모 컨테이너 밖으로 삐져나오는 현상을 방지할 수 있습니다.
마무리
CSS의 float 속성과 미디어 쿼리만으로도 별도의 JavaScript 없이 반응형 플로팅 레이아웃을 구현할 수 있습니다. 최근에는 Flexbox나 Grid 레이아웃이 더 많이 사용되지만, 텍스트 주변에 이미지를 배치하는 등의 상황에서는 여전히 유용하게 활용됩니다.