문서를 작성하다 보면 글의 왼쪽이나 오른쪽에 이미지가 오도록해서 글의 이해를 돕는 경우가 있다.
웹페이지도 마찬가지 인데 이런 기능을 구현하는 방법이 바로 float 속성이다. 최근에는 flexbox나 grid와 같은 더 강력하고 유연한 레이아웃 도구들이 등장하면서 사용 빈도가 줄어들고 있지만 여전히 특정 상황에서는 유용하게 사용이 가능하다.
HTML
<body>
<div class="container">
<img src="cat.jpeg" alt="고양이" class="float-left">
<p>
이것은 이미지와 함께 float 속성을 사용한 예시입니다. 이미지는 왼쪽에 위치하며, 텍스트는 이미지 주변을 감싸듯이 배치됩니다.
float 속성은 웹 페이지 레이아웃을 구성하는 데 유용하게 사용될 수 있습니다.
</p>
</div>
</body>
CSS
.container {
width: 500px; /* 컨테이너 너비 설정 */
border: 0px solid #ccc; /* 컨테이너 테두리 설정 */
padding: 10px; /* 컨테이너 내부 여백 설정 */
}
.float-left {
float: left; /* 이미지를 왼쪽으로 띄움 */
margin-right: 10px; /* 이미지 오른쪽 여백 설정 */
max-width: 50%;
}
하지만 이렇게 float은 의도치 않게 다른 내용의 흐름에 개입하게 되는 경우가 있다.
<body>
<div class="container">
<img src="cat.jpeg" alt="고양이" class="float-left">
<p>
이것은 이미지와 함께 float 속성을 사용한 예시입니다. 이미지는 왼쪽에 위치하며, 텍스트는 이미지 주변을 감싸듯이 배치됩니다.
float 속성은 웹 페이지 레이아웃을 구성하는 데 유용하게 사용될 수 있습니다.
</p>
<p style="color: red;">
여기 부터는 다른 글에 대한 설명입니다.
</p>
</div>
</body>
이렇게 다른 내용을 품고 있는 글임에도 float 속성의 영향을 받아서 레이아웃이 의도치 않은 방식으로 표현될 때가 있다.
이런 문제를 해결하기 위해서 사용하는 속성이 바로 clear 속성이다.
<body>
<div class="container">
<img src="cat.jpeg" alt="고양이" class="float-left">
<p>
이것은 이미지와 함께 float 속성을 사용한 예시입니다. 이미지는 왼쪽에 위치하며, 텍스트는 이미지 주변을 감싸듯이 배치됩니다.
float 속성은 웹 페이지 레이아웃을 구성하는 데 유용하게 사용될 수 있습니다.
</p>
<p class="clear" style="color: red;">
여기 부터는 다른 글에 대한 설명입니다.
</p>
</div>
</body>.container {
width: 500px; /* 컨테이너 너비 설정 */
border: 0px solid #ccc; /* 컨테이너 테두리 설정 */
padding: 10px; /* 컨테이너 내부 여백 설정 */
}
.float-left {
float: left; /* 이미지를 왼쪽으로 띄움 */
margin-right: 10px; /* 이미지 오른쪽 여백 설정 */
max-width: 50%;
}
.clear {
clear: left; /* 또는 clear: both; */
}
이렇게 css 상에서 clear 속성을 사용해서 left의 영향력을 없애면
이처럼 정상적으로 내용이 표시되는 것을 볼 수 있다.
(만약에 clear: right로 설정한다면 left의 영향을 그대로 받아서 기존과 같은 방식으로 표현되게 된다)
clear 속성의 값은 다음과 같다.
- left: 요소의 왼쪽에는 float된 요소가 없어야 합니다.
- right: 요소의 오른쪽에는 float된 요소가 없어야 합니다.
- both: 요소의 양쪽에는 float된 요소가 없어야 합니다.
- none: float된 요소의 영향을 받습니다. (기본값)
만약에 float의 영향을 아예 안받게 하고 싶다면 both를 사용하면 된다.
좀 더 내용을 심화해서 이미지 2개를 양옆에 배치한 다음 clear로 영향력을 없애서 내용이 float의 영향을 받지 않도록 할 수도 있다.
<body>
<div class="container">
<img src="cat.jpeg" alt="고양이" class="float-left">
<img src="cat.jpeg" alt="고양이" class="float-right">
<p>
이것은 이미지와 함께 float 속성을 사용한 예시입니다. 이미지는 왼쪽에 위치하며, 텍스트는 이미지 주변을 감싸듯이 배치됩니다.
float 속성은 웹 페이지 레이아웃을 구성하는 데 유용하게 사용될 수 있습니다.
</p>
<p class="clear" style="color: red;">
여기 부터는 다른 글에 대한 설명입니다.
</p>
</div>
</body>.container {
width: 1000px; /* 컨테이너 너비 설정 */
border: 0px solid #ccc; /* 컨테이너 테두리 설정 */
padding: 10px; /* 컨테이너 내부 여백 설정 */
}
.float-left {
float: left; /* 이미지를 왼쪽으로 띄움 */
margin-right: 10px; /* 이미지 오른쪽 여백 설정 */
max-width: 30%;
}
.float-right {
float: right; /* 이미지를 오른쪽으로 띄움 */
margin-left :10px; /* 이미지 오른쪽 여백 설정 */
max-width: 30%;
}
.clear {
clear: both; /* 또는 clear: both; */
}
'프로그래밍 > css 기초' 카테고리의 다른 글
| CSS 기초 공부(12) - background-clip (0) | 2025.03.11 |
|---|---|
| 크롬 개발자 도구 사용 (0) | 2025.03.11 |
| CSS 기초 공부(11) - input 태그 (1) | 2025.03.11 |
| CSS 기초 공부(10) - 이미지 (0) | 2025.03.11 |
| CSS 기초 공부(9) - 텍스트 스타일 (0) | 2025.03.11 |