음 짧게 쓰겠습니다. 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;로 바꿔줘야 하는 불편함이 남습니다; 이것만은 뭐 어떻게 피해갈 수가 없네요-_-

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



포토샵 등의 이미지 툴이 아니라 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

초대장이라는 게 안 쓰면 모이는 건가 봐요. 한번도 써본 적이 없어서-_-a
어쨌든 방금 확인해보니 저에게 초대장이 45장 있더군요.
필요하신 분들에게 드리려고 합니다.

신청은 이 포스트에 댓글로 남겨주세요.
스팸블로그나 펌블로그 목적이라면 신청하지 마세요.
나중에 확인하고 신고 들어갑니다^^

다음은 티스토리의 초대장 관련 공지입니다. 한번쯤 읽어보세요.

▶ 초대장과 관련하여 꼭! 확인하세요!

• 초대장을 원하시는 분들은 가능하면 방명록이나 댓글을 통하여 본인의 블로그 운영 목적을 밝히고, 또한 이메일 주소를 꼬옥 남겨주셔야 합니다.
• 초대장을 발송한 뒤 스팸블로그로 변경되었을 경우에는 초대명단에서 '신고하기' 링크을 눌러주세요! 신고된 내용은 스팸센터에서 확인 후 제한 조치가 실시됩니다.
• 좋은 새 식구들을 많이 만날 수 있도록 많은 분들을 초대해 주세요! 초대장은 매월 활동성에 따라 충전됩니다.

추가:
댓댓글이 달리지 않은 분들은 이미 등록된 이메일이거나 이미 초대된 이메일이라고 나오는 분들입니다.
다른 곳과 중복하여 초대장을 신청하신 듯하네요. 흠;

현재 시각(10월 7일 오후1시) 기준으로 댓댓글이 달린 분들은,
이메일을 적지 않은 한 분을 제외하고는 모두 초대되었습니다.
그래도 아직 30장 남네요-_-;



추가2:
위에 적었음에도 불구하고-_-

같은 이메일 주소로는 어차피 한 계정밖에 만들 수 없습니다.
다시 말해 아예 초대 자체가 안 됩니다.

다른 곳에 신청하신 분들은 신청하지 말아주세요.



추가3:
저녁 9시 50분, 총 45분을 초대했습니다.
이제 초대해달라고 하셔도 남은 초대장이 없네요^^;
모쪼록 티스토리에서 멋진 블로그 시작하시길 빌겠습니다.

1. 음, 전에 방문하셨던 분들은 발견하셨겠지만... 스킨을 좀 바꿔봤어요. 라고는 해도... 생각해보니 전의 스킨이 어떤 모습인지 스샷 찍어둔 게 없군요-_-ㅋ 난감하지만 어쩔 수 없죠. 백업도 안해놨고 뭐;; 원래 블로그 처음 만들었을 때 티스토리 기본 2단 스킨 중에서 Flower 스킨(따로 주소가 없어 2단 스킨 전체 리스트를 링크합니다)을 사용했는데, 이후 색깔과 폰트만 조금씩 바꿔가면서 사용했습니다. 배경 바꾸고 사이드바에 사용된 이미지는 텍스트로 대체하는 등 뭐 최소한으로 수정해서 사용을 했죠; 사실 이번에도 배경과 색깔 등등 CSS만(스타일시트만) 바꾼 상태입니다; 모니터 밝기를 최소로 해놓고 작업했더니 결과물이 좀 밝게 나온 경향이 있습니다만... 가독성 높아졌다 생각하고 패스-_-)v 어쨌든 기본 골격은 Flower 스킨이라고 할 수 있습니다.
   
   
   

   바로 이 스킨(Flower)

   
   
