CSS 관련된 작은 팁 - float 문제 해결책. Image 밑으로 본문을 새로 줄바꿈해서 출력하려면.

css 속성 중 float에 관한 예제 이미지:

사전 설명 1. DIV 등의 태그에 걸 수 있는 style 중에서 float , inline 이라 하면 왼쪽에 보는 이미지처럼, 본문 좌측이나 우측으로 글과 함께 신문 기사처럼 나열할 때 많이 쓰는 요소이다.

사전 설명 2. Image Assist 이라는 모듈을 사용해서 편하게 이미지를 본문에 투입할 수 있다.

Image Assist 모듈을 이용해서 본문에 이미지를 추가한 다음에 보면,
[본문이 이미지의 우측이나 좌측에 들러붙어 버린다!]
예제 이미지에 나온대로 배치하고 싶은 때도 있지만 그렇지 않은 경우도 있다.

그냥 새로 줄바꿈을 해서 이미지 아래에 본문을 넣고 싶은데... 얼핏 생각하면,
br이나 p나 새로운 div를 동원하면 간단하게 해결될 것 같은데 이게 그렇지 않다.

대부분의 드루팔 테마에서는 이미지 옆쪽에 본문이 자동으로 들어가도록 한다. 예를 들어 itheme나 marinelli 테마도 그렇다. 이러한 테마에서는 아무리 이미지 아래로 본문을 새로 줄바꿈을 하려고 해도 안된다.
이유인즉 그 테마 자체의 css에 이미 div 요소 등이 float을 포함하고 있기 때문이다.

그렇다면 이미지 아래에 어떻게 본문을 새로 줄바꿈해서 출력할 수 있을까?

방법은 간단하다. 이미지와 분리하고 싶은 본문을 div로 씌운 다음에, 그 div의 시작 태그에 다음과 같이 CSS를 적용한다.

div style="float: none;"

설명하자면, 기존의 스타일 적용값 중에서도 float 속성을 사용하지 않겠다는 말이다.

* 이 팁은 브라우저의 종류에 따라서 원하지 않는 레이아웃이 출력될 수 있다.

* IE6.0에서는 잘 안되는 경우가 있는데, 이를 해결하는 팁은,
원래 하나 뿐이 div의 바깥을 다시 한번 더 div나 span으로 감싼 다음에
div class="none" style="float: none" 를 적용하면 잘 보인다.