-css float 개요
css float은 flex나 grid가 나오기 이전에 사용되던 css 레이아웃 방식입니다. float이라는 단어의 뜻은 뜨다, 뜨는 물건입니다. 그 뜻처럼 요소들을 공중에 띄운 상태에서 정렬하는 방식이라고 할 수 있습니다. 물 위에 요소가 떠 있고, 플롯 명령을 한 요소에서 특정 방향으로 흐름을 만든다고 생각하면 쉽습니다.
-css float 사용법
- 플롯 레이아웃을 사용할 html 요소를 만듭니다.
- css에서 플롯 명령을 줄 요소를 선택합니다.
- float: left 혹은 float: right 명령을 줍니다.
- 흐름을 끊고 싶은 요소에 clear:both를 해서 흐름을 끊어줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.left div,
.right div{width: 50px; height: 50px; background: rgb(237, 159, 159);}
p{font-size: 24px; width: 90%; border: 1px solid #000;}
.left div{float:left;}
.right div{float:right;}
h2{clear: both;}
</style>
</head>
<body>
<div class="left">
<h1>-float left</h1>
<div></div>
<p>float left 명령을 한 요소 뒤의 요소는 왼쪽으로 딸려갑니다.</p>
<h2>더이상 안 딸려가려면 clear:both 해줍니다.</h2>
</div>
<hr>
<div class="right">
<h1>-float right</h1>
<div></div>
<p>float right 명령을 한 요소 뒤의 요소는 왼쪽에 떠있게 됩니다.</p>
<h2>더이상 안 딸려가려면 clear:both 해줍니다.</h2>
</div>
</body>
</html>
-포인트는 clear: both
float 레이아웃이 처음에 어려웠던 이유 중 하나는 의도하지 않게 한쪽 방향으로 다 쏠려버려서 환장 파티가 벌어져서 입니다. 클리어를 해주지 않아서 흐름이 계속 이어지기 때문입니다. 딸려가지 말아야하는 요소에 반드시 클리어를 해주어야 합니다.
-블록 엘리먼트를 플롯하면 인라인 블록이 된다?
p는 블록 엘리먼트이기 때문에 너비가 100% 이지만, 플롯 명령을 하면 인라인 블록 엘리먼트처럼 변합니다. 인라인 블록 엘리먼트답게 크기를 조절할 수 있지만, 너비를 90%로 해보면 본래의 100% 너비에서 90%가 아니라 플롯 레이아웃으로 인해 붙은 크기를 기준으로 조절되는 것을 볼 수 있습니다.
-언제 플롯을 쓸까?
주로 이미지와 텍스트를 정렬하기 위해 쓰이던 레이아웃으로, 현재는 플렉스와 그리드 레이아웃이 더 많이 쓰이고 있습니다. 하지만 플렉스나 그리드는 정렬할 요소에 대해 설정을 또 해줘야 하는 경우가 있으므로, 단순히 왼쪽 오른쪽으로 정렬할 때는 css float 을 쓰는게 편할 때도 있습니다. 상황에 따라, 최신 레이아웃이라고 무조건 좋다고 볼 수는 없고 단순한 명령이 베스트일 때도 있으니까요.
css float 정렬에 대해 알아보았습니다. 다음 포스팅에서는 css 레이아웃 중 모던 레이아웃이라 불리는 flex, grid에 대해 알아보겠습니다.
'웹, 게임 제작' 카테고리의 다른 글
| 구글 킵, 캘린더, 태스크 업무관리 프로세스 (PC, 모바일) (0) | 2021.10.26 |
|---|---|
| 웹&앱 기획자 커뮤니티, 기획할 때 쓰는 툴 (0) | 2021.10.25 |
| css 선택자 활용 (0) | 2021.08.20 |
| css 선택자 기본 (0) | 2021.08.20 |
| html 태그 자주 쓰이는 태그 순위 (0) | 2021.08.19 |
댓글