2. 그리고 공지라고 하기도 정말 뭐하지만; 이 블로그의 기본 글꼴은 맑은 고딕입니다. 블로그 처음 만들었을 때부터 주~욱 그랬습니다만; 귀찮다랄까 해서 공지를 안했네요. 따라서 맑은 고딕 글꼴이 없으신 분들은 돋움체로 보이게 됩니다만... 글꼴 때문에 레이아웃이 깨지는 일은 없구요, 맑은 고딕 글꼴이 없어도 글 읽는 데에는 아무 지장도 없을 겁니다. 문제는 맑은 고딕 글꼴이 클리어타입 안 켜면 상당히 추하게(;) 보인다는 점인데; 이건 어쩔 수 없다고 생각합니다. CRT 사용자분들께는 죄송합니다ㅠㅠ 그리고 몇몇 포스트에서는 영문 글꼴로 consolas나 verdana를 사용하고 있습니다만, 역시 없어도 별 지장은 없습니다(consolas는 MS에서 만든 개발자용 글꼴이고 verdana는 윈도우 xp부턴가 내장 서체로 알고 있습니다. consolas 글꼴을 사용한 포스트는 딱 하나뿐입니다).
   
   
3. FF(파이어폭스)와 IE(인터넷 익스플로러) 두 브라우저 사용시 차이점은 없습니다. CSS 해석에 따라 여백이 얼마간 차이는 나겠지만 레이아웃이 깨지는 일은 없구요(사실 몇 번 있었는데 그때마다 바로 수정했습니다;). 오피스에서 붙여넣은 포스트의 경우 IE에서 보면 화면에 주석이 표시되는 황당한(;) 일이 몇 번 있었는데 별 수 없이 포스트를 수정한 바 있구요. 유감스럽지만 다른 브라우저는 확인을 못했네요. 혹시 다른 브라우저 쓰는 분중에 이 블로그가 제대로 표시되지 않으면 알려주시기 바랍니다.
   
   
4. 이 블로그는 1024*768 이상의 해상도에서 아주 잘 보입니다. 800*600에서는 사이드바가 보이지 않습니다만... 고칠 생각은 없습니다, 죄송합니다. 음, 그리고 전에 와이드 모니터에서 보니까 배경 그림파일 가로 크기가 모니터 해상도에 미치지 못해 짤리게 되는 일이 발생하길래 배경 그림파일 가로 크기를 2000으로 만들고 사용중입니다. 2000 넘어가는 해상도를 사용하시는 분들께는... 역시나 죄송합니다-_-; 2000 이상의 해상도가 대세가 된다면 그때 바꾸겠습니다-_-
   


5. 끝으로 구글 애드센스(Google AdSense) 배치에 있어서는 소소하게 수정이 몇 번 있었는데요, 저 자신이 광고가 많은 사이트를 좋아하지 않기 때문에 나름 최소한도로 배치해놓은 상태입니다. 블로그 만든 지 반년인데 수표는 구경도 못했구요-_-; 지난번에 후글 님이 저희 사무실에 오셨을 때 "본문에 애드센스를 삽입하고 안하고는 하늘과 땅 차이다, 반드시 본문에 애드센스를 삽입해야 한다!"라고 하셨지만... 어쩌겠습니까, 본인이 싫다는데-_-; 애드센스가 망하지 않는 한 언젠가 저도 수표 받겠죠-_- 그냥 이대로 살겠습니다-_- 그래도 혹시 이 블로그에 애드센스가 과하다고 생각하시는 분은 과감하게 지적을... 하지 마시고-_- Adblock 사용을 추천드립니다-_-(농담이고, 많은 지적 바랍니다;)
   

덧: 지역태그에 안드로메다를 입력하면 구글 애드센스가 어떻게 나올지 궁금해져버렸습니다. 만은, 뭐 별 거 없네요-_- 회사 애드워즈(AdWords) 계정으로 키워드로 안드로메다나 입력해볼까 하고 잠깐 무서운 생각을 해봤습니다-_- 사장님이 화내실라나...(당연하잖아-_-!)

제목이 뭔가 거창해 보이지만;;; 실은 Flock 설치한 김에 티스토리 blogAPI도 시험할 겸 Flock 에디터로 글을 써보는 중이다; blogAPI에 대한 자세한 사용법은 [기타설정] BlogAPI 를 활용해봅시다 참고.

