[HTML/CSS] float 속성과 요소의 위치 지정 방법 총정리

웹 페이지의 요소를 자유롭게 배치하고 시각적인 레이아웃을 구성하기 위해 사용하는 float, clear, position, 시멘틱 태그에 대해 정리하였습니다. 실습 예제와 함께 구성해 실무와 학습에 도움이 되도록 정리하였습니다.

 

1. float 속성

float 속성은 요소를 왼쪽(left) 또는 오른쪽(right)에 띄워서 배치할 수 있도록 해주는 속성입니다. 주로 이미지나 박스를 문단 옆에 배치할 때 사용됩니다.

img {
  float: right;
}

 

위 코드는 이미지를 오른쪽에 배치하며, 주변 텍스트는 왼쪽에 흐르듯 정렬됩니다.

 

2. clear 속성

clear 속성은 float 속성에 의해 흐르는 레이아웃을 무효화하여 아래 요소가 float 영향을 받지 않도록 만듭니다.

#box3 {
  clear: left;
}

 

예를 들어, float: left 속성을 가진 요소 다음에 오는 요소가 겹치지 않게 하려면 clear: left를 사용합니다.

 

3. 실습 예제 코드

<style>
  img { float: right; margin-left: 30px; }
  #box1 { background-color: yellow; float: left; }
  #box2 { background-color: skyblue; float: right; }
  #box3 { background-color: greenyellow; clear: left; }
  #box4 { background-color: royalblue; clear: left; }
</style>

<img src="image/tree.png">
<p>이미지와 텍스트가 함께 배치됩니다.</p>

<div id="box1">박스1</div>
<div id="box2">박스2</div>
<div id="box3">박스3</div>
<div id="box4">박스4</div>

 

위 코드는 float를 활용해 좌우로 박스를 띄우고, 이후 clear 속성을 통해 줄을 바꾸는 방식으로 레이아웃을 구성합니다.

 

4. 요소의 위치 지정하기 – position 속성

HTML 요소의 위치를 제어하기 위해 사용하는 속성입니다.

값	설명
static	기본값으로, 요소는 문서 흐름에 따라 위치함
relative	요소를 자신의 원래 위치를 기준으로 이동
absolute	부모 요소를 기준으로 절대적인 위치 지정 (부모가 relative여야 적용됨)
fixed	브라우저 창을 기준으로 고정되어 스크롤해도 위치 유지됨

 

#menu {
  position: fixed;
  top: 0;
  right: 0;
}

 

이처럼 fixed를 사용하면 상단 메뉴가 항상 고정되어 보여집니다.

 

5. 시멘틱 태그(Semantic Tags)

HTML5에서 도입된 시멘틱 태그는 웹 페이지의 구조와 의미를 명확히 표현하기 위해 사용됩니다.

태그	의미
<header>	문서나 섹션의 머릿말 영역
<nav>	내비게이션 링크 그룹
<section>	하나의 콘텐츠 영역
<article>	독립적인 콘텐츠 단위 (예: 블로그 글)
<aside>	본문과 간접적으로 관련된 사이드 콘텐츠
<footer>	문서나 섹션의 꼬리말 영역

 

시멘틱 태그는 접근성과 검색 엔진 최적화(SEO)에 도움이 되며, 문서 구조를 이해하기 쉽게 만들어줍니다.

 

6. 정리

• float은 요소를 띄워서 배치할 때 사용합니다.
• clear는 float된 요소의 영향을 제거하여 줄바꿈을 만듭니다.
• position은 요소의 위치를 유연하게 조정할 수 있습니다.
• 시멘틱 태그는 HTML 구조를 명확히 하여 유지보수와 SEO에 유리합니다.