2008.03.05 22:56

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

왼쪽 정렬

왼쪽 정렬

오른쪽 정렬Canon | Canon EOS 30D | ISO-800 | Off Compulsory | 2007:08:30 12:55:55

오른쪽 정렬

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

왼쪽 정렬

왼쪽 정렬

오른쪽 정렬Canon | Canon EOS 30D | ISO-800 | Off Compulsory | 2007:08:30 12:55:55

오른쪽 정렬

이렇게
말이죠
-_-

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

이 포스트의 html 모드 화면 1

이 포스트의 html 모드 화면 1

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

이 포스트의 html 모드 화면 2

이 포스트의 html 모드 화면 2

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

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



'' 카테고리의 다른 글

Indexhibit  (4) 2009.05.12
두잉(dooing) 베타 오픈  (1) 2008.12.13
티스토리 이미지 정렬 문제  (4) 2008.03.05
티스토리에서 치환자 혹은 대괄호([]) 입력하기  (3) 2008.03.03
CSS로 강조점 찍기  (0) 2008.02.28
무시무시한-_- 구글 광고 발견  (3) 2007.12.24
Posted by 필유
2008.03.03 16:10

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

문제의 부분

문제의 부분


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

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

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

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




Posted by 필유
2008.02.28 17:42

사실은 작년 3월에 이 블로그 처음 만들 때 생각했던 방법입니다. MS 워드를 보면 특정 문자 위에 강조점(혹은 뭐 방점?)을 찍어서 꾸미기 할 수가 있는데요, 그것을 웹으로 옮겨보자는 착상이었습니다(워드에서 강조점을 찍은 후, html 형식으로 저장하면 강조점은 밑줄로 대체됩니다).

MS 워드에서 강조점을 찍은 예

MS 워드에서 강조점을 찍은 예


처음에 생각한 방법은 어떻게든 구두점(.)을 텍스트 위로 출력되게 하는 방법이었지만, 이는 실패했습니다. 그래서 어쩔 수 없이 강조점의 이미지(gif 파일)를 만들고 그것을 CSS로 배경으로 출력해봤습니다. 지금까지 포스팅하며 강조점을 사용한 경우가 몇 번 있었는데, 가령 다음 포스트에서와 같은 식입니다.

예전 포스트에서 강조점을 사용한 예

예전 포스트에서 강조점을 사용한 예


뭐, 워드보다는 별로 보기 안 좋은 듯하죠-_-; 이건 강조점의 이미지 파일을 예쁘게(-_-?) 만들면 충분히 개선가능한 부분입니다. 실제로 CSS를 사용해서 출력하면 다음과 같습니다.

강조부 글꼴크기 16px. 나는 오제이유 거리를 아는 사람을 단 한 명도 만나지 못했다.
강조부 글꼴크기 15px. 나는 오제이유 거리를 아는 사람을 단 한 명도 만나지 못했다.

이런 저의 방법에는 커다란 제약이 몇 가지 있습니다. 글꼴크기에 px 단위를 사용한다는 점, 제한된 글꼴크기에밖에 사용할 수 없다는 점, 고정폭 글꼴에만 사용할 수 있다는 점, 한글과 영문이 섞인 부분에는 사용할 수 없다는 점 등등등-_-입니다. 근 1년 동안 아주 가끔씩-_- 고심했지만 결국 해결하지 못한 채 포스팅합니다. CSS를 더 잘하는 분들이 개선해주지 않을까 하는 희망에서입니다-_-;; 다음은 CSS 코드.

.highlight {
font-family:바탕체,batangche; font-size:16px; font-weight:800; letter-spacing:1px; padding-top:6px; line-height:175%; background-image:url(./images/highlight18.gif); background-repeat:repeat-x; }

.highlight_small {
font-family:바탕체,batangche; font-size:15px; font-weight:500; letter-spacing:0px; padding-top:6px; line-height:175%; background-image:url(./images/highlight16.gif); background-repeat:repeat-x; }

여기서 바꿀 수 있는 것은 바탕체 대신 굴림체 등의 고정폭 글꼴을 사용할 수 있다는 정도입니다. 이미지 폭과 letter-spacing 및 font-weight를 변경해가면서 실험을 해보면 다른 글꼴크기에서도 사용할 수 있을 것입니다.

