요즘 블로그들을 돌아다니다보면(여기도 그렇지만) 글에 줄공책과 같이 줄을 그어놓은 스킨을 쓰시는 분들이 많이 계신 것 같더군요. 그런 블로그들을 보면 이미지나 기타 테그들을 넣으면서 줄간격이 어그러지는데 그것을 보면.. 괜히 글 전체가 지저분하게 보이고... 여튼.. 별로 보기 안좋더군요.
스프링노트를 쓰고 있는데 그곳에도 그림을 넣으면 줄간격이 깨져서 이미지를 잘 넣지 않고 있는데 이미지를 집어넣고 줄간격이 깨져있는 제 블로그를 보니 고치고 싶은 마음이 자라가 고개를 내밀듯 불쑥 나타나더군요~
그래~서! 만들었습니다..^^: 하지만.. 완벽한 것이 절대로 아니라는 거~ (제가 자바스크립트를 잘 모르다보니 여기저기 자문을 얻어서 뚝딱뚝딱 만들어 넣었기에;;;)
그냥 이런 팁이 있다는 것 정도로만 알아주시면 고맙겠습니다.... (이 방법을 개량해서 좀 더 포괄적이고 멋지게 적용시켜 주실 수 있는 분 있으시면 저한테 꼭 트랙백이나 리플로 알려주시면 감사하겠습니다~)
먼저 원리를 설명드리자면 간단합니다.
줄간격을 22px로 설정했다고 합시다. 이미지의 크기는 제각각일 것이고요. 이미지의 height를 22px의 배수로 만들면 줄간격이 흐트러지지 않고 깔끔하게 나올 수 있을 것 같더군요. 하지만 height만 22px의 배수로 만들자니 이미지의 width가 문제생길 수 있고 원본 사이즈 그대로 출력하고 싶었던 것이 줄간격 크기 대로 리사이즈 되는 것도 별로 보기 안좋고 해서. 이미지의 여백을 이용하기로 했습니다. 22의 배수에서 부족한 만큼을 여백의 위와 아래 분배해서 넣도록 하는 것이었습니다.
결국 그 방법으로 이미지에 관해서는 성공을 해서 이미지만 들어있는 글은 줄간격이 잘 맞는 것을 확인하였는데 문제는 이 줄간격을 깨뜨리는 것이 이미지만 있는 것이 아니더군요!!! 털썩... 일단 여기까지 하고 blockquote나 embed , 글자 크기가 다른 것들에 관해서는 천천히 고민해서 해결해야 할 것 같습니다.. ㅜㅜ
위에서도 얘기했지만.. 자바스크립트를 잘 몰라 소스가 굉장히 지저분하니 용서하세요..^^
'공부합시다! > Tip n Tech' 카테고리의 다른 글
| 블로그 줄간격 유지하기. (3) | 2007/09/21 |
|---|---|
| localtime() 함수에 대해... (2) | 2006/10/26 |
| Direct3D와 Floating point 연산 문제. (0) | 2006/10/26 |
| [Rewrite Module] 여러개의 도메인을 하나로.. (12) | 2006/10/04 |
| winnt.h 에서의 오류. (1) | 2006/08/01 |
| 메인 도메인 주소로 이동하기. (0) | 2006/06/23 |
