SAVE THE DEVELOPERS <!> Upgrade IE 6 Now!

이 배너는 IE6 사용자에게만 보여집니다. 브라우저 업데이트로 보다 편리한 웹세상을 만나보세요!

"C.note/Web"에 해당되는 글 68건

  1. 2007/09/02   텍스트큐브에서 가장 좋아진 점은.. 13
  2. 2007/08/17   daumTV팟 동영상에 배경 넣기.. 5
  3. 2007/07/28   마가린 (mar.gar.in) 의 링크롤 (Link roll) 8
  4. 2007/07/15   NEW TOP Image... 16
  5. 2007/06/30   Arial 과 Verdana 의 차이.. 6
  6. 2007/06/28   새 라디오 블로그(Radio Blog) 장착.. :) 4
  7. 2007/06/27   CSS 만으로 이미지에 테두리 넣기. 6
  8. 2007/06/15   Monochrome Skin [Ver2.0] 2nd A/S 2
  9. 2007/06/12   사파리(Safari 3 Public Beta) for Windows 사용기. 4
  10. 2007/06/07   별 도움 안될 불여우 확장들.. :) 6
1234567
«   2026/05   »
일 월 화 수 목 금 토
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            

텍스트큐브에서 가장 좋아진 점은..

Posted by hi8ar Posted in " C.note/Web " 2007/09/02 12:28
역시.. 위지윅 에디터에서 글 작성할때, 본문과 똑같이 볼 수 있다는 것이 아닐까?

wysiwig

똑같아~ :)

비록 wysiwyg.css 라는 css를 하나 더 만들어야 해서 공식적으로 지원하는 스킨이, 기본 스킨 하나 밖에 없겠지만.. (마음이 여유로워 지면, 모노크롬 스킨의 wysiwyg.css 를 만들어 올려두던가, 지금 사용중인 스킨을 텍스트큐브에서 바뀐점을 반영하여 배포하든가 할까 합니다. 요즘은 티스토리가 대세(?)인듯 하니 딱히 필요한 사람이 많지 않을 것 같기도 하고.... 암튼 혹시나 기다리진 마세요. :)
이것 말고는 딱히 피부에 달콤하게 와 닿는게 없음... =_='

TAG , , ,
Trackback, Comments ( 13 )
 

daumTV팟 동영상에 배경 넣기..

Posted by hi8ar Posted in " C.note/Web " 2007/08/17 18:50
daumTV팟 동영상의 사이즈(402x324)에 맞게 적당한 배경 그림을 하나 만들어서, 사용하는 스킨의 이미지 폴더에 올리고..


daum.gif


CSS에 "daum_tvpot" 정도의 이름으로 class를 하나 만들어 넣은 다음..
.daum_tvpot {
	text-align: center;
	margin: 0;
	padding-top: 38px;
	padding-bottom: 20px;
	color: #FFF;
	font-size: 12px;
	background: #fff url(images/daum.gif) top center no-repeat;
}

본문글 작성시, 동영상 소스를 daum_tvpot 이라는 class의 div로 적당히 감싸주기만 하면...

<div class="daum_tvpot">
<object type='application/x-shockwave-flash' width="402" height="324" align='middle' classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0'><param name='movie' value='http://flvs.daum.net/flvPlayer.swf?vid=LJ3SYEg9qFM$' /><param name='allowScriptAccess' value='always' /><param name='allowFullScreen' value='true' /><embed src='http://flvs.daum.net/flvPlayer.swf?vid=LJ3SYEg9qFM$' width="402" height="324" allowScriptAccess='always' type='application/x-shockwave-flash' allowFullScreen='true'></embed></object>
<br />소녀시대 - 다시 만난 세상
</div>

이렇게 됨.. ;}




소녀시대 - 다시 만난 세상



샘플 하나더..

처음엔 괜찮아 보이지만.. 금방 싫증이 나버리는게 단점이라면 단점..
물론 이것은 예전에 언급했던 적이 있던 유튜브 동영상 뒤에 배경 넣기와 같은 방법.. :}

이것은 유튜브 샘플.. ;}


TAG , , ,
Trackback, Comments ( 5 )
 

마가린 (mar.gar.in) 의 링크롤 (Link roll)

Posted by hi8ar Posted in " C.note/Web " 2007/07/28 12:45
사실 마가린(mar.gar.in) 서비스는 처음 나왔을때 반짝 써보고, 한동안 묵혀 두었습니다. 마가린으로 북마크 하는 것이 편리하긴 하지만, 사실 브라우저 북마크에 넣어두나 마가린의 북마크에 넣어두나.. 내 머리에서 기억이 나지 않으면.. 검색할 수 없기는 매한가지였기 때문이죠. :) 아 물론 마가린이 단순한 북마크 툴이 아닌 소셜북마크 어쩌고.. 하는 서비스라는 것은 들었습니다. 다만 저같은 이에겐 너무 어려운 개념이라.. 별 관심이 없을 뿐.. :P

