📌 CSS에서 요소의 흐름과 float 속성 사용하기
이번 포스팅에서는 HTML 요소들이 웹 브라우저에서 표시되는 순서와 CSS의 float 속성에 대해 살펴보겠습니다. 이를 통해, 문서의 흐름을 제어하고, 이미지나 텍스트를 자유롭게 배치하는 방법을 배우게 될 것입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible"
contect="IE=edge"
>
<title>CSS 문서사용하기기</title>
<style>
.container{
height: 400px;
border: 1px solid black;
}
#first{
float: right;
}
#second{
float: left;
}
p{
clear: both; /*공간에 균열이생기는것을 방지한다. */
}
</style>
</head>
<body>
<div class="container">
<img id="first"
src="images/45.jpg" width="160">
<img id="second"
src="images/45.jpg" width="160">
<p>대전은 대한민국의 광역시이며 남한의 중아에 위치해있다
순우리말 이름은 한밭인데, 이이름은
대전 내 지명등에 많이쓰이고있다.
</p>
</div>
</body>
</html>📋 1. 문서의 기본 흐름 이해하기
웹 요소들이 화면에 표시되는 순서는 HTML 문서 내에서 태그가 작성된 순서를 따릅니다. 이는 종이에 글을 쓰는 자연스러운 흐름과 유사하며, 웹 브라우저도 이를 그대로 따릅니다.
- 예를 들어, HTML에서 <p> 태그로 텍스트를 작성하면, 그 텍스트는 순차적으로 표시됩니다.
🔹 HTML 요소 순서
- 웹 페이지에 표시되는 내용은 기본적으로 작성된 순서대로 표시됩니다.
- 웹 브라우저는 왼쪽에서 오른쪽, 위에서 아래로 순차적으로 요소를 렌더링합니다.
📌 2. float 속성 이해하기
float 속성은 요소를 문서의 흐름에서 제외하고, 왼쪽이나 오른쪽으로 배치하는 속성입니다.
- 예를 들어, 이미지를 텍스트와 겹쳐서 좌측이나 우측에 배치하고 싶을 때 사용합니다.
🔹 float 속성 값
- left: 요소를 왼쪽으로 띄웁니다.
- right: 요소를 오른쪽으로 띄웁니다.
- none: float을 적용하지 않음을 의미합니다. (기본값)
✅ 예시
img {
float: left;
margin-right: 10px;
}- 이미지가 왼쪽으로 떠서 텍스트가 오른쪽에 위치하게 됩니다.
🚩 3. float 속성의 역효과 방지: clear 속성
float 속성으로 요소를 띄우면, 그 요소가 문서의 흐름을 벗어나 다른 요소들에 영향을 줄 수 있습니다. 이로 인해 레이아웃 깨짐 현상이 발생할 수 있는데, 이를 방지하기 위해 clear 속성을 사용합니다.
🔹 clear 속성
- left: 왼쪽에 떠 있는 부동 요소를 제외합니다.
- right: 오른쪽에 떠 있는 부동 요소를 제외합니다.
- both: 왼쪽과 오른쪽의 부동 요소를 모두 제외합니다.
✅ 예시
.clearfix {
clear: both;
}- **clear: both;**를 사용하면 부동 요소의 영향을 받지 않고, 정상적인 흐름을 유지할 수 있습니다.
🎯 정리
- float 속성은 요소를 문서의 흐름에서 제외하고, 왼쪽이나 오른쪽으로 배치하여 다양한 레이아웃을 구성하는 데 유용합니다.
- clear 속성을 사용하여 부동 요소가 다른 요소의 배치에 영향을 미치지 않도록 할 수 있습니다.
- 이 속성들을 적절히 활용하여 자유로운 레이아웃을 구현할 수 있습니다.
이제 CSS float 속성을 사용하여 웹 페이지에서 요소를 자유롭게 배치하는 방법을 이해하셨습니다! 🎨📐
'HTML & CSS' 카테고리의 다른 글
| Chapter 3-14. 겹치거나 넘치는 요소다루기<z-index,overflow>(CSS) (0) | 2025.03.31 |
|---|---|
| Chapter 3-13. 위치 지정하기 <position>(CSS) (0) | 2025.03.31 |
| Chapter 3-11. 요소의 유형 <display>(CSS) (0) | 2025.03.31 |
| Mini Project : 프로필 페이지 만들기(CSS:2일차 과제)+@ (0) | 2025.03.31 |
| Mini Project : 프로필 페이지 만들기(CSS:2일차 과제) (0) | 2025.03.31 |