코딩 슬라임 공방

See the Pen BaoYKOx by Lee Hoyeon (@nixpluvia) on CodePen. 주의점 float요소를 가지고 있는 부모에게 ::after 선택자를 사용해서 clear를 해줘야 한다. 제작 하면서 주의해야 할 점은 하위 메뉴가 너무 커서 아래 이미지사진의 범위까지 침범하는데 그 때에 이미지 아래에 하위메뉴가 가려져 버리는 불상사가 발생하는데 그 때 z-index를 사용해서 하위메뉴를 이미지 위에 띄운다. 서브 이미지들도 float를 사용해서 정리하지만 하위에 붙어야 하는 이미지 2개는 붙지 않으므로 position을 사용해서 정리해준다.

float 속성을 사용해서 레이아웃을 작성할 때, 부모가 float 속성을 가진 자식의 크기를 반영하지 못하는 문제가 생깁니다. 그래서 문서의 흐름에서 벗어나서 혼자서 둥둥 떠다니는 경우가 생깁니다. 그 원인은 float 속성을 가진 요소와 다른 요소들이 서로 다른 층에 떠있게 되어서 발생하는 현상입니다. 레이아웃 문제 해결 방법 해결 방법에는 여러가지 방법이 존재합니다. See the Pen abvVMMj by Lee Hoyeon (@nixpluvia) on CodePen. 부모 요소에 float 속성을 부여 float 속성을 가지고 있는 요소를 감싸고 있는 부모에게 float 속성을 부여하여 해결 할 수 있습니다. 하지만 이 방법은 다른 모든 레이아웃들도 float 속성으로 모두 정리해주지 않으면 다..

Float Float 속성의 용도 float의 단어는 원래 '뜨다'라는 의미를 가지고 있다. float속성은 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가 에대한 속성입니다. 하지만 요즘에는 레이아웃을 구성하는대에도 많이 사용하고 있습니다. Float 의 속성값 none : 요소를 부유시키지 않습니다. 기본값 입니다. left : 요소를 왼쪽으로 부유시킵니다. right : 요소를 오른쪽으로 부유시킵니다. initial : 기본값으로 설정합니다. inherit : 부모요소로 부터 상속 받습니다. left와 right를 사용해서 부유속성을 지정하면 display의 값은 무시됩니다. 다만 none의 속성값일때는 제외합니다. Clear Clear 속성의 용도 float 속성을 통해 부유..