[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 46회차 미션

23 * 2 = 46

패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 46일차입니다!

15번째 커리큘럼 'CSS/속성- 띄움(정렬), 위치' 과정을 시작했습니다.

오늘은 요소를 띄워 수평 정렬하는 데에 쓰는 float 속성에 대하여 공부했어요.

실무를 할 때 레이아웃 잡으면서 float 속성을 잘 다루지 못하여 화면이 버벅였던 상황이 떠오르네요.

 

예전에 레이아웃 잡을 때 썼지만 매번 애먹었던 float 속성 😅

오늘은 01. float / 02. float - display 수정 / 03. clear 에 대하여 학습했습니다.

---

float

◾ 요소를 좌우 방향으로 띄움 (수평 정렬하는 데에 쓰임)

➡ CSS3에서 flexible box 개념이 도입되면서 float 대신 flexible box를 주로 사용함

◾ 속성 값 ⬇

 

값	의미	기본값
none	요소 띄우지 않음	none
left	왼쪽으로 띄움	.
right	오른쪽으로 띄움	.

 

단순 띄움

- 예제 ⬇

 

 

◽ float 속성이 추가된 요소 주변으로 다른 요소들이 흐름

➡ tomato 색 박스에 float: left 속성이 들어있으며 박스 주변으로 텍스트가 흐르게 두어져 있음

◽ 박스 아래에 글이 떨어지게 하고 싶으면 글 부분을 따로

로 묶고 그 요소에 clear: left; 속성 추가

 

단순 해제

◾ clear: left; 를 사용하는 것과 같이 float 속성을 해제할 수 있음

◾ float: right; 속성을 해제하기 위해서는 clear: right; 사용

 

수평 정렬

◾ 각 요소에 float 속성이 작용되면 그 방향으로 차례로 정렬됨

◽ float: left; ➡ 좌측부터 쌓기 시작

◽ float: right; ➡ 우측부터 쌓기 시작

 

정렬 해제

◾ clear: both; 를 사용하면 float: left;와 float: right;에 모두 대응 가능

✨ clear 속성을 사용하지 않고 새로운 요소를 float 속성을 가진 요소 뒤에 추가하면, 그 새로운 요소와 float 속성을 가진 요소가 겹치게 된다!

 

float 해제 ⭐

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

 

1. 다음 형제 요소에 clear: (left, right, both) 추가하여 해제 (기존 사용 방법)
2. 부모 요소에 overflow: (hidden, auto) 추가하여 해제 (추천 X - 편법, overflow와 float은 아무 관계가 없기 때문)
3. 부모 요소에 clearfix 클래스 추가하여 해제 (추천!)

- 3번 예제 ⬇

 

 

✨ clearfix가 있는 요소의 자식은 모두 float 요소를 가지고 있어야 함!

 

float - display 수정

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

◽ display: flex; 과 display: inline-flex; 는 float 속성 효과 없음! (block으로 수정되지 않음)

◽ inline, inline-block, inline-table, table-row, table-row-group, table-column, table-column-group, table-cell, table-caption, table-header-group, table-footer-group은 block으로 수정됨

◽ 그 외 display 값은 변화 없음

◾ float 속성이 적용되지 않도록 지정 (해제)

◾ 속성 값 ⬇

 

값	의미	기본값
none	요소 띄움 허용	none
left	왼쪽 띄움 해제	.
right	오른쪽 띄움 해제	.
both	양쪽 모두 띄움 해제	.

 

---

강의 링크: https://bit.ly/3m0t8GM