이전에는 CSS에서 인라인 요소 / 블록 레벨 요소가 가지는 기본적인 위치 지정 속성에 대해서 배웠다면 더 나아가 float, grid, flex 3형제가 있다. (나한텐 참 복잡하다...) float에 대해 정리해 보고 float가 가는곳엔 항상 따라다니는 overflow에서도 정리해보려 한다.
Float
이전 글에서 언급했다시피 html에서 블록 레벨 요소는 한줄을 다 차지 하여 다음 요소는 바로 밑줄에 내려 오게 된다.
이러한 블록 레벨 요소들을 다른 요소들과 어울리며 정렬 시켜 주는 것이 'float' 속성.
float:left float:right로 블록 레베 요소들을 좌측, 우측 정렬할 수 있다.
float:right의 속성을 줄 경우, 오른쪽에 해당 블록 요소가 위치하게 되고 나머지는 박스의 왼쪽에 위치하게 된다.
보다시피 float 속성을 사용해 주면 width를 지정해준게 아닌 이상 콘텐츠의 영역만큼 자리를 차지하게 된다. 블록 요소가 인라인 요소처럼 되는 것이라고 보면 되겠다.
이런 float 속성을 사용할 때 생기는 문제점이 몇가지 있다.
1. float 속성의 요소를 부모 태그가 인식하지 못한다.
2. float 속성의 요소를 형제 태그가 인식하지 못한다.
위와 같이 부모 태그가 float 속성을 받은 자식 요소를 인식하지 못하는 문제가 생긴다.
float는 말 그대로 원래 블록 요소가 위치해 있어야 할 자리에서 붕~ 뜨는 것이기 때문에 인식을 못하는 것이다.
자세히 말하자면, 기본적으로 요소들을 어떻게 배치해서 화면에 보여줄지 정하는 방법은 크게 3가지로
normal flow, float, position이 있다. normal flow는 인라인이나 블록 요소들이 기본적으로 적용되는 위치 방법이다. 그런데 float나 position 속성을 얻게 되면 normal flow의 속성들은 float나 position 속성들의 요소들을 인식하지 못하게 된다.
float를 준 글자나 이미지가 나머지 요소들과 어울려 배치가 되는 것을 보면 인식이 되는것 같지만 사실은 아니다.
텍스트에는 파란색의 border 값을 주었다. border를 보면 사실 텍스트 박스는 뚱이 사진 바로 옆에서 시작하는 것이 아니라 뚱이 사진의 위치를 무시한채 맨 앞부터 시작하는 것을 알 수 있다.
위의 문제 해결 방법
1. 부모 요소에 overflow 속성 추가
overflow..? 물론 평소에 알던 overflow의 역할은 부모요소보다 커진 자식요소를 스크롤 할지, 없앨지 등을 정하는 것인데... 이와 다른 역할이 또 있었다.
부모 태그에 overflow 속성을 추가하는 것은 BFC(Block formatting context) 영역을 생성해 float된 자식의 위치를 인식시켜주는 것이다. 문서 최상위 요소인 <html>태그의 성질과 비슷하게 만들어 주는 것이라고 보면 되겠다.
(자세한 내용은 갓종찬님의 비디오 참고)
https://www.youtube.com/watch?v=O-n1EjDEuIc&t=1171s
2. 그냥 부모요소에 고정 높이값을 줘버리기~
하지만 높이값은 되도록이면 주지말자. 자식요소를 추가해야할 상황이 오면 그때마다 높이값을 바꿔줘야해서 비효율적이다.
3. 자식 요소에 display: inline-block 혹은 position:absolute 설정하기
이 방법은 부모의 크기가 자식의 크기만큼 작아질 수 있다는 단점이 있다.
4. clear 속성 사용.
형제 태그가 float 속성을 가진 다른 형제 태그를 인식해야 할 때 써준다.
clear: left / right / both 로 위치에 맞게 설정할 수 있다.
clear속성을 받은 형제 태그는 float 속성의 다른 형제 태그를 인식하여 둘이 겹치지 않도록 다음 줄로 내려가게 된다.
하지만 형제태그에 clear 속성을 주어도 부모 태그도 float 속성을 인식하게 되는 것은 아니다.
5. Clear-fix 방법 (CSS의 가상요소 ::after로 해결)
부모요소 안에 가장 자식요소를 집어 넣어 부모가 float된 자식들을 인식하게 하는 방법.
이후에 추가된 자식요소들도 인식이 된다.
.wrap::after {
content:'';
display:block;
clear:both;
}위와 같은 가상 요소를 만들어 주면....
아래와 같이 부모가 자식을 인식하게 된다.
이처럼 BFC(Block formatting context) 영역을 생성하여 float된 요소를 부모요소나 형제요소가 인식하게 해주는 방법은 위 방법 외에도 다른 방법이 있다.
더 알아보려면 아래 링크 참고하세요.
https://www.w3.org/TR/CSS21/visuren.html#normal-flow
Visual formatting model
In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. The layout of these boxes is governed by: The visual formatting model does not specify all aspects of formatting (e.g., it does not s
www.w3.org
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
'땀내 품긴 개발 노-트 > HTML, CSS' 카테고리의 다른 글
| [코드라이언] 성배를 들라... Flex -Day12- (2) | 2022.04.25 |
|---|---|
| [코드라이언] 선택자 심화 -Day12- (2) | 2022.04.23 |
| [코드라이언] Text와 Position -Day10- (6) | 2022.04.20 |
| [코드라이언] CSS 단위와 Font , 배경(background) -Day9- (0) | 2022.04.20 |
| [코드라이언] Reset CSS와 선택자(Selector) 그리고 상자(Box) -Day 8- (0) | 2022.04.17 |