웹 페이지를 디자인하다 보면 특정 요소가 원하는 위치에 나타나도록 조정해야 할 때가 있습니다. 예를 들어, 이미지가 담긴 박스를 페이지 오른쪽에 배치하고 싶을 수 있죠.
CSS에서는 float 속성을 사용해 요소가 어떻게 배치될지 지정합니다. float를 활용하면 요소를 웹 페이지의 왼쪽이나 오른쪽으로 배치할 수 있습니다.
이 글에서는 예제와 함께 CSS float 속성으로 웹 페이지의 요소를 배치하는 방법을 살펴봅니다. 끝까지 읽고 나면 float를 능숙하게 다룰 수 있게 될 것입니다.
CSS float 속성이란?
float 속성은 요소를 컨테이너의 왼쪽 또는 오른쪽으로 배치할 때 사용합니다. 예를 들어, 웹 페이지에서 텍스트 옆에 이미지를 배치할 때 float를 활용할 수 있습니다.
float 속성은 박스를 생성하는 요소 중 절대 위치(absolute)로 배치되지 않은 요소에만 적용됩니다. 절대 위치 요소란 position 값이 static이 아닌 첫 번째 부모 요소를 기준으로 배치되는 요소를 말합니다.
float 속성과 함께 가장 많이 사용되는 네 가지 값은 다음과 같습니다.
- left – 요소를 컨테이너의 왼쪽으로 띄웁니다
- right – 요소를 컨테이너의 오른쪽으로 띄웁니다
- none – 요소에 float를 적용하지 않습니다
- inherit – 부모 컨테이너의 float 값을 상속받습니다
float 속성은 이미지 주변으로 텍스트를 자연스럽게 감싸게 만들 때 가장 많이 사용됩니다.
CSS float 예제
예를 들어, 'Stargazer Blazers'라는 별 관측 동아리를 위한 웹사이트를 디자인한다고 가정해 보겠습니다. 이 동아리는 단체의 역사를 소개하는 웹 페이지를 원하며, 페이지에는 동아리에 대한 간단한 소개와 함께 별 사진이 배치되기를 바랍니다.
float 속성을 사용하면 이런 페이지를 손쉽게 만들 수 있습니다. 먼저 float를 적용하기 전의 기본 코드입니다.
index.html <div> <p><img src="https://images.unsplash.com/photo-1465101162946-4377e57745c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1357&q=80" height="200" width="200" /> The Stargazer Blazers society, founded in 2017, is dedicated to viewing the stars in San Francisco, CA. The society was created after a meeting of two passionate stargazers in the Bay Area, Jeff Holmes and Paula Ingleson, who were looking to find other people with whom to discuss their passion. Today, our organization has over 200 members in the Bay Area, and meets monthly to gaze at the stars and discuss our members' discoveries. </p> </div>
위 코드의 실행 결과는 다음과 같습니다.
이 예제에서는 이미지가 텍스트 앞에 나타나 전체적으로 보기 좋지 않습니다. 하지만 float 속성을 사용하면 이미지를 텍스트 옆에 배치할 수 있습니다.
이미지를 텍스트 오른쪽에 배치하는 코드는 다음과 같습니다.
styles.css
img {
float: right;
}
실행 결과는 아래와 같습니다.
코드를 하나씩 살펴보겠습니다. 먼저 HTML에서 웹 페이지 내용을 담을 <div>를 정의했습니다. 그다음 <p> 태그로 Stargazer Blazers 동아리의 역사를 소개하는 본문 텍스트를 작성했고, 그 안에 200×200 크기의 별 이미지를 포함시켰습니다.
스타일을 담당하는 styles.css 파일에는 float: right; 속성을 사용해 이미지를 텍스트 오른쪽으로 띄웠습니다. 위 예제에서 볼 수 있듯이 이미지가 텍스트 오른쪽에 배치된 것을 확인할 수 있습니다. float를 적용하지 않으면 이미지는 기본적으로 텍스트 앞에 나타납니다.
이번에는 동아리에서 이미지를 텍스트 왼쪽에 배치해 달라고 요청했다고 가정해 보겠습니다. 이때는 다음 코드를 사용하면 됩니다.
styles.css
img {
float: left;
margin-right: 20px;
}
실행 결과는 다음과 같습니다.
이 예제에서는 이미지를 텍스트 왼쪽으로 띄우고, margin-right: 20px; 속성을 추가해 이미지와 텍스트 사이에 여백을 만들었습니다.
float로 박스 그리드 만들기
float 속성을 활용하면 콘텐츠 박스들을 나란히 배치할 수도 있습니다.
동아리에서 가입하면 볼 수 있는 별의 모습을 보여주는 세 장의 이미지를 나란히 배치하고 싶어 한다고 가정해 보겠습니다.
다음 코드로 이를 구현할 수 있습니다.
index.html <div> <img src="https://images.unsplash.com/photo-1492446190781-58ac4285911d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1294&q=80" height="200" width="200" class="image" /> <img src="https://images.unsplash.com/photo-1456154875099-97a3a56074d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80" height="200" width="200" class="image" /> <img src="https://images.unsplash.com/photo-1435224668334-0f82ec57b605?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" class="image" /> </div>
styles.css
* { box-sizing: border-box };
.image {
float: left;
width: 25%;
padding: 25px;
}
실행 결과는 아래와 같습니다.
코드를 분석해 보겠습니다. HTML 파일에는 세 개의 <img> 태그를 포함한 <div>가 있으며, 각 이미지는 200×200 크기이고 서로 다른 별 사진과 연결되어 있습니다. 또한 각 이미지에는 image라는 클래스가 지정되어 있습니다.
styles.css 파일에서는 다음과 같이 스타일을 적용했습니다.
- box-sizing: border-box; – 모든 요소에 적용해 패딩과 테두리가 요소의 전체 너비와 높이에 포함되도록 합니다. 이렇게 하면 기본 여백 없이 요소를 나란히 배치할 수 있습니다.
- float: left; – 이미지들이 나란히 표시되도록 만듭니다.
- width: 25%; – 각 이미지가 웹 페이지 너비의 25%를 차지하도록 합니다.
- padding: 25px; – 이미지 사이에 25px의 여백을 만듭니다.
마무리
CSS float 속성은 요소를 컨테이너의 왼쪽이나 오른쪽에 배치할 때 사용하며, 이를 통해 텍스트 등 다른 요소가 해당 요소 주변을 감싸도록 만들 수 있습니다.
이 글에서는 예제와 함께 CSS float 속성으로 요소를 왼쪽과 오른쪽에 배치하는 방법을 알아보았습니다. 이제 float 속성을 CSS 전문가처럼 활용할 준비가 되셨습니다!