HTML & CSS

Chapter 3-12. 문서의 흐름 <float>(CSS)

Chansman 2025. 3. 31. 15:05

📌 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 속성을 사용하여 웹 페이지에서 요소를 자유롭게 배치하는 방법을 이해하셨습니다! 🎨📐