CSS - float 속성 알아보기

웹언어/CSS 2018. 11. 16. 19:22

CSS - float 속성 알아보기

이번 포스팅에서는 float 속성의 대해서 알아보도록 하겠습니다

CSS - float 속성 이란?

float은 사전적 의미론 "뜨다"라는 의미를 가지고 있으며, 웹페이지 에서는 컨텐츠를 가로로 나열하는데 자주 사용됩니다

또한, 글의 본문 안에서 이미지 혹은 레이아웃을 잡는데 자연스럽게 삽입할때 사용합니다

[Float 사용 전]

[Float 사용 후]

위 그림처럼 메뉴1 ~ 메뉴6 까지 되어 있습니다 float을 이용하여 가로 나열하겠습니다

CSS - float 속성 사용법

File : float.html

<doctype html>
<html>
<link rel="stylesheet" type="text/css" href="my.css">
<body>
<div id="float">
<div>메뉴1</div>
<div>메뉴2</div>
<div>메뉴3</div>
<div>메뉴4</div>
<div>메뉴5</div>
<div>메뉴6</div>
</div>
</body>
</html>

File : my.css

@charset "utf-8";
#float {width:913px;}
#float div {width:150px;border:1px solid black;}

HTML : div를 통해 메뉴1 ~ 메뉴7 까지 만들었으며, div 전체를 감싸는 요소를 float으로 만들어 습니다

CSS : div 메뉴를 감싸는 float 요소를 너비를 지정하였고, div의 메뉴를 너비와 테두리를 지정하여 작성하였습니다

출력결과 : 출력결과를 보시면 메뉴1 ~ 메뉴6 까지 잘출력이 되고 있으나 메뉴가 세로로 나오는것을 보실수 있습니다 이번에는 float 을 이용하여 가로로 정렬하도록 하겠습니다

1. float 을 이용한 왼쪽정렬

File : my.css

@charset "utf-8";
#float {width:913px;}
#float div {width:150px;border:1px solid black;}
#float div {float:left;}

위 코드는 css에서 div 태그를 float:left로 왼쪽 정렬으로 가로로 정렬하였습니다

위 출력내용을 보시면 가로로 정렬된것을 확인하실 수 있습니다

2. float을 이용한 오른쪽정렬

File : float.html

<doctype html>
<html>
<link rel="stylesheet" type="text/css" href="my.css">
<body>
<div id="float">
<div>메뉴1</div>
<div>메뉴2</div>
<div>메뉴3</div>
</div>
</body>
</html>

오른쪽 정렬의 html 코드에서는 효과적으로 설명하기 위해 메뉴를 3개로 줄였습니다

File : my.css

@charset "utf-8";
#float {width:913px;float:left;}
#float div {width:150px;border:1px solid black;}
#float div {float:right;}

css에 div 태그를 float:right 로 오른쪽 정렬 했습니다

출력내용을 보시면 이상하게 느껴지는 부분이 느껴지실 것입니다

오른쪽으로 정렬은 되었으나, 메뉴1 부터 오른쪽으로 정렬된 것으로 확인하실 수 있습니다

File : float.html

<doctype html>
<html>
<link rel="stylesheet" type="text/css" href="my.css">
<body>
<div id="float">
<div class="float_01">
<div>메뉴1</div>
<div>메뉴2</div>
<div>메뉴3</div>
</div>
</div>
</body>
</html>

File : my.css

@charset "utf-8";
#float {width:913px;}
#float .float_01 {float:right;}
#float .float_01 div {width:150px;border:1px solid black;}
#float .float_01 div {float:left;}