CSS 레이아웃 float / flex

lyju777·2024년 1월 26일

CSS

CSS 레이아웃

CSS 레이아웃이란 HTML의 요소들을 적절히 배치시키는 것을 말한다.
이러한 레이아웃 시스템은 이전부터 현재까지 많은 변화를 가지게 되었다. float ▶ flex ▶ grid

현재는 레이아웃을 구성할때 flex를 가장 많이 사용하고 있으며 gird 와 함께 혼용하며 상황에 맞게 사용하는 추세이다.

float은 현재에는 많이 사용되지 않지만 아직까지 사용되고 있는 경우도 존재하기 때문에 대표적인 레이아웃 시스템인 float과 flex에 대해서 내용을 정리하기로 했다.

float

float은 flex가 있기 이전에 레이아웃을 구성할때 사용하던 방법으로 PC로만 웹브라우저에 접속이 가능하던 시절에 만들어졌기 때문에 반응형 웹에는 적합하지 않는다.

float의 속성은 다음과 같다.

float

HTML 요소를 띄워 특정 컨테이너의 좌측 혹은 우측을 감싸는 형태로 강제 배치할 수 있도록 도와주는 속성이다.

float: none (기본값)
float: left
float: right

clear

float의 영향력을 해당 요소에 한해 해제하는 속성이다.

clear: none (기본값)
clear: left
clear: right
clear: both

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <div class="box1 box">
    첫번째 박스입니다.<br>
    float:left가 적용되어 있습니다.
  </div>
  <div class="box2 box">
    두번째 박스입니다.<br>
    float:right가 적용되어 있습니다.
  </div>
  <div class="clearfix"></div> // 대체적으로 사용 
  <div class="box3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus sapien, facilisis vitae feugiat ut, semper at ligula. Vivamus cursus lectus tincidunt tellus tincidunt pharetra. Donec pharetra dictum malesuada. Fusce non sapien egestas, maximus urna vel, pulvinar magna. Aenean ut dapibus lacus, in blandit ligula. Vestibulum sit amet efficitur tortor. Phasellus id viverra felis. Mauris magna est, luctus sit amet neque et, sagittis ultrices elit. Morbi odio eros, finibus non justo eget, sollicitudin dapibus ante. Nunc maximus eu nunc et finibus. Vivamus viverra feugiat pretium. Sed at tempus enim, et dignissim ante. Mauris vel nisi leo. Nullam vel nibh suscipit, lobortis ex eu, mollis nunc. Fusce in eros blandit, vehicula libero et, euismod enim.
  </div>
</body>
</html>

.box1 {
  height: 400px;
  background-color: red;
  float: left;
}

.box2 {
  height: 200px;
  background-color: blue;
  float: right;
}

.box {
  width: 300px;
  padding: 20px;
  box-sizing: border-box;
}

.clearfix {
  clear: both;
}

clear속성을 사용하지 않을 경우에는 float 속성에 의해 box1,box2태그가 box3태그의 양옆에 위치하게 된다.

clear속성을 사용할 시에는 float의 영향력이 해제되어 의도에 맞게 레이아웃 되는것을 확인할 수 있다.
(보통 clear속성은 both로 많이 사용된다.)

flex

flex는 레이아웃을 배치하기 위해 만들어진 속성으로 float에 비해 사용이 편리하다는 장점이 있다.

flex 레이아웃을 만들기 위한 기본적인 HTML 구조는 다음과 같다.

<div class="container">
	<div class="item">박스1</div>
	<div class="item">박스2</div>
	<div class="item">박스3</div>
</div>

위의 코드에서 부모요소는 container 자식요소는 item 으로 컨테이너는 flex의 영향을 받는 전체 공간이며 공간 내에 아이템들이 배치되게 된다.

flex의 속성

flex에 적용할 수 있는 속성은 크게 두가지로 나눌 수 있다.

Container에 적용하는 속성
item에 적용하는 속성

❗두 방법중 Container에 적용하는 속성들은 다음과 같다.

flex-direction (배치 방향 설정)

row (행) : 중심축을 가로 방향으로 배치한다.
column (열) : 중심축을 세로 방향으로 배치한다.

justify-content (메인축 방향 정렬)

align-items (교차축 방향 정렬)

flex-wrap

nowrap: item의 줄바꿈을 허용하지 않는다. (기본값)
(item이 아무리 많아져도 무조건 한줄에만 들어감)
wrap: item의 가로 사이즈가 container의 가로 사이즈를 넘길 경우 다음줄로 넘어가진다.

❗ align-items는 flex-items이 한 줄일 때 우선적용됨.
(만일 item이 두 줄 이상인 상태에서 정렬을 원한다면 align-content 속성을 사용)

CSS 레이아웃 float / flex