[TIL] float로 수평 정렬

float

요소를 좌우 방향으로 띄움 (수평 정렬)

속성 값

값	의미	기본값
none	요소 띄움	none
left	왼쪽으로 띄움
right	오른쪽으로 띄움

 

1. 단순 띄움

1) 사진 left에 위치

👉 여백에 글자를 흐르게 하고 싶을 때

👉 clear : left; 를 이용해서 흐르는 글자를 중간에 끊을 수도 있다.

 

 

 

2)  사진을 right에 위치

👉 여백에 글자를 흐르게 하고 싶을 때

👉 clear : right; 를 이용해서 흐르는 글자를 중간에 끊을 수도 있다.

 

 

 

 

 

 

2. 수평 정렬

각 요소에 float 속성이 적용되면 차례로 '정렬'됩니다.

1) left 정렬

👉 왼쪽에서 1부터 시작한다.

👉 clear : left; 를 이용해서 요소가 겹치는 문제를 해결할 수 있다. => 수직으로 쌓인다.

 

 

 

 

2) Right 정렬

👉 오른쪽에서 1부터 시작한다.

 

 

clear : right; 를 이용해서 요소가 겹치는 문제를 해결할 수 있다. 

수직으로 쌓이는 것을 볼 수 있다.

# clear : both; 를 쓰자!

👉 clear: both; 는 float가 left든 right든 둘 다 사용이 가능하다.

---

3. float 해제

float 속성이 적용된 요소의 주위로 다른 요소들이 흐르게 되는데 이를 방지하기 위해 속성을 '해제'해야 함.

방법1 : 형제요소에 clear: (left,right,both) 추가하여 해제
방법2 : 부모요소에 overflow: (hidden,auto) 추가하여 해제
방법3 : 부모요소에 clearfix 클래스 추가하여 해제 (추천!)

---

👉 1번 방법은 다음 형제 요소가 존재할 때 사용이 가능하다. 다음 형제 요소가 없는 경우에는 2번이나 3번 방법으로 사용하는데 2번보다 3번을 추천.

 

방법3. 부모요소에 clearfix 클래스 추가하여 해제

 

---

• HTML

<div class="clearfix">
<div class="float-box">1</div>
<div class="float-box">2</div>
<div class="float-box">3</div>
<div class="float-box">4</div>
</div>  
<div class="new-box"></div>

• CSS

.clearfix::after {
   content: "";
   clear: both;
   display: block;
}

.float-box {
  width: 100px;
  height: 100px;
  background: orange;
  margin: 10px;
  float: left;  
   }         

.new-box {
  width: 250px; 
  height: 250px;
  background: red;
   } 

---

 

 

 

 

👉 float: left;를 추가하면 수평으로 왼쪽부터 정렬

 

👉 HTML 에 추가하고, CSS에 .new-box {...} 를 추가했을 때

👉 HTML 에 추가하고, CSS에 .clearfix {...} 를 추가했을 때 float를 해제하는 것이 가능하다.

 

 

 

 

 

4. display

float 속성이 추가된 요소는 display 속성의 값이 대부분 'block'으로 수정된다.

• HTML

<span>1</span>
<span>2</span>
<span>3</span>

• CSS

span{
  width: 100px;
  height: 100px;
  margin: 10px;
  background: tomato;
  float: right;
}

 

👉 태그 는 인라인 태그이기 때문에 아래와 같이 나타날 수 있다.

 

👉 태그 에 float:right; 속성을 추가하면 자동으로 블록 태그가 된다.

 

※ 따로 display: block;을 설정해 줄 필요가 없다.

 

5. clear

float 속성이 적용되지 않도록 중간에 해제할 때 지정 (해제)

• 속성 값

값	의미	기본값
none	요소 띄움 해제를 안하는 것	none
left	왼쪽 띄움 해제
right	오른쪽 띄움 해제
both	양쪽(왼쪽,오른쪽)모두 띄움 해제

👉 대부분 clear:both; 를 많이 쓴다.

 

 

 

6. position

요소의 위치 지정 방법의 유형(기준)을 설정. 기준이 매우 중요

• 속성 값

값	의미	기본값
static	유형(기준) 없음/배치 불가능	static
★ relative	요소 자신을 기준으로 배치
★ absolute	위치 상 부모 요소를 기준으로 배치
fixed	브라우저(뷰포트)를 기준으로 배치
sticky	스크롤 영역 기준으로 배치

 

top

값이 아니라 속성이다. 요소의 position 기준에 맞는 위쪽에서의 거리 (위치) 를 지정

 

값	의미	기본값
auto	브라우저가 계산	auto
단위	px,em,cm등 단위로 지정	0
%	부모(위치 상의 부모(조상))요소의 세로 너비의 비율로 지정,음수 값 허용

 

bottom

값이 아니라 속성이다. 요소의 position 기준에 맞는 아래쪽에서의 거리 (위치) 를 지정

값의미기본 값

auto	브라우저가 계산	auto
단위	px,em,cm등 단위로 지정	0
%	부모(위치 상의 부모(조상))요소의 세로 너비의 비율로 지정,음수 값 허용

 

left

값이 아니라 속성이다. 요소의 position 기준에 맞는 왼쪽에서의 거리 (위치) 를 지정

값의미기본 값

auto	브라우저가 계산	auto
단위	px,em,cm등 단위로 지정	0
%	부모(위치 상의 부모(조상))요소의 가로 너비의 비율로 지정,음수 값 허용

 

right

값이 아니라 속성이다. 요소의 position 기준에 맞는 오른쪽에서의 거리 (위치) 를 지정

값의미기본 값

auto	브라우저가 계산	auto
단위	px,em,cm등 단위로 지정	0
%	부모(위치 상의 부모(조상))요소의 가로 너비의 비율로 지정,음수 값 허용

👉 top, left, right, bottom은 position이 지정되어 있을 때만 사용이 가능하다.

 

1. position: relative

👉 자기 자신 이 원래 있었던 위치를 기준으로 움직인다.

※ 주변에 영향을 줄 수 있으므로 주의해서 써야한다.

 

2. position: absolute

👉 위치 상의 부모 요소를 기준으로 움직인다.

※ 부모 요소에 position 속성이 존재해야 한다. position 속성의 값은 상관 없지만 주로 속성 값으로 relative를 삼는다.

※ position 속성이 없으면 뷰포트를 부모 요소로 삼는다.

3. position: fixed

👉 브라우져(뷰포트)를 기준으로 움직인다.

※ 쇼핑몰 배너, 광고에 많이 쓰임. 뷰포트의 크기가 변하여도 설정한 위치에 계속 존재.

 

4. position: sticky

👉 스크롤 되는 영역을 기준으로 배치.