faldet himmel

음 짧게 쓰겠습니다. 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 속성을 취소해주는 것이 좋습니다.

대단한 문제는 아닙니다만... 바로 아래 포스트에서 티스토리 이미지 삽입 코드(혹은 치환자라고 불러야 할까요)를 본문에 삽입했다가 일어난 문제입니다.


저런 식으로 이미지 코드를 본문에 넣었더니, '다시 말해' 이후의 내용이 다 날아가서 화면에 표시되지 않는 문제가 있더군요. 순간 흠칫! 했습니다-_- 재빨리 수정을 하긴 했지만 수정 전에 제 블로그 방문했던 분이 계셨다면 "이게 뭐여-_-?"라고 했을 겁니다-_-;;

문제는 티스토리에서 [##_코드내용_##]과 같은 형태의 치환자를 사용하기 때문에 일어난 것이었습니다. 위의 포스트에서처럼 [##_로 치환자 태그를 열기만 하고 _##]로 제대로 태그를 닫지 않으면 이후의 내용이 모두 치환자로 인식되어(parsed) 화면에 표시되지 않는 문제입니다. 그렇다고 [##_어쩌고_##]와 같이 치환자 태그를 제대로 열었다가 제대로 닫는 식으로 표현하려 해도, 해당 텍스트는 단지 치환자로 인식되어 역시 화면에 표시되지는 않습니다. 치환자 앞뒤에 <pre> 태그도 써보고 별짓 다해봤지만 그래도 안 됩니다-_-

그래서 편법을 하나 생각해냈습니다. 먼저 html 모드로 들어가서 대괄호 혹은 각괄호 [와 ]를 html 문자(html entity)로 바꿔주는 방법입니다(html 문자에 관해서는 많은 문서가 나오니까 자세히 쓰진 않겠습니다. 별로 자세히 알고 싶지도 않고-_-). 아스키(ASCII) 코드를 html에서 사용할 때는 &#숫자; 이런 형식이 되는데, [와 ]의 아스키 코드는 91과 93이므로 각각 &#91;과 &#93;으로 바꿔쓸 수 있습니다. &#91;과 [는 화면으로 볼 때는 동일하지만, html 모드에서 글쓰기를 할 때 이 방법을 사용하면 티스토리에서 글쓰기를 완료했을 때 일어나는 치환을 피할 수 있습니다. 이때 치환자의 여는 태그 역시 인식되지 않으므로 [와 ]를 다 바꿀 필요없이 [만 &#91;로 바꿔도 괜찮습니다.

다만, 이렇게 글쓰기를 완료해서 화면에 제대로 표현했다고 해도, 쓰기가 완료된 글을 수정하려 하면 html 문자가 원래 문자로 다시 바뀌게 된다는 점입니다. 따라서 수정할 때마다 다시 [를 &#91;로 바꿔줘야 하는 불편함이 남습니다; 이것만은 뭐 어떻게 피해갈 수가 없네요-_-