아무튼, (요즘 들어 다시 마가린을 써 보려고 합니다.) 오늘 마가린의 링크롤(Linkroll) 이 공개 되었다는 걸 발견했습니다. 아.. 워드프레스 블로그에서 보고.. 군침만 흘리던.. 딜리셔스(del.icio.us) 플러그인이라고 하는 것과 비슷해 보입니다. :) 드디어 태터툴즈에도.... 달아 봐야 관심 있을 사람 없겠지만...;;

그럼 어디에 달까나.. 워드프레스 처럼 Page 개념이 없는 태터툴즈는 "hi8ar의 북마크" 라는 제목으로 덜렁 북마크만 띄울 곳이 없습니다. :( 무슨 이유에서인지 포스팅에 집어 넣으면 태터툴즈 에디터가 거부합니다. :( 아무튼 스킨 영역에서 해결해 줘야 하는데... 불필요하게 본문 페이지마다 뜨게 넣을 수도 없고, 사이드바는 너무 비좁습니다.

그래서 저는 Keyword 페이지에 넣었습니다. 키워드 페이지에 넣은 것은 그 자리가 제일 한가했기 때문에..;; 비슷하게 Tag 페이지에도 넣을 수 있겠어요. :)

마가린 시식코너의 링크롤(Linkroll) - 스타일 입히기 편... 스타일도 넣으라고 일일이 class 를 지정해 준 센스에 박수~! 짝짝짝~ :)

결과물은 여기에..
얼마나 열심히 마가린 바를지는 저도 잘 모르겠습니다. ( 바빠서... :P )

TAG , , , ,
Trackback, Comments ( 8 )
 

NEW TOP Image...

Posted by hi8ar Posted in " C.note/Web " 2007/07/15 02:33
Trebuchet MS

1. Trebuchet MS



Swis721 Cn BT D-Type

2. Swis721 Cn BT D-Type



저기.. 바쁘지 않으신분. 지나가시는 분이라도 좋습니다. 누구라도! :) 지금 제 블로그의 제목 글꼴이 1번으로 보이시나요? 2번으로 보이시나요? 더불어 어느 글꼴이 더 낫다. 이런 코멘트 환영합니다. 감사합니다.

:)

TAG , ,
Trackback, Comments ( 16 )
 

Arial 과 Verdana 의 차이..

Posted by hi8ar Posted in " C.note/Web " 2007/06/30 06:47
Arial

Arial 13px, line-height:170%


Verdana

Verdana 13px, line-height:170%



같은 크기 같은 줄간격. 글꼴만 변경 했는데도 많이 달라 보인다. 본문에선 Arial 보다 Verdana가 보기 좋아 보이는 듯하다. Georgia > Verdana > Arial..?? Arial은 차분하고 정돈된 느낌 + 호리호리. Verdana는 가독성 좋고 활발하고 장난끼 가득한 느낌 + 조금 뚱뚱. :)
Verdana 적용시의 한글이 더 커 보인다. 커 보이는 건가?(착시현상??) 실제로 더 큰 건가? 옆으로 늘어났나?  ㅡㅅㅡ'

아무튼 Verdana는 글자 사이에 여유가 있고, 마침표등의 문장부호 그리고 기호 따위들이 잘 보여서 좋다!


+ BONUS Trebucht MS.


TAG , , , , ,
Trackback, Comments ( 6 )
 

새 라디오 블로그(Radio Blog) 장착.. :)

Posted by hi8ar Posted in " C.note/Web " 2007/06/28 20:29


잊고 있던 라디오 블로그 (Radio Blog)가 새 버젼(3.1.8)으로 업데이트 되었길레, 잊혀진 계정안에서 썩고 있던  라디오를 꺼내 손 좀 봤습니다. 업데이트 된 새 버젼에선 커버 이미지까지 검색해서 보여 주는 것 같은데.. 왠지 커버(cover) 출력이 됐다 안 됐다 합니다. ㅡ,.ㅡ' 완전 엿장수 맘대로~ 물론 이유는 모릅니다....

선곡은 급한 데로, 보이는 데로, 집히는 데로 아무곡이나.. :) 음질은 라디오 답게, 구린 음질(64k)!
싫증나면 다시 잊혀진 계정에 묻을 겁니다. ;)

Just Click the 'NEW Radio button' on top-right corner! And Enjoy!
(그저 상단 우측 라디오 버튼을 클릭! 그리고 즐겨요!)


TAG , ,
Trackback, Comments ( 4 )
 

CSS 만으로 이미지에 테두리 넣기.

