CSS float
CSS float
float은 정렬방법중 하나이다. float은 float만의 특성이 있기 때문에 조심해서 사용해야 한다. float을 사용하면 더 이상 width가 100%가 아니다. 왜냐하면 float은 이름대로 행동한다. 떠있다. 하지만 겹치는것은 아니다.?! 자세히 말하자면 컨텐츠는 겹치지 않으나 블록 범위는 겹쳐진다라고 하는게 맞는것같다.
div태그가 차례로 있을때 맨처음 div태그에 float 속성을 작성하면 inline속성과 같이 컨텐츠의 크기만큼만 부피를 차지하게된다.(추가적으로 높이와 너비도 지정해 줄 수 있다.) 형제 태그에 있던 텍스트나 컨텐츠들이 float속성이 적용된 컨텐츠를 둘러싸게된다.
이러한 속성으로 float은 글과 함께 이미지를 삽입할 때 많이 사용한다. img태그의 경우 기본적으로 block level속성을 가지고있는데 block level 속성으로 인해서 옆에 공백이 생기고 글들이 밑으로 내려가는 문제가 발생한다. 이때 float을 사용하여 이미지의 위치를 지정하면서 inline level과 같은 속성효과가 발생되어 삽입된 image옆에 글들을 위치 시킬 수 있다.
만약에 float속성을 사용했지만 형제태그(sibling)가 컨텐츠를 둘러싸는것을 원치 않다면 둘러싸이는 컨텐츠의 위치에따라 clear: left; 또는 clear:right; 또는 clear:both; 해주면 된다. 그러면 float속성을 가진 컨텐츠의 밑으로 이동한다.
그리고 한가지 float의 문제점은 부모태그가 float속성의 자식태그를 인식하지 못한다는것이다. 따라서 높이가 0이 되어버리는 문제가 발생한다. 즉 float의 크기가 어떻하든 아무것도 없다고 인식하여 css효과가 적용이 안된다.
이러한 문제로인해 배경색이 적용이 안되는 문제가 발생하기도 한다. float속성의 자식을 인식하게 하려면 자식태그를 감싸고있는 부모태그에 overflow: auto나 overflow:hidden을 주어여 부모 태그가 정상적으로 자식 태그의 높이를 인식한다.
추가적으로 부모태그안에 두개의 컨텐츠가 있다고할때 하나는 float속성이 적용된 컨텐츠, 나머지 하나는 그냥 일반 텍스트라고할때 부모태그의 속성은 float속성이 없는 태그에만 적용이된다. 이때도 문제가 발생하게되는데 부모태그에 배경색을 노랑색으로주면 내가 작성한 텍스트의 크기만큼만 노란색 배경이 적용되고 float속성이 적용된 컨텐츠에는 적용되지 않는다. 그런데 일반 텍스트의 컨텐츠의 height가 100px이고 float속성이 적용된 컨텐츠는 height가 500px이라고 하면 디자인에있어서 불균형이 발생한다. 이때 두 컨텐츠의 블록의 크기를 맞춰주기 위해서는 부모태그에 overflow: auto나 overflow:hidden을 작성하여 두 태그의 크기가 동일하게 만들 수 있다.
추가적으로 부모태그안에 두개의 컨텐츠가 있다고할때 하나는 float속성이 적용된 컨텐츠, 나머지 하나는 그냥 일반 텍스트라고할때 부모태그의 속성은 float속성이 없는 태그에만 적용이된다. 이때도 문제가 발생하게되는데 부모태그에 배경색을 노랑색으로주면 내가 작성한 텍스트의 크기만큼만 노란색 배경이 적용되고 float속성이 적용된 컨텐츠에는 적용되지 않는다. 그런데 일반 텍스트의 컨텐츠의 height가 100px이고 float속성이 적용된 컨텐츠는 height가 500px이라고 하면 디자인에있어서 불균형이 발생한다. 이때 두 컨텐츠의 블록의 크기를 맞춰주기 위해서는 부모태그에 overflow: auto나 overflow:hidden을 작성하여 두 태그의 크기가 동일하게 만들 수 있다.
이러한 문제점들을 파악하고 float을 정확히 알고 사용하기 위해서는 블록 서식 맥락을 알고 있어야한다.
블록 서식 맥락(block format context)
codepen 연습
댓글
댓글 쓰기