CSS float 속성으로 그림과 글자의 레이아웃 멋지게 하는 방법

CSS float 속성으로 그림과 글자의 레이아웃 멋지게 하는 방법

이미지 오른쪽에 글자를 배열하려고  float 속성을 찾아보다 마음에 쏙 드는 내용을 발견했다.

 float 속성 파헤치기?

뭐 이런 제목이라도 맞을듯하다.

자세하게 정리되어 레이아웃을 필요로 하는 디자이너에게는 한 번쯤 꼭 읽어보아도 좋은 듯 한다.

http://blog.wystan.net/2007/08/11/image-alignment-with-css

Copyright © 1997 World Wide Web Consortium, (Massachusetts Institute of Technology, Institut National de Recherche en Informatique et en Automatique, Keio University). All Rights Reserved.

두 번째 p 블록에 clear 속성이 적용되면 이미지 높이로 인해 생긴 공간만큼 p 블록의 위쪽 마진(margin-top)이 자동으로 늘어나게 되고, 그 결과 블록이 이미지 아래로 내려오게 된다.

결정적으로 인터넷 비 표준 익스플로러에서 이미지 하단과 p 단락 사이의 높이에 따라서 서로 다른 마진을 적용시키기 때문에 크로스 브라우징 면에서 사용하기는 어렵다고 생각된다.