Posted by hi8ar Posted in " C.note/Web " 2007/06/27 00:15
sample1

CSS(스타일시트)에서 img 에 border 속성만 몇줄 적어주는 것으로 , 사진 따위의 이미지에 적당한 테두리를 두를 수 있다. 워드프레스(Wordpress) 스킨 따위에는 흔히 포함되어 있는 트릭! 태터툴즈(Tattertools) 스킨에는 tiskin의 스킨 말고는 아마 없을걸?

다만, 그냥 전체 img에 적용해 버리면, 모든 이미지가 위와 같은 테두리 border를 갖게 되므로 곤란하다. 이를 해결하기 위해서...
.entry img { } 에만 적용하거나, (이렇게 하면 본문 영역에 들어간 모든 이미지에 테두리가 생겨 버린다. 본문영역에 이미지가 사용된 스킨의 경우 곤란할수 있다.) 사실 이건 1UP님의 스킨을 열어보고 안 건데, 1UP님은 .imageblock img { } 에만 적용되도록 넣으셨더라~ 태터툴즈 이미지 업로드 버튼으로 본문에 넣으면 좌,우,센터의 위치를 지정하기 위한 .imageblock 클래스가 들어갈 테니까. 다만 이 경우 FREE 라고 써진 버튼으로 넣을 경우에는 테두리가 생기지 않는다.

Stylesheet ..



아무튼 이미지의 border를 넣고 나면 그 여백과 border의 크기가 더해져 이미지가 차지하는 공간이 결과적으로 커져버린다. 스킨의 '본문 가로 크기'와 '스킨 index.xml에서 지정한 본문 가로크기'(이미지 리사이즈 크기)가 동일하다면, 이미지가 본문의 크기를 넘어 버리게 되는 것. 때문에 여백과 border의 크기를 계산하여 본문의 가로 크기를 늘려주어야 한다. 혹은 'index.xml 의 본문 크기'를 여백과 border를 포함하는 크기가 되도록 줄여주는 방법이 있을 수 있다.(다만 이 경우에는 앞으로의 글들에는 유효하나, 예전에 작성한 글에서는 효과가 없다.)
물론 스킨 자체에 overflow:hidden 따위의 속성이 포함되어 있는 경우, 10~15px 정도 이미지 크기가 늘어난다고 해서 스킨 전체가 틀어져 버리거나 하진 않는다.

몇 가지 더 문제 될 수 있는 경우가 있을 수 있는데,

sample2

예제2


이미지의 배경과 본문의 배경이 일치해야 더 보기 좋은... 이런 이미지의 경우가 그렇다. ㅡ,.ㅡ


포스팅 할때마다 조금 귀찮긴 하겠지만, 스타일 시트에 적당한 이름의 클래스로 넣어 두고, 태터툴즈 에디터 html 모드에서 완전 수동으로 class 를 추가해 주면, 원하는 이미지에만 테두리를 넣을 수도 있다.

sample3

Stylesheet ...



차라리 간단한 사진 편집기, 혹은 포토샵으로 사진 테두리를 만드는게 편할지도.... ㅡ,.ㅡ'

TAG , ,
Trackback, Comments ( 6 )
 

Monochrome Skin [Ver2.0] 2nd A/S

Posted by hi8ar Posted in " C.note/Web " 2007/06/15 14:35
5월의 스킨 디자이너 선정 기념으로(워~..ㅡ,.ㅡ;) 알면서도, 모른척 했던것들을 수정했습니다. @_@''
자세한 내용은 원래 스킨 배포글을 참고해 주세요.. :)

TAG , , ,
Trackback, Comments ( 2 )
 

사파리(Safari 3 Public Beta) for Windows 사용기.

Posted by hi8ar Posted in " C.note/Web " 2007/06/12 15:26
1upz 님 블로그에서 윈도(windows)에서 사용가능한 사파리3(Safari3) 베타가 공개 되었다는 소식을 듣고, 바로 설치 했습니다.. ㅡ,.ㅡ'

Safari3

아예 실행조차 안되는 분들도 있다던데.. 별 이상 없이 실행 되었습니다. 다행이에요. 아무튼, 윈도에서 사파리를 볼 수 있게 되다니 놀랍습니다. :)

벌써 설치해 보신 다른 분들 처럼, 저 역시 한글이 제대로 출력되지 않았습니다. 제어판에서 국가 설정인지 뭔지를 미쿡으로, 조물딱 거려주면 한글이 나온다길레, 좀 만져줘 봤습니다. (전 한글 Windows XP 사용자..)
sf_hi8arsf_naversf_daum

한글이 나오긴 합니다. :) 고딕체의 경우 좀 뭉게져 보이는 부분이 있네요.
다만 이렇게 국가 설정과 언어 설정을 영어(미국)으로 변경하고 나면, 다른 부분(다른 프로그램 또는 윈도)의 한글에 말썽이 생깁니다. 이렇게 설정하고는 사용하기 힘들 정도로...^^;;;