Flock이 나온 지는 반년 정도가 지났는데도 Flock에 대한 포스트(정확히는 Flock을 사용하는 사람의 입장에서 쓴 포스트)은 그리 많지 않았다. Flock의 정체성이 소셜 네트워크에 특화된 브라우저라고 한다면 실제로 국내 블로거 중에 Flock 유저가 많지 않은 건 왜일까? 직접 설치를 하고 사용해본 결과, 한마디로 얘기해서 FF와의 차별점이 거의 없기 때문이 아닐까 싶다.

일단 시작화면부터 FF에 macfox(덧2 참고) 같은 테마 적용한 모습과 똑같고-_- 심지어 FF 부가 기능도 약간의 수정(일모리님의 포스트 참고)을 통해 거의 다 적용할 수 있다고 하는데 따라서 커널(엔진) 자체가 거의 FF와 동일하리라고 추측된다(해외 포럼을 찾아보면 정확한 근거가 나오겠지만 일단 생략~_~).

즉 Flock 0.7이 기술적으로는 FF 2.0과 비스무리(?)하다는 얘기인데, 단지 북마크, 사진 업로드, 원격 블로깅 등의 추가된 기능을 위해 FF 대신 Flock을 주 브라우저로 사용할 까닭이 과연 있을까? FF는 아직도 왕성한 개발 단계에 있다고 볼 수 있다. 게다가 전세계에서 부가 기능이 거의 매일마다 쏟아져(;) 나오고 있고. 어쩌면 가까운 시일 내에 FF는 현재 Flock의 기능을 완전히 흡수할 가능성마저 있다.

사실 Flock은 del.icio.us와 flickr.com이라는 웹2.0 양대산맥(?) 사이트에 전적으로 의지하고 있다고 해도 과언이 아니다. 앞으로 그런 사이트는 급속히 늘어날 테니 소셜 브라우저로서 Flock의 의의랄까 앞날이 아주 없는 것은 아니다(그랬다면 물론 Flock이란 브라우저를 내놓지도 않았겠지;;). 딜리셔스를 포함한 소셜 북마크의 경우 대부분 FF 부가 기능 등으로 편리하게 이용할 수 있지만 Flock은 보다 편리하고 통합적인 환경을 제공해준다.

Flock을 주 브라우저로 사용하는 이들은 역시나 프로 블로거(-_-?) 혹은 플리커나 자기 블로그에 사진을 업로드하거나 포스팅을 자주 하는 사람들 정도가 아닐까? 이미 여러 글에서 소개된 바 있듯, Flock에서 사진을 다루는 방식은 상당히 편리하고 직관적이다(달,님의 포스트 참고). 모르겠다, 만약 내가 사진깨나 찍는 블로거였다면 지금 나는 Flock을 완전 예찬하고 있을지도 모를 일이다-_- 하지만 유감스럽게도 지금의 나는 카메라도 없고(휴대폰에조차도…) 블로깅에 뼈를 묻을 만한 여력도 없다. 그러니 적어도 내겐,

현 시점에서 굳이 FF 대신에 Flock을 사용할 이유는 없어 보인다.

덧: 앞으로 언젠가는, IE를 사용하다가 FF를 쓰지 않고 바로 Flock으로 넘어가는 사람들이 생길지도 모른다. 그런 사람들에게는 굉장히 강한 인상을 줄 수도 있지 않을까? … 국내 웹 환경에 비추어보면 아주 먼훗날의 이야기가 될 듯하지만;

덧2: 다 쓰고 macfox 테마를 찾아봤는데, Flock 기본 테마와는 다소 차이가 있었다(당연하지!!). 정확한 명칭은 macfox II graphite였다.

technorati tags:Flock, 플록, FF, 파이어폭스, 웹, 브라우저, 원격 블로깅, blogAPI

Blogged with Flock