음 짧게 쓰겠습니다. CSS 속성에서 float:left(혹은 right)에 관한 문제입니다. float 속성은 이미지 등의 개체(element)를 왼쪽이나 혹은 오른쪽으로 배치시킬 때 사용하는 속성입니다. 예를 들어 티스토리에서 이미지를 올릴 때 왼쪽에 한 장, 오른쪽에 한 장을 올렸다고 합시다(역시나 티파니...). 아래와 같은 식으로요.
왼쪽 정렬
오른쪽 정렬
문제는 이때 이미지 폭이 그리 크지 않아서 위와 같이 이미지 사이에 빈 공간이 남을 때입니다. 이때 아무 조치도 취하지 않는다면 아래와 같이 이미지 삽입후 적은 글이 의도하지 않게 그림 사이로 끼어드는 것처럼 보이게 됩니다.
왼쪽 정렬
오른쪽 정렬
이렇게 말이죠 -_-
처음에도 말했듯이 이는 float 속성 때문입니다. 공간이 남을 경우 자동으로 남은 공간에 남은 내용을 배치시키기 때문인데요, 이를 방지하기 위해 앞서 지정한 float 속성을 취소해야만 합니다. 이때 사용하는 속성이 clear 속성입니다. 즉, 티스토리에서 글을 쓸 때는 html 모드에서 이미지 삽입 치환자(코드) 뒤에 <div style="clear:both;"> </div>와 같은 식으로 입력해주면 됩니다. 바로 이 포스트의 예를 들면 윗부분의 html 코드는 다음과 같고
이 포스트의 html 모드 화면 1
아랫부분의 html은 다음과 같습니다.
이 포스트의 html 모드 화면 2
clear 속성을 사용했을 때와 사용하지 않았을 때의 차이를 볼 수 있죠?
지난번에 쓴 CSS로 이미지에 그림자 넣기 포스트에서 소개한 방법은 float:right를 이용해 이미지를 오른쪽으로 보내버리기 때문에 이미지의 폭이 작아 빈 공간이 생길 경우 텍스트가 의도하지 않게 이미지 왼쪽에 나타나게 됩니다. 때문에 이미지 삽입 후에는 이미지 뒤에 <div style="clear:both;"> </div>와 같은 식으로 앞서 지정한 float 속성을 취소해주는 것이 좋습니다.
사실은 작년 3월에 이 블로그 처음 만들 때 생각했던 방법입니다. MS 워드를 보면 특정 문자 위에 강조점(혹은 뭐 방점?)을 찍어서 꾸미기 할 수가 있는데요, 그것을 웹으로 옮겨보자는 착상이었습니다(워드에서 강조점을 찍은 후, html 형식으로 저장하면 강조점은 밑줄로 대체됩니다).
MS 워드에서 강조점을 찍은 예
처음에 생각한 방법은 어떻게든 구두점(.)을 텍스트 위로 출력되게 하는 방법이었지만, 이는 실패했습니다. 그래서 어쩔 수 없이 강조점의 이미지(gif 파일)를 만들고 그것을 CSS로 배경으로 출력해봤습니다. 지금까지 포스팅하며 강조점을 사용한 경우가 몇 번 있었는데, 가령 다음 포스트에서와 같은 식입니다.
예전 포스트에서 강조점을 사용한 예
뭐, 워드보다는 별로 보기 안 좋은 듯하죠-_-; 이건 강조점의 이미지 파일을 예쁘게(-_-?) 만들면 충분히 개선가능한 부분입니다. 실제로 CSS를 사용해서 출력하면 다음과 같습니다.
강조부 글꼴크기 16px. 나는 오제이유 거리를 아는 사람을 단 한 명도 만나지 못했다. 강조부 글꼴크기 15px. 나는 오제이유 거리를 아는 사람을 단 한 명도 만나지 못했다.
이런 저의 방법에는 커다란 제약이 몇 가지 있습니다. 글꼴크기에 px 단위를 사용한다는 점, 제한된 글꼴크기에밖에 사용할 수 없다는 점, 고정폭 글꼴에만 사용할 수 있다는 점, 한글과 영문이 섞인 부분에는 사용할 수 없다는 점 등등등-_-입니다. 근 1년 동안 아주 가끔씩-_- 고심했지만 결국 해결하지 못한 채 포스팅합니다. CSS를 더 잘하는 분들이 개선해주지 않을까 하는 희망에서입니다-_-;; 다음은 CSS 코드.