사용한 이미지는 다음 두 가지. 크기를 줄이기 위해 4컬러 팔레트로 저장했습니다. 두 이미지 폭이 다르다는 점에 유의해주세요. 또한 혹시 모를 상황을 위해 이미지 높이는 넉넉하게 잡았습니다.

highlight18.gif - highlight 이미지(18*64)

highlight18.gif - highlight 이미지(18*64)

highlight16.gif - highlight_small 이미지(16*64)

highlight16.gif - highlight_small 이미지(16*64)


혹시나 해서... 티스토리에서 적용하는 방법


앞으로 개선할 여지가 많지만 어떻게 해야할지 가닥이 잘 안 잡히네요. 고수분들의 지도편달 부탁드립니다-_-;


Posted by 필유
2007.12.24 18:37
무서운 구글 애드센스를 발견했습니다. 바로 이것.

무시무시하다ㅠㅠ

무시무시하다ㅠㅠ

주소도 수상하다!

주소도 수상하다!


그러니까, "내 이름은 드로라 라이머. 난 어린 애들 먹는 게 제일 좋아"라는 내용인데... 대체 누가 이런 구글 광고를-_-?

"Drora Rimer"로 구글링을 해보면, 이런 광고를 본 사람이 저 말고도 한 사람(영어권 블로거 중에서) 있는데, 아직 이 광고의 정체는 불명이라고 합니다. 혹시나 해서 링크를 클릭해봤으나, 없는 주소로 나오고-_-

이 광고가 나오는 사이트로 현재까지 제가 아는 사이트는 http://www.songmeanings.net 하나뿐입니다. 노래 가사 찾으러 자주 가는 곳인데, 이곳에서 좀 돌아다니다 보면 해당 광고를 볼 수 있습니다. 그나저나 궁금하군요... 누가, 무슨 의도로 이런 광고를 게시했는지;


덧:
요즘 애드센스에 트로이목마 바이러스가 출현한다고 하는데 그와 관련이... 있는지 없는지는 모르겠습니다-_-


Posted by 필유
2007.06.16 13:49

http://www.eharu616.org/

매년 6월 16일은 인터넷의 하루를 타임캡슐에 담는 날입니다.
이렇게 쌓인 기록이 10년, 20년, 100년이 지나면 인터넷 상에서 일어나는
많은 일들의 변화를 관찰할 수 있는 소중한 역사적 기록이 됩니다.
인터넷 상의 정보를 모두 수집하고 보존하기는 어렵지만,
일년에 딱 하루! 우리가 힘을 모으면 소중한 인터넷의 역사를 함께 기록해갈 수 있습니다.

"인터넷을 기록하고 수집하는 활동에 동참해주세요."

...라는 이야기인데요, 2004년에 시작해서 이제 3년째라고 하는군요.
글쎄요, 참여 의의를 떠나서 사이트 디자인부터 그다지 끌리지 않는군요... '')

사실 요즘처럼 웹이 하루가 다르게 변해가는 속에서
이런 식의 아카이브가 얼마나 '2007년 6월 16일 인터넷의 하루'를 얼마나 잘 담았다고 말할 수 있을지...
조금 의문이기도 하구요.

어떻게 보면 바로 그런 이유 때문에 의미가 있는 일일 수도 있지요^^;
하지만 전 쏟아지는 잠의 유혹에 굴복... 컴퓨터와 인터넷에 gg 치고 잠시 자렵니다 -_-;


Posted by 필유
2007.04.09 21:35

지난번 메타복스 검색 엔진 플러그인 포스트에 댓글을 달아주신 파스크란님 덕분에 Add to Search Bar 또는 OpenSearchFox와 같은 부가기능을 이용하면 어떤 사이트든 쉽게 검색 사이트로 추가할 수 있다는 사실을 배웠는데요, 그럼에도 불구하고 굳이 Mycroft에서 추가할 수 있는 검색 엔진 플러그인을 하나 더 만들어봤습니다.


