-
[Day 12] CSS floatTIL/멋쟁이사자처럼 FE스쿨 2기 2022. 4. 12. 21:36SMALL
오랜만에 !쿨재현!님과 함께하는 쉅시간~
오늘은 css float 속성에 대해 집중적으로 다뤘다.
Float
'띄우다'라는 뜻을 가지고 있으며
다양한 객체를 띄워서 정렬을 하는 속성을 가져서 마치 inline-block과 같은 성질로 바뀐다.
라잌 디스 노멀 플로우에서 벗어나 붕붕 뜨게 된다.
보통 블럭 요소를 왼쪽(float: left)이나 오른쪽(float: right)으로 정렬할 때 많이 쓰인다.
여기서 특이한 점은,
블록 요소는 가로폭 전체를 width로 가지는데,
만약 1번째 블록요소에 float를 적용시키면
이런 식으로 마치 inline-block을 적용시킨 것 마냥 2번째 요소가 1번째 요소의 옆에 붙게 된다!
레이아웃의 순서 보통 인라인 요소들과 블록요소들은 normal flow에 따라 레이아웃이 결정이 되는데,
요소에 float를 적용시키면 normal flow를 벗어나 붕붕 뜨게 되는 것이다.
position은 float 에서 한 층 더 상위 flow에 존재한다.
(그래서 상위 레이아웃에 있을수록 수정이 어렵기 때문에
보통 페이지 레이아웃을 구성할 때 positon을 쓰지 않는 편이라고 한다.
그래서 가급적이면 normal flow대로 착착 쌓아가며 하는 편이 좋다.)
이러한 레이아웃 순서가 존재하므로, 같은 레이아웃 계층(?)에 있는 요소들끼리 인식하는데,
이러한 특성 때문에 normal flow에 있는 요소들은 float과 position에 있는 요소들을 인식하지 못한다.
그래서 만약 부모 요소와 자식 요소 2개가 있다고 가정할 때,
자식 요소에다 float를 적용하면 부모 요소는 float 레벨이 된 자식들을 인식하지 못해서
height 길이가 자기 자신을 기준으로 잡히게 된다.
이렇게 인식하지 못하는 문제점을 해결하려면 block-formatting-contexts를 만들어야 하는데,
(자세한 내용은 아래 MDN 문서 참고)
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
Block formatting context - Developer guides | MDN
A block formatting context is a part of a visual CSS rendering of a web page. It's the region in which the layout of block boxes occurs and in which floats interact with other elements.
developer.mozilla.org
핵심은 position을 쓰거나 float를 clear함으로써 새로운 블록포맷팅컨텍스트를 만들 수 있다는 것이다.
대표적인 방법으로 다음과 같은 방법들이 있다.
1. 부모요소에 overflow 속성을 추가
but 문제점:
원하지 않는 스크롤바나 잘려진 그림자가 생기며,
협업 시 overflow를 어떤 목적으로 사용했는지 불분명해보일 수 있다.
이럴 경우 주석을 달아주는 것이 좋다고 한다!
2. 부모 요소의 높이 값을 직접 지정
강제로 값을 지정하므로 좋은 방법은 아니다.
3. clear 속성 사용
float이 사용된 요소의 바로 다음 형제 블록 요소에 clear 속성을 사용한다.
오직 float 인식 문제를 해결하기 위해 사용되는 clear은 left, right, both 값을 가질 수 있다.
<!doctype html> <html> <head> <style> div{ width:100px; height:100px; background-color:black; } .first{ float:left; } .second{ clear:both; /* both 속성은 left, right 둘 다 클리어 합니다. */ background-color:pink; } </style> </head> <body> <div class="first"></div> <div class="second"></div> </body> </html>4. 부모요소에 ::after 가상요소 사용 (clear-fix 방법)
.wrap::after { content:''; display:block; clear:both; } /*부모요소에 after 가상요소*/이렇게 부모요소에 after 가상요소를 사용하면 부모가 자식을 알아볼 수 있다.
그 외 재현님의 코드리뷰와 라이브코딩을 보며 얻은 꿀팁들
- 가상요소는 inline이므로 너비와 폭이 설정이 안된다. (따라서 필요 시 display:block 설정)
- svg 확장자는 간단한 이미지에 하기 적절하다.
- a 태그를 쓸 때 링크를 비우고 새로고침이 안되게 하려 한다면 <a href ="#none"></a>
- figma에서 보이는 값에서 border를 뺀 값으로 padding을 줘야 한다. (border값과 합쳐서 보이기 때문)
- 아이디 | 비밀번호 에서 |는 width와 height 값을 설정하는 것이 좋다. (문자를 쓰면 브라우저마다 다르게 보이기 때문)
반응형'TIL > 멋쟁이사자처럼 FE스쿨 2기' 카테고리의 다른 글
[Day 14] CSS Grid (0) 2022.04.15 [Day 13] CSS Combinator & Flex (0) 2022.04.13 [Day 11] CSS position / fixed와 sticky (0) 2022.04.12 [Day 10] 라떼는 말이야~ 1기 슨배림들 특강 & 노션 엠배서더 해봄님 특강 (0) 2022.04.08 [Day 9] CSS 길이 단위 / overflow / 가운데 정렬 (6) 2022.04.08