예전에는 float을 이용하여 layout잡는것에 많이 사용해왔다.
하지만 grid, flex가 생겨나에 따라서 다루기 어려운 float을 더이사 사용 할 일이 없어졌다.
float은 간단히 소개 하면 자기 자신이 어떤위치에 있어야 하는가? 를 결정 할 수 있는 속성이다.
다음은 mdn의 소개이다.
CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다.
* 출처 : https://developer.mozilla.org/ko/docs/Web/CSS/float
하지만 아무리 보아도 위의 설명으로는 더 이상 사용 할 일이 없어 보인다. flex, grid로 해결 할 수 있다.
그렇지만 deprecated된 속성이 아니다. 그렇다면 float으로 밖에 할 수 없는 행위가 있을까? 그렇다 있다.
애초에 아래의 내용을 보면 여태까지 float으로 레이아웃을 잡았던 것이 이상하게 느껴질 정도이다.
( 뭐 나도 그렇게 잡아왔고, 그 당시에 html, css 책 들에도 그런 방식으로 소개 되어왔다. )
위의 효과를 줄 수 있는 방법은 float이 유일할 것으로 보인다. 물론.... width를 고정 시키고 margin과 padding을 사용하여 노가다를 한다면 가능하겠다만...
하지만 위의 효과를 바라는 디자이너도 없겠지..
자세한 내용은 mdn에서 참고 할 수 있으니 링크 달아 두겠다.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Images
댓글
댓글 쓰기