아무튼, 브라우징 속도는 그들의 주장 만큼이나 꽤 빠른 듯 합니다. 물론 이건 사람마다 다르게 느낄 수 있는 부분이겠지만요. 그렇지만..... 예쁩니다! 낄낄. 항상 Safari Test 따위의 사이트에서 스크린샷으로만 접해 보던, 애플의 미려한(?) 글씨체를 사모하고 있는 저로써는 이 정도의 체감도 굉장하기만 합니다.

Safari_dA

에드센스 마저도 아름다워 보입니다. ㅡ,.


역시 외국 사이트들의 경우, 큰 문제는 없어 보입니다.

설치시, 시키지 않아도, IE 와 Firefox의 북마크를 자동으로 가져오더군요. 처음 사파리를 접해 보는거라, 신기한 부분이 많습니다. 주소창에 주소를 적다보면, 북마크에 있는 주소들이 검색되어 나옵니다. :) 내장된 RSS도 직접 보니 감회가 새롭습니다. Customizing Toolbar 창에서 툴 아이콘들을 움직여 보면, 역시 애플답다는 느낌이 절로 옵니다.

하지만, (좀 더 가지고 놀아봐야 알 수 있겠습니다..) 지금 당장 다른 브라우져를 다 졉고, 사파리 쓸 수는 없을것 같습니다. :)

정식 버젼이 좀 더 괜찮게 나온다면, 적어도 FF 를 사파리 모양을 꾸미는 짓 따위는 하지 않아도 될 듯 합니다. 뭐 아무튼 신기한 장난감이 하나 생겼어요. (역시 지금까진 장난감 그 이상도 그 이하도 아닌 수준.. ^^)

TAG , , , , ,
Trackback, Comments ( 4 )
 

별 도움 안될 불여우 확장들.. :)

Posted by hi8ar Posted in " C.note/Web " 2007/06/07 16:10
제목부터가 난감하군요! 도움이 되지 않을 확장을 설치해야 할까요? 말아야 할까요? 도움이 될지 안될지의 판단은 여러분의 몫~ ;P

1. Splash로 스플래쉬 이미지를 띄우자!

https://addons.mozilla.org/ko/firefox/addon/2995

불여우가 로딩 되는 동안 "지금 로딩중" 혹은 불여우 로고 이미지 따위를 띄웁니다. 띄울 글자와 소리도 설정 가능합니다. 뭐 이런식으로 설정해요.

Splash

이렇게 그림 파일을 지정해 두면, 초기 구동시 약 3초(시간도 설정 가능합니다.) 동안 위 이미지가 뜹니다. ㅡ,.ㅡ' 아무래도, 초기 구동에 좋은 영향을 주지는 않겠죠? :) 왜 이런 확장을 만들었는지, 잘 모르겠지만.. 사파리(Safari) 초기 구동하면 로고 뜨나요? 아무튼...

제작자의 스플래쉬 이미지 갤러리 - http://www.mrtech.com/photos/
dA 의 파이어폭스 스킨 카테고리에도, 요즘 들어, 진짜 불여우 스킨은 찾아 보기 힘들고, 스플래쉬 이미지들만... - http://browse.deviantart.com/customization/skins/web/firefox/




2. Stylish 를 이용해서 about:blank 페이지를 예쁘게?!..

https://addons.mozilla.org/ko/firefox/addon/2108
- 새 버젼으로 업데이트 되면서, 한글로 번역 되었습니다.

about:blank 페이지는.. 네, 맞습니다. 그냥 빈 페이지에요. 예전에도 한번 언급했던 적(남의 사이트도 내 맘대로 보자! - stylish)이 있던 Stylish 확장을 이용합니다.
about_blankabout_erorr

위 캡쳐 이미지 처럼, 빈 페이지와 에러 페이지를 바꾸실 수 있어요. :) 온라인 상의 사이트만 변경되는게 아니라, 이런 페이지까지 변경할 수 있었군요. 흠냐~ 위 코드는 아래의 링크에서 구하실 수 있습니다.
http://www.deviantart.com/deviation/56543463/
http://www.deviantart.com/deviation/56341347/
게다가, 스타일리쉬의 유저 스타일을 모아둔 페이지에서, about:blank 로 검색하면,
http://userstyles.org/styles/search/about%3Ablank
무궁무진 하지요? :)

구글을 dA 스타일로 변경해 보는건 어떨까요?
daogle1daogle2

http://userstyles.org/styles/2399


역시 별 도움 안 될 불여우 확장들.. :)
TAG , , , , ,
Trackback, Comments ( 6 )
 
1234567