아시는 분은 아시겠지만 Gnosis라는 사이트가 있습니다. 해외 유수의 아트록/프로그레시브록 전문가(?)들이 모여서 만든 곳으로, 그들이 자신들이 들어본 음반들에 매긴 평점을 데이터베이스(DB)화한 사이트입니다.

프로그록 음반은 찾는 사람이 없는 관계로 정확한 DB나 혹은 제대로 된 평가를 찾기가 힘든데요,
그런 의미에서 아주 유용한 사이트라고 할 수 있습니다. 흔히들 '이쪽' 음반에 대한 정보를 검색하면 골수 콜렉터 또는 음반사에서 쓴 극호평 일색의 편파적인 평가가 대부분이라는 사실, 조금만 찾아보신 분이라면 동감하실 겁니다. 가령,

Os Mundi, Karthago, Metropolis등의 멤버들과 함께한 밴드의 마지막 장면을 고스란히 담은 1974년 스튜디오 레코딩. 싸이키델릭 록과 재즈 등 여러 장르의 요소들을 크라우트 록이라는 범주아래 일체화시키는 비범한 능력이 청자를 감탄하게 만드는 걸작. 상세한 해설과 사진이 수록된 36페이지 부클릿 삽입.(비트볼뮤직) (출처: 메타복스)

이 카피는 독일 크라우트록/스페이스록 밴드 중 굉장히 잘 나갔던 Agitation Free의 74년 음반 [The Other Sides Of Agitation Free]에 달려있는 소개입니다. 이 글만 읽으면 잘 모르는 사람으로선 '이거 뭔가 굉장한 음반 같은데?'라고 생각하기 마련이지만, 글쎄요. 이 음반의 Gnosis 평균 평점은 7.42점입니다.


사용자 삽입 이미지

Gnosis 검색결과 화면(Agitation Free)


표준편차도 큰 편은 아닙니다. 잘린 오른족 화면을 보면 대부분의 전문가들이 7에서 8점 정도의 점수밖에 주지 않았음을 확인할 수 있죠. 반면 명반이라 평가받는 73년도 2집 [Second]는 평균이 11.56점입니다. 1집은 11.82점이구요. 3,4집 및 99년 라이브 음반마저도 최소 8점은 넘는 평균입니다. 다시 말해 이 음반은 (적어도 평점상으로는) 이들의 최악의 음반이라는 결론이죠-_-

이건 프로그록을 처음 듣는 사람이 '밴드에 대해 잘 모르고' 음반을 사게 될 때 범하기 쉬운 실수입니다. 사실 저 역시 Agitation Free의 음반 중에 처음으로 샀던 음반이 바로 이거였거든요-_- 90년대 말부터 정말 그야말로 초희귀 크라우트록 음반을 재발매(및 초발매-_-)하기 시작한 Garden of Delight에서 처음으로 발매한 이 음반은, 사실 크라우트록이라 하기도 뭐할 정도로, 그냥 놀자판으로 만들어진 음반이었습니다(그래서 음반명도 우리의 다른 면모를 보여줄게-_-였던 거죠).



암튼,
이런저런 의미에서 Gnosis는 꽤나 객관적인 정보를 얻을 수 있는 곳입니다. 100명에 가까운 전문가들이 매긴 평점의 평균을 통해 대략적인 음반의 가치(이런 단어는 정말 쓰기 싫지만;)를 따질 수 있으니까요. 간혹 음반에 따라 호오가 크게 갈리는 경우도 있습니다. 그럴 경우에는 표준편차가 꽤 커지게 되죠. 가령,

사용자 삽입 이미지

Gnosis 검색결과 화면(Tyburn Tall)


역시 Garden of Delight에서 최초로 발매한 Tyburn Tall이라는 완전 안 알려진 밴드의 96년 재결합 공연 음반은 보다시피 (평가한 사람이 3명뿐이지만;) 3점을 준 사람이 있는가 하면 10점을 준 사람도 있죠. 물론 이 경우에, 우리는 경험적으로(?) 프로그록하던 젊은이들이 아저씨가 된 후에 재결합해서 낸 음반은 (거의) 쓰레기라는 사실을 잘 알고 있으므로 3점이 정확한 평가가 아닐까 하고 강하게 추측할 수는 있겠습니다만;


