너와 나의 개발 고리

[CSS] 위치 속성으로 HTML 요소 배치하기(float 속성) 본문

CSS _HTML_JavaScript/CSS

[CSS] 위치 속성으로 HTML 요소 배치하기(float 속성)

Oli-Viaaaa 2023. 8. 2. 13:36

float 속성

요소를 화면에 배치하는 position 속성과 또 다른 방법이다.

float 속성은 대상 요소를 공중에 띄워 다음에 오는 요소를 주변에 자연스럽게 배치하기 위한 용도로 사용하며

아래와 같은 용도에서 사용할 수 있다.

  • 이미지 요소와 텍스트 요소 배치하기
  • 블록 성격 요소를 인라인 성격 요소처럼 배치하기
형식)
	float:<속성값>;

 

사용할 수 있는 속성값은 아래와 같다.

속성값 설명
n o n e float 속성을 적용하지 않습니다.
l e f t 대상 요소를 공중에 띄워 왼쪽에 배치하면서 다음에 오는 요소를 주변에 자연스럽게 배치한다,
r i g h t 대상 요소를 공중에 띄워 오른쪽에 배치하면서 다음에 오는 요소를 주변에 자연스럽게 배치한다.

 

 

- 이미지 요소와 텍스트 요소 배치하기

이미지 요소와 텍스트 요소가 함께 사용될 때 float 속성의 특징을 적용하면 아래와 같은 레이아웃을 만들 수있다.

<style>
    img{
      float:left;
      margin-right:1rem;
    }
  </style>
</head>
<body>
  <img src="images/coffee.jpg" alt="커피">
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti ut dolor ratione blanditiis iste, harum fugit, soluta eum obcaecati, expedita perspiciatis quam culpa? Doloribus repellendus labore sed inventore iusto eveniet. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores at natus aliquid numquam vitae nisi, voluptates laudantium saepe error sapiente nobis adipisci et accusamus molestiae commodi consequuntur earum, ut dicta? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Id molestiae perspiciatis non temporibus voluptates alias ducimus libero esse recusandae placeat, natus quo mollitia sint enim? Ex numquam non officia ipsam?</p>
</body>

 

실행결과를 보면 float 속성값을 left로 지정한 이미지요소는 왼쪽으로 배치되고,

p 태그로 작성된 텍스트는 이미지 요소 주변으로 자연스럽게 배치된다.

 

 

 

- 블록 성격 요소를 인라인 성격 요소처럼 배치하기

float 속성을 작동 원리를 이용해 블록 성격 요소를 인라인 성격 요소처럼 배치할 수 있다.

<style>
    div{
      color:white;
    }
    .red-box{
      background-color:red;
      /* float:left; */
    }
    .blue-box{
      background-color:blue;
      /* float:left; */
    }
  </style>
</head>
<body>
  <div class="red-box">red-box</div>
  <div class="blue-box">blue-box</div>
</body>

 

div 태그는 블록 성격으로 width 속성을 따로 사용하지 않아도 그림처럼 가로 한 줄을 전부 차지한다.

이 상태에서 빨간색 요소의 float 속성값을 left로 지정해보면 아래와 같다.

화면으로는 빨간색 요소와 파란색 요소가 나란히 배치된것 처럼 보이지만, 개발자도구로 확인해보면

파란색 요소 일부가 빨간색 요소 아래 깔린 것을 확인할 수 있다.

 

이렇게 작동하는 건 float 속성이 적용 대상을 공중에 띄워 배치하기 때문에 대상이 있던 위치를 빈 공간으로 인식해서 그렇다.

파란색 요소는 빨간색 요소가 없는 것처럼 인식하고 해당 공간을 파란색 요소의 배경이 차지하게 되는 것이다.

다만, 다음에 오는 요소를 대상 요소 주변에 흐르듯이 배치하는 float 속성때문에 blue-box라는 글씨는

빨간색 요소의 옆으로 배치되며 float 속성이 적용된 대상은 별도의 width 속성이 지정되지 않으면 요소가 가지고 있는 콘텐츠만큼

너비가 자동으로 조정된다.

 

이 특징을 이용해서 텍스트가 차지한 만큼 너비가 조정되어 한 줄로 나란히 배치시키려면 아래와 같다.

 

 

 

- float 속성 사용 시 문제점

float 속성 사용할 때 몇 가지 주의할 점이 있다.

 

예를 들어 div 태그로 작성성된 빨간색 요소와 초록색 요소가 있다고 할 때

빨간색 요소의 float 속성값을 left로 지정하면 실행 결과가 아래와 같이 바뀐다.

초록색 위치를 살펴보면 빨간색 요소 아래 들어간걸 확인할 수 있는데 이런 결과가 나온 이유는

float 속성이 적용 대상의 원래 위치를 보장하지 않기 때문이다.

위의 이미자와 같은 레이아웃을 만들기 위해 코드를 작성한다.

<style>
    .container{
      width:400px;
      padding:1rem;
      margin:0 auto;
      border:1px solid black;
      background-color:#ccc; 
    }
    .box{
      width:100px;
      height:100px;
      /* float: left; */
    }
    .red-box{
      background-color:red;
    }
    .blue-box{
      background-color:blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box red-box"></div>
    <div class="box blue-box"></div>
  </div>
</body>

여기서 빨간색 요소와 파란색 요소를 float 속성으로 나란히 배치하면

float 속성을 적용하면 해당 자식 요소를 부모 요소가 제대로 인식하지 못해 이미지와 같은 결과가 나온다.

 

이런 현상 때문에 웹 페이지의 레이아웃을 구성할 때 예기치 못한 문제가 발생할 수 있어

이를 해결 하기 위해 clear 속성을 사용하거나 overflow 속성을 사용한다.

저작자표시 (새창열림)

'CSS _HTML_JavaScript > CSS' 카테고리의 다른 글

[CSS] 위치 속성으로 HTML 요소 배치하기(position 속성)  (0) 2023.08.01
[CSS] 배경 속성으로 요소의 배경 설정하기  (0) 2023.07.27
[CSS] CSS 박스 모델을 구성하는 속성 다루기(박스 모델의 성격과 display 속성)  (1) 2023.07.27
[CSS] CSS 박스 모델을 구성하는 속성 다루기(padding 영역)  (0) 2023.07.26
[CSS] CSS 박스 모델을 구성하는 속성 다루기(border 영역)  (0) 2023.07.26
'CSS _HTML_JavaScript/CSS' Related Articles more