멋쟁이 사자처럼 FE 스쿨 2기 - 4월 12일
오늘의 키워드📌
- float
- float 의미
- float 프로퍼티값
- float 정렬 주의점
- block박스 vs float속성
- float 속성의 문제점
- float 속성의 문제점 해결 방법
- float 의미
- float 프로퍼티값
- float 정렬 주의점
- block박스 vs float속성
- float 속성의 문제점
- float 속성의 문제점 해결 방법
1. float
1-1. float 의미
float
는 '띄우다' 라는 뜻을 가지고 있으며 css에서 float
는 다양한 객체를 띄워서 정렬 하는 속성을 가진다.
float
속성은 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법이다. flexbox
레이아웃을 사용한다면 더욱 간단하게 정렬 할 수 있지만, flexbox
레이아웃을 지원하지 않는 IE
를 고려해야 한다면 float
속성을 사용해야 된다.
위 이미지를 보면 알 수 있듯이 float
속성은 본래 이미지 주위를 텍스트로 감싸기 위해 만들어진 것이다. float(떠있다)의 의미는 요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것이다.
중요한 점은, float
속성을 사용할 때 요소의 위치를 고정시키는 position
속성이나 absolute
를 사용해서는 안된다.
1-2. float 프로퍼티값
- none : 요소를 떠 있게 하지 않는다. (기본값)
- right : 요소를 오른쪽으로 이동시킨다.
- left : 요소를 왼쪽으로 이동 시킨다.
float
속성을 사용하지 않은 블록 요소들은 수직으로 정렬된다. float:left
속성을 사용하면 왼쪽부터 가로 정렬되고, float:right
속성을 사용하면 오른쪽부터 가로 정렬된다.
1-3. float 정렬 주의점
float: right
오른쪽 가로 정렬의 경우, 먼저 기술된 요소가 가장 오른쪽에 출력되므로 출력 순서가 역순이 된다.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
color: white;
font-weight: bold;
font-size: 50px;
border-radius: 6px;
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
}
.d1, .d2 {
float: left;
}
.d1 {
background: red;
}
.d2 {
background: orange;
}
.d3, .d4 {
float: right;
}
.d3 {
background: red;
}
.d4 {
background: orange;
}
</style>
</head>
<body>
<div class="container">
<div class="box d1"> 1 </div>
<div class="box d2"> 2 </div>
<div class="box d3"> 3 </div>
<div class="box d4"> 4 </div>
</div>
</body>
</html>
그리고 float
속성은 중앙 가로 정렬은 하지 못하고 좌측(left), 우측(right) 가로 정렬만 할 수 있다.
1-4. block박스 vs float속성
block 박스 태그의 성질과 float 속성의 성질을 비교해 float
이 적용되면 요소가 어떤 모습이 될 지 알아보자.
블록 속성 태그는 아래와 같이 가로폭 전체의 넓이를 가지는 속성을 가지고 있다.
그럼 블록 속성 태그1
에 float:left
속성을 주면 어떻게 될까?
위와 같이 블록 속성 태그1
에 float
속성을 주면 블록 속성 태그1
에 해당하는 공간만큼만 차지하고 다른 요소에 대해서 왼쪽으로 배치된다. float:right
도 마찬가지다.
1-5. float 속성의 문제점
다양한 객체를 간편하게 띄워서 정렬하는 float
정렬에도 문제점이 존재한다. 전체를 감싸는 컨테이너(부모) 자식 요소들이 모두 float 속성을 가질 때 자식 요소들의 높이를 반영하지 못하고 자신의 높이만큼만 보여주는 문제점이 있다.
위의 이미지는 float
속성을 사용하지 않은 상태다.
그리고 위의 이미지는 float:left
속성을 사용한 상태다. 자식요소에 float
속성을 사용하면 자식 요소들은 붕 띄워진 상태이기 때문에 부모 요소가 자식 박스들의 존재를 인식하지 못하기 때문에 위와 같은 결과가 나온 것이다.
왜 이런 현상이 일어날까?
브라우저는 요소들을 화면에 어떻게 보여줄 지 결정하는 여러가지 방법이 있다. 그 중에서 대표적으로 3가지 방법이 존재한다.
- normal flow
- float
- positon
대부분의 요소들, 블록 레벨 요소와 인라인 요소들은 normal flow
에 따라 레이아웃이 결정된다. 하지만 float
, position(absolute, fixed)
속성을 사용하면 normal flow
에서 벗어나게 된다.
normal flow
에 속한 요소들은 normal flow
에서 벗어난 float
, position
속성이 적용된 요소들을 인식하지 못한다.
1-6. float 속성의 문제점 해결 방법
부모 요소에 overflow
속성 추가
overflow 속성은 block-formattin-contexts
를 생성한다. block-formatting-contexts
는 float 속성이 적용된 요소를 컨테이너가 인식하도록 만들어 준다. 때문에 컨테이너 요소에 overflow:visible
을 제외한 overflow:hidden
혹은 overflow:scroll
등을 추가해 해결한다.
부모 요소의 높이값을 직접 지정
강제로 부모에 높이값을 주어 늘리는 것은 좋은 방법이 아니다. 자식 요소의 높이값이 변경되거나, 자식 요소가 추가 되면 부모 높이를 변경해야 되므로 비효율적이다.
clear 속성 사용
float
이 사용된 요소의 바로 다음 형제 요소에 clear
속성을 사용한다. clear
속성은 left, right, both 3가지 값을 가지며 float
이 사용된 요소가 정렬된 방향에 따라 적절하게 사용하자.
float: left
->clear: left
float: right
->clear: right
float: left
->clear: both
- both 속성은 left, right 모두 clear 한다!
clear-fix 방법
.wrap::after {
content:'';
display:block;
clear:both;
}
css의 ::after
가상 요소로 해결한다. 부모 요소에 가상으로 마지막 child 요소를 덧붙여서 부모 요소인 wrap
이 자식 요소들을 알아보게 하는 방법이다. 이러한 방법을 clear-fix
라고 한다.(clear-fix 속성이 아니고 방법의 이름이다)
이렇게 하면 부모 요소와 이후에 float
요소를 따라오는 현상까지 모두 해결된다.
display: block
대신 display: table
을 사용하기도 한다.
이 외에도 block-formattin-context
를 만들어내는 여러가지 방법들을 사용할 수 있다.
몰랐던 점 ✏️
-
img
처럼 닫는 태그가 없으면 가상 클래스를 사용할 수 없다. -
인라인 요소에는
width
와height
를 지정할 수 없기 때문에float
를 사용하면inline-block
으로 변한다. -
a
앵커에padding
값을 주면 콘텐츠 영역이 넓어지기 때문에 좋은 방법은 아니다.margin
을 사용해 보자. -
나중에 배울 내용인 속성 선택자
[class=^="link"]
-
vertical-align
는 폰트 영향을 많이 받는다! 따라서 초기화를 확실히 해줘야 된다!
프로젝트 시작할 때font-family
를 지정하고 시작하길 권장한다. Why?! 최대한 같은 환경으로 만들어야 되기 때문! -
이미지와 텍스트 세로 정렬에 대한 종찬 강사님의 피드백!
- 일단 이미지와 텍스트를 세로 정렬하는 하는 문제가 css 세계에서 참 까다로운 문제.
그래서 작업자마자 각각 문제를 해결하는 방법이 천차만별이지만 종찬님이 알려주신 방법은 정말 무난한 선택지이다.
.icon
이랑div.label
을 모두vertical-align: middle
로 해서 어느정도 세로 정렬이 가능하다.div.label
에 인라인 블럭을 해 준 이유는vertical-align
속성에 영향 받게 하기 위해서이다.
그리고 이후에fransform
등으로 미세조정을 해주시는 편이라고 하셨다. (감사합니다 종찬 강사님!)
- 일단 이미지와 텍스트를 세로 정렬하는 하는 문제가 css 세계에서 참 까다로운 문제.
오늘 하루를 정리하며.. 🌃
배우는 것들이 많아지다보니 만들고 싶은 것도 많아지고, 해야될 것들도 많아지는 요즘이다.
평일에 수업이 끝난 이후나, 주말 점심에 여유롭게 개발 관련 서적을 읽으려고 했던 지난 날의 나.. 무슨 자신감이었던걸까!😂
그렇다고 정신적으로 힘들거나 지치지는 않는다.
물론 매일 밤새우며 공부하는게 쉽지만은 않지만 늦게 시작한 만큼 열심히 해야된다는 게 내 생각이다!
고등학교를 졸업하자마자 대학교에 입학해 공부를 하고 있는 사람들에 비해 나는 20대 후반이라는 늦은 나이에 입문하게 되었다. 명백히 격차라는건 존재하고 시간은 절대적이다.
일찍 공부를 시작한 사람이 평일 저녁이나 주말에 쉬고 있다고, 나 또한 따라서 쉬게 된다면 격차는 언제 좁혀진단 말인가?
놀고 싶을때 다 놀고, 쉬고 싶을때 다 쉬어놓고 일찍 준비한 사람들을 따라잡으려 한다면 그들에게 너무 불공평하다. 다른 사람들과 비교하지 않기와 자기객관화의 관계는 다소 모순적일 수도 있겠다.
일찍 준비한 사람보다는 명백하게 늦게 시작했고, 타고난 재능이 있는 것도 아니다. 그러니까 '진짜 죽기살기로 하자' 라는게 내 생각이다. 물론, 혼자였으면 많이 힘들었을테지만 든든한 팀원, 동료, 강사, 운영진 분들이 계시기 때문에 큰 힘이 된다!
내일도 파이팅!!
참고 🔗
Author And Source
이 문제에 관하여(멋쟁이 사자처럼 FE 스쿨 2기 - 4월 12일), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@nu11/멋쟁이-사자처럼-FE-스쿨-2기-4월-12일저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)