한 가지 더, 프로그록 음반은 워낙 찾는 사람도 없고;; 희귀한데다가 부틀렉도 많기 때문에 한군데에 제대로 정리된 사이트가 거의 없다시피 합니다. 물론 AMG에 어느 정도 유명한 슈퍼밴드들의 음반은 잘 정리가 되어있긴 하지만, 아시다시피-_-)r 프로그록 세계에 빠져들면 들수록 도대체 이런 음반이 지구상에 존재하긴 했던 거냐-_-? 싶은 음반이 계속 발견되니까요;

크라우트록, 이탈리아 심포닉록 등 하위 프로그록 장르에 특화된 사이트를 제외하면, 그나마 가장 큰 DB를 갖춘 곳이 gepr.net 정도랄까요. 하지만 등록된 음반의 수만 놓고 보면 Gnosis가 gepr.net을 훨씬 능가(하는 듯)합니다. 찾다 찾다 마지막에 가는 최후의 보루와 같은 곳이죠 :) 물론 요즘은 귀찮아서 다른 곳은 안 가고 그냥 Gnosis만 가서 평점만 슥~ 보고 나오긴 하지만;



음, 글이 길어졌습니다-_-
Gnosis, Garden of Delight, 크라우트록 관련 사이트 등 할 얘기가 너무 많네요. 각각의 주제에 대해 포스팅을 수십개 해도 모자랄 판인데 한 글에 너무 집어넣은 듯합니다-_-a

사용자 삽입 이미지

죄송합니다-_ㅠ

암튼, 결론은 Gnosis의 검색 엔진 플러그인을 만들었다는 얘기였습니다; Mycroft에서 gnosis로 검색하면 나옵니다. 다른 사이트들처럼 클릭해서 추가하고 사용하시면 됩니다 :) 한가지, 아이콘 크기를 32x32로 집어넣어봤더니 파폭에서 세로크기가 두배(?)로 나오는 생각지도 못했던 버그(?)가 있습니다;

일단 Mycroft쪽에 수정해달라고 요청은 한 상태인데요, 언제 해줄지는 절대 모르겠네요; 일단 제출하면 수정도 삭제도 안 되거든요; 이게 파폭의 문제인지 아니면 검색 엔진 플러그인 xml 파일 자체에서 이미지 인코딩시에 생기는 문제인지는 확인을 못한 상태인데요, 어쨌든 괜히 32x32 크기의 아이콘을 시도한 제 잘못입니다-_-;; 다음에 수정하면 다시 포스팅을 하는 방향으로...;

왠지 이번 포스팅의 주제는 사실은 Gnosis를 소개하는 내용이 되어버렸네요; 뭐 이것만으로도 의의는 있으니까요-_-)r 덧붙이자면(;) Gnosis는 검색 옵션이 다양하다는 점도 장점입니다. 가령 1969년에 독일에서 나온 음반 중에서 평가가 15개 이상 달린 음반만 평균이 높은 순서대로 보여줘~ 식의 쿼리가 가능하죠. '이쪽' 세계에 발을 담근 분이라면 모르면 안 되는 곳입니다 :)
Posted by 필유
2007.04.01 06:18



일단은 새싹 버전이라는군요.

스프링노트 로고

스프링노트 로고


정확히 언제 오픈했는지는 모르겠지만(3일전만 해도 비공개였는데;;)
방금(!) 가보니까 오픈했더군요.


이미 openID는 가지고 있었기에 바로 로그인해서 개설했습니다 - http://feelyou.springnote.com

만은, 아직은 잘 모르겠군요. 이걸 어떤 방식으로 활용할 수 있을까요?
보아하니 메신저로 글쓰기와 같은 재미있는 기능도 이미 나와있긴 한데요.
(재미는 있지만 그다지 쓸모 있지는 않을 듯싶군요~_~)

체계적인 글쓰기를 위한 XHTML, 여기에 중점을 둬야 할까요.
그러니까 구글 워드의 예쁜(?) 버전 정도?

앞으로 좀 사용해보며 협업 가능성을 고려한 활용방안을 모색해봐야겠습니다.
...라고 쓰고 나서 생각하니 좀 웃기군요.
인간을 위한 기술인지, 기술을 위한 인간인지...-_-

Posted by 필유