음 짧게 쓰겠습니다. CSS 속성에서 float:left(혹은 right)에 관한 문제입니다. float 속성은 이미지 등의 개체(element)를 왼쪽이나 혹은 오른쪽으로 배치시킬 때 사용하는 속성입니다. 예를 들어 티스토리에서 이미지를 올릴 때 왼쪽에 한 장, 오른쪽에 한 장을 올렸다고 합시다(역시나 티파니...). 아래와 같은 식으로요.

문제는 이때 이미지 폭이 그리 크지 않아서 위와 같이 이미지 사이에 빈 공간이 남을 때입니다. 이때 아무 조치도 취하지 않는다면 아래와 같이 이미지 삽입후 적은 글이 의도하지 않게 그림 사이로 끼어드는 것처럼 보이게 됩니다.

이렇게
말이죠
-_-

처음에도 말했듯이 이는 float 속성 때문입니다. 공간이 남을 경우 자동으로 남은 공간에 남은 내용을 배치시키기 때문인데요, 이를 방지하기 위해 앞서 지정한 float 속성을 취소해야만 합니다. 이때 사용하는 속성이 clear 속성입니다. 즉, 티스토리에서 글을 쓸 때는 html 모드에서 이미지 삽입 치환자(코드) 뒤에 <div style="clear:both;"> </div>와 같은 식으로 입력해주면 됩니다. 바로 이 포스트의 예를 들면 윗부분의 html 코드는 다음과 같고

아랫부분의 html은 다음과 같습니다.

clear 속성을 사용했을 때와 사용하지 않았을 때의 차이를 볼 수 있죠?

지난번에 쓴 CSS로 이미지에 그림자 넣기 포스트에서 소개한 방법은 float:right를 이용해 이미지를 오른쪽으로 보내버리기 때문에 이미지의 폭이 작아 빈 공간이 생길 경우 텍스트가 의도하지 않게 이미지 왼쪽에 나타나게 됩니다. 때문에 이미지 삽입 후에는 이미지 뒤에 <div style="clear:both;"> </div>와 같은 식으로 앞서 지정한 float 속성을 취소해주는 것이 좋습니다.

*알림: 티스토리 사용자를 위해 글을 약간 수정했습니다.



포토샵 등의 이미지 툴이 아니라 CSS만을 이용해 이미지에 그림자를 넣는 방법입니다. 기본적으로 예전 홈페이지에 썼던 글과 같은 내용입니다만.

뭐  일단 다음 두 그림을 비교해봅시다. 버섯보다 빛나는 티파니양입니다 *-_-*

위 두 그림에 사용된 이미지 파일은 물론 동일한 파일입니다.


자, 원리는 알 필요 없고-_- 사용방법은... 먼저 다음 그림자 이미지 파일을 다운받아 적당한 곳에 업로드해둡시다. 파일명은 편의상 trans-shadow.png로 저장해주세요. 티스토리 사용자라면 관리>스킨>직접올리기에서 업로드합니다.

그리고 스타일시트에 다음 코드를 삽입합니다. 티스토리의 경우는 관리>스킨>HTML/CSS 편집에서 style.css의 아무곳에나-_- 붙여넣으면 됩니다. 코드의 출처는 끝에 쓰겠습니다.

.img-shadow {
float:right;
background: url(위에서 다운받은 그림자 파일의 주소) no-repeat bottom right; /* Most major browsers other than IE supports transparent shadow. Newer release of IE should be able to support that. */
}

.img-shadow img {
display: block; /* IE won't do well without this */
position: relative; /* Make the shadow's position relative to its image */
padding: 5px; /* This creates a border around the image */
background-color: #fff; /* Background color of the border created by the padding */
border: 1px solid #cecece; /* A 1 pixel greyish border is applied to the white border created by the padding */
margin: -6px 6px 6px -6px; /* Offset the image by certain pixels to reveal the shadow, as the shadows are 6 pixels wide, offset it by that amount to get a perfect shadow */
}

티스토리의 경우 위에서 다운받은 그림자 파일의 주소에 ./images/trans-shadow.png를 써주면 끝입니다. 그리고 그림자를 넣고 싶은 이미지를 삽입할 때에는 다음과 같이 쓰면 됩니다.

<span class="img-shadow"><img src="이미지 파일의 주소" /></span>

이때 이미지는 무조건 오른쪽으로 날아가버리림에 유의하세요(float:right 때문). 그리고 IE에서는 예상치 못한 문제로 제대로 안 나올 가능성이 있습니다.

티스토리 사용자라면 글쓰기 화면에서 이미지 버튼을 눌러 이미지를 업로드하고, html 모드로 들어가서 이미지 삽입 코드, 다시 말해 [##_1C|어쩌고...]앞뒤를 span 태그로 감싸면 됩니다. 이때 반드시 왼쪽(L)이나 오른쪽(R) 정렬이 아닌 가운데 정렬(C)로 올려야 합니다. 그리고 자막(캡션)을 넣을 경우 액자와 그림자가 제대로 나오지 않습니다. 자막을 넣지 않는 것을 추천합니다. 또한, 스킨에 따라 제대로 표시되지 않을 수도 있습니다. 제 스킨의 경우는 .entry 구역(div)에 외곽선(border)이 있을 경우 IE에서 제대로 표시되지 않는 문제가 있길래 .entry 구역의 외곽선을 지웠습니다. 참고하세요.



이상 사용한 코드의 출처는 다음 문서입니다.
http://www.alexallied.com/tutorials/learn-how-to-apply-shadow-automatically-to-an-image-using-css

이 방법 말고 좀더 정교하고 좀더 복잡한 방법도 있긴 합니다. 다음 문서.
http://theshapeofdays.com/2005/11/29/my-contribution-to-the-css-shadow-kerfuffle.html