달력

02

« 2012/02 »

  •  
  •  
  •  
  • 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
  •  
  •  
  •  

'tip/etc'에 해당되는 글 28

  1. 2011/02/14 홈페이지 제작에 도움이 되는 무료 오픈소스 솔루션들
  2. 2009/11/27 FLV플레이어 달기 (1)
  3. 2009/04/17 검색엔진에 노출을 못하게 하는 방법
  4. 2009/04/16 홈페이지(XE) 파일첨부 안될때 해결방법 [부재:Flash Player 재설치 방법]
  5. 2009/03/11 휴대폰 세팅 (번호입력)
  6. 2009/03/11 해피CGI에서 신규 웹프로그램
  7. 2009/03/10 웹해킹
  8. 2009/03/09 유튜브 영상 고화질로 보기/올리기 방법
  9. 2009/03/06 구글 크롬 스킨 바꾸기
  10. 2009/03/04 아쿠아엠프를 좀 더 기능성있게 써보기
  11. 2009/02/23 익스플로러7 제거
  12. 2008/12/13 한글이름 영어로 바꾸는법
  13. 2008/11/27 제로보드 업로드 해결방법
  14. 2008/11/27 제로보드 플래너 IE6에서의 오류 해결방법
  15. 2008/11/06 PNG-24를 배경으로만 사용하려는 경우의 CSS Hack. (3)
  16. 2008/11/06 IE6에서 PNG-24의 ‘투명/반투명’ 색을 바르게 표현하기. (2)
  17. 2008/07/05 [ MagiCall ] 설정 팁 & 별정통신 나름 최적 셋팅
  18. 2008/07/05 윈도우 탐색기 실행 할 때 원하는 위치가 나오게 하려면.
  19. 2008/06/19 영문 직급, 계급 (1)
  20. 2008/06/17 포토샾에서는 인식하는 폰트를 일러스트에서는 인식하지 못하는 경우
  21. 2008/06/08 구글애드센스 테스트용 소스 추가
  22. 2008/06/02 Design Watercolor Effect Menu
  23. 2008/06/02 Photoshop Secret Shortcuts
  24. 2008/06/02 Google Doctype
  25. 2008/05/27 FLV 다운로드, 동영상 다운로드
  26. 2008/05/15 DNS Ever, dnsever
  27. 2008/04/21 내 홈페이지에 FLV플레이어를 달아보자.
  28. 2008/01/10 UCC 동영상사이트 모음
웹 콘텐츠를 손쉽게 발행하고 관리할 수 있게 도와주는 CMS 솔루션, 홈페이지에 전자상거래를 할 수 있도록 지원해주는 eCommerce 솔루션, 온라인 교육 사이트를 운영하고 관리할 수 있도록 해주는 LMS 솔루션 등을 활용하면 우리가 계획하고 있는 웬만한 홈페이지 들을 제작할 수 있습니다. 아래 열거하고 있는 여러가지 오픈 소스 솔루션들이 바로 그것이며 이를 활용하면 보다 빠르고 손쉽게 홈페이지를 제작할 수 있게 해줄 것입니다. 이에 더해 소스까지 공개 되어 있으므로 관련 솔루션을 분석하거나 개발하고 있는 분들에게도 도움이 되겠네요. 국내외로 많이 활용되고 있는 솔루션들을 CMS, eCommerce, LMS, BLOG 로 분류해놨지만 다양한 솔루션 들이 혼합 되어 있거나 플러그인 형태로 결합 될 수 있는 경우도 있으니 이 처럼 분류하는 것이 무의미 할 수 있습니다. 그래서 직접 설치하고 테스트하고 경험하는 것이 해당 솔루션을 이해하는 가장 좋은 방법이겠습니다.

[CMS]
Drupal
http://drupal.org/

Joomla
http://www.joomla.org/

Plone
http://plone.org/

XpressEngine (ZeroBoard)
http://www.xpressengine.com/

kimsQ
http://dev.kimsq.com/

GnuBoard
http://sir.co.kr/main/gnuboard4/


[eCommerce]
osCommerce
http://www.oscommerce.com/

Magento
http://www.magentocommerce.com/

PrestaShop
http://www.prestashop.com/

ZenCart
http://www.zen-cart.com/

ShoppingOS
http://www.shoppingos.net/

WizMall
http://www.shop-wiz.com/subwizmall.php

TOPs
http://topsmate.net/?pgname=home/home_infoprog


[LMS]
ILIAS
http://www.ilias.de/docu/

Moodle
http://moodle.org/

Sakai
http://sakaiproject.org/

Claroline
http://www.claroline.net/

.LRN (DotLearn)
http://www.dotlrn.org/

ATutor
http://www.atutor.ca/


[BLOG]
WordPress
http://wordpress.org/

TextCube
http://www.textcube.org/

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/593
Posted by 根™
2009/11/27 07:41

FLV플레이어 달기 tip/etc2009/11/27 07:41

[이미지입니다. 클릭하셔도 작동안되요 ^^]

네오얼리에 보시면 FLV플레이어가 구동되는 게시물들 몇개 보셨죠? (EX. 예를 들면 이런 게시물 )
FLV플레이어가 뭐냐면 플래시로 컨버팅된 동영상을 재생할 수 있는 플래시 플레이어입니다. 
이미 어느정도 주류화가 되었다고 생각하는데요 잘 아시는 YOUTUBE나 MNCAST등이 바로 FLV플레이어입니다. 

이것을 본인의 홈페이지에 탑재하는 방법입니다. 
자유게시판에 재아님의 요청으로 올려드립니다. 
먼저 플레이어 소스는 http://www.jeroenwijering.com/?item=Flash_Video_Player 에서 다운로드 받으실 수 있습니다. 
현재 3.8버전까지 런칭되어 있습니다. 

비상업적인 홈페이지에서 사용하는 것은 무료이며 상업적인 홈페이지에서 사용하려면
15유로를 지불하면 별도의 플레이어를 제공한다고 합니다. 
다운로드 받은 압축파일을 해제하면 다음과 같은 파일들이 들어있는데 다른건 신경쓰시지 말고 
붉은 박스쳐놓은 flvplayer.swf 파일을 본인의 계정에 업로드 하십니다. 
그 경로를 기반으로 FLV파일을 재생할 수 있도록 일단 준비는 끝났습니다. 



그럼 모든 준비는 끝났습니다. 이제 재생을 원할 FLV포맷파일을 계정에 업로드하고 둘을 싱크시키면 됩니다. 
그리고는 다음과 같이 게시판이나 홈페이지에 입력해주세요. 

<embed src="FLV플레이어경로" width="가로크기" height="세로크기" allowfullscreen="true" flashvars="&file=FLV무비경로&height=180&image=재생되기전 보여질 이미지경로&width=320" />


그외 플레이어 색상 바꾸기, 리스트 형식으로 재생되기, 워터마크 이미지등 매우 많은 옵션이 있지만 
일반적으로 잘 사용할 필요는 없는 부분이며 그래도 나는 꼭 알아야겠다라고 생각하시는 분들을 위해 
간편하게 Wizard홈페이지가 운영되고 있으니 참고하시면 되겠습니다. 
속성을 암기하시지 못했을 경우에는 WIZARD를 사용하시는게 더욱 간편하니 이쪽을 권장드리는 바입니다. 
http://www.jeroenwijering.com/extras/wizard.html




1. 어떤 형태로 구동할 것인가입니다. MP3플레이어도 있고 플레이리스트 설정등의 포맷도 있지만 
일반적인 동영상을 구현하기 위해 A single FLV file을 선택합니다. 

2. 설정을 잡는 곳입니다. 적어놓은대로 하시면 됩니다. 원본높이+20은 플레이어바때문에 무비원본보다 20을 더 크게 준것입니다.

3. 여기가 결과값이 생성되는 곳입니다. 하시고 카피하셔서 쓰시면 됩니다. 

4. 결과값을 불러오는 곳입니다. 다 설정하시고 요부분을 클릭하시면 됩니다. 그럼 3번에 결과값이 뿌려집니다. 

5. 보다 세부적인 옵션을 설정하는 곳입니다. 클릭하시면 하단에 세부옵션창이 튀어나옵니다. 



-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

PS - 변화를 원해님의 질문에 추가로 답변 드립니다. 2007.6.8
MP3플레이어로 사용시 한곡 재생시에는 무비경로에 MP3경로를 바로 입력하시면 되지만
여러곡을 재생하시려면 플레이리스트를 XML로 작성하셔야 됩니다. 
사용된 xml플레이 리스트를 예제로 올려드릴테니 다음 형식으로 작성하시고 확장자를 XML로 저장후 계정에 업로드 하시고
무비경로에 xml파일을 지정해주시면 됩니다. 샘플을 올려드릴테니 참고하시고 만들어보세요. 

[sample xml파일]

<playlist version="1" xmlns="http://xspf.org/ns/0/">
 <trackList>


  <track>
   <title>곡제목</title>
   <creator>작성자 혹은 가수(일반적으로 가수) </creator>
   <location>MP3경로</location>
   <image>썸네일 이미지 경로</image>
   <info>클릭했을때 보내질 사이트 (본인홈페이지나 앨범정보 사이트) </info>
   <identifier>식별자(1,2,3...100등으로 명기하시면 됩니다.) </identifier>
  </track>


  <track>
   <title>Jazzalude</title>
   <creator>Basement Jaxx</creator>
   <location>http://www.jeroenwijering.com/upload/song2.mp3</location>
   <image>http://www.jeroenwijering.com/upload/basement.jpg</image>
   <identifier>123</identifier>
   <info>http://www.amazon.com/Rooty-Basement-Jaxx/dp/B00005K9V5/sr=8-3/qid=1166887603/ref=pd_bbs_sr_3/105-9454024-2355627?ie=UTF8&s=music</info>
  </track>


  <track>
   <title>Sunshine Up Ahead</title>
   <creator>Peter Jones</creator>
   <location>http://www.jeroenwijering.com/upload/peterjones_sunshine_lofi.mp3</location>
   <identifier>789</identifier>
  </track>


  <track>
   <title>Homeland</title>
   <creator>Postman</creator>
   <location>http://www.jeroenwijering.com/upload/song1.mp3</location>
   <image>http://www.jeroenwijering.com/upload/postmen.jpg</image>
   <info>http://www.amazon.com/Revival-Postmen/dp/B00005J8R7/sr=1-6/qid=1166887655/ref=sr_1_6/105-9454024-2355627?ie=UTF8&s=music</info>
   <identifier>456</identifier>
  </track>


 </trackList>
</playlist>

유용하게 사용하시구요 모르시는 점 있으시면 질문 언제든지 환영합니다.
고맙습니다 ^^


[출처] http://www.neoearly.com/bbs/view.php?no=61&id=webforum
Posted by 根™

종종 인터넷 검색을 하면, 주민번호등 기타 민감한 정보를 본 적이 있을겁니다.

검색에 노출이 되지 않게 하기위하여서는 아래처럼 하면 됩니다.

1) 우선 각 홈페이지 계정 루트 (document root, 통상적으로 /html/  혹 /public_html/ 등) 에 robots.txt 라는 파일을 생성합니다.

2) 다음에 아래의 내용을 넣어줍니다.
User-agent: *
Disallow: /private/
Disallow: /member/

위에서  Disallow: /member/ 처럼 하나를 한 줄에 원하는 만큼 추가하면 됩니다.
이렇게 하면, 검색엔진 (모든 검색엔진) 이 폴더내의 내용은 추출하여 갈 수 없습니다.

Posted by 根™
1. 먼저 업로드가 안된다면, 내 PC에 설치된 플래시 버전 확인해 주세요!

아래 링크를 클릭하여 컴퓨터에 설치된 Flash Player 버전이 10 인지 확인해 주세요.
박스 안의 숫자가 Flash Player 버전을 나타냅니다.
☞ Flash Player 버전 확인하기

사용자 삽입 이미지


2. 설치된 플래시 프로그램 제거하기

아래 링크를 클릭하여 언인스톨러(프로그램 제거기)를 다운로드 받아 실행하면 프로그램이 제거됩니다.
☞ Flash Player 제거 프로그램 다운로드받기


3. Flash Player 9 다운로드 받기

아래 링크를 클릭하여 Flash Player 9 를 다운로드 받은 다음,
모든 브라우저를 종료하신 후 2개의 실행파일을 실행하면 Flash Player 9 가 설치됩니다.
☞ Flash Player 9 다운로드 받기


4. Flash Player 10 설치하기

아래 링크를 클릭하여 Flash Player 10 를 설치한 다음,
컴퓨터를 재부팅하시면 정상적으로 파일첨부가 가능해집니다.
혹, 그래도 파일첨부가 안되면 저로서도 더 이상 원인을 모르겠으니 포멧~! ㅋㅋㅋ
☞ Flash Player 10 설치하기

※ Flash를 재설치해도 파일 첨부가 정상적으로 되지 않을 경우에는,
컴퓨터를 재부팅한 후 프로그램 삭제→ 설치를 진행해 주세요.

출처 : http://pluto.kw.ac.kr/?document_srl=7022
Posted by 根™
2009/03/11 16:00

휴대폰 세팅 (번호입력) tip/etc2009/03/11 16:00

1. SK텔레콤  
 1) 2G 의 경우  
  대기화면 -> # 758 353 266 #646# -> 본인 휴대폰 번호입력 -> 확인버튼
  -> 전원 꺼지면서 단말기 자동 reset -> 완료  
 2) 3G의 경우  
  유심카드 삽입 -> 전원 On -> #758353266#646# ->  개통설정(Yes) -> 확인버튼  
  -> 전원 꺼지면서 단말기 자동 reset -> 완료  
 
 
2. KTF  
 1) 2G의 경우  
  147359* 12358* 1234756* -> (security cord: 0000) -> 메뉴 키 -> NAM 1-> 번호 입력 -> 확인버튼
  -> 전원 꺼지면서 단말기 자동 reset -> 완료  
 2) 3G의 경우  
  유심카드 삽입 -> 전원 On -> *147359*682* -> reset  (yes) 확인버튼
  -> 전원 꺼지면서 단말기 자동 reset -> 완료  
 
 
3. LG텔레콤 
 1) 2G / 3G 동일
  ## 10306 # -> 간편모드 -> 번호입력 -> 확인 
  -> 전원 꺼지면서 단말기 자동 reset -> 완료
Posted by 根™
2009/03/11 14:10

해피CGI에서 신규 웹프로그램 tip/etc2009/03/11 14:10

Data Bank  |  Add Url  |  랭킹 100   |  포럼  |   초보가이드  |  Q&A게시판   |   웹솔루션판매 - CGIMALL


해피CGI에서 새로등록된 자료를 알려드립니다. ^^

이번에 알려드릴 새로운 소스 및 사이트는 총 8개입니다.
phpMyAdmin 3.1.1, 2.11.9.4 released
MySQL 을 쉽게 다룰수 있는 강력한 툴입니다.
phpBB
막강하고 여러가지 섬세한 기능을 가지고 있는 php무료게시판 입니다.
Grid Gallery
그리드(Grid) 형태의 퍼즐모양 같은걸로 이미지가 출력이 되고, 해당 이미지를 마우스로 클릭하면 이미지가 확대되면서 보여집니다.
Ajax Chat Ver 0.8.2
Ajax 로 제작된 채팅 프로그램 입니다. 기능이 심플하며 채팅방 설정등을 쉽게 변경이 가능합니다.
탭메뉴 활성화 자동진행
뉴스 사이트등에 많이 활용되고 있는 탭메뉴 자동진행 관련 자료입니다. 기본값은 설정 시간간격으로 다음 탭메뉴로 이동이 되며, 마우스 오버시 해당 탭메뉴가 활성화 됩니다.
rgboard 4.1.0 베타(mysql,cubrid,oracle 지원)
완전무료게시판 rgboard의 최신버젼입니다. 저작권표시 없으며 재배포 가능합니다.
UTF-8 변환 프로그램 RedUTF8
ansi 에서 UTF-8로 모든파일 및 상위폴더의 파일까지 자동변경을 해주는 프로그램입니다. UTF-8 변환작업을 편리하게 할수 있습니다.
Photo Gadget v1.1
마우스 오른쪽 버튼으로 손쉽게 이미지를 resize 할수 있는 프로그램입니다. 아주 편리하죠.

해피CGI회원님들 모두 몸 건강하시고
홈페이지 건승을 기원합니다. ^^

Web programming leaders group - HappyCGI 드림.

· 회원님의 해피 메일링 수신동의를 하셨기에 발송되었습니다.
· 본 메일은 발신전용이므로 회신을 통한 문의는 처리되지 않습니다.
· 문의사항은, 아래 이메일버튼을 클릭하시어 문의하시면 됩니다.
· 메일수신을 원하지 않으시면 수신거부 버튼을 클릭해 주십시오.

 


해피CGI에 등록된 프로그램소스의 권리는 해당개발자에 있으며
해당 자료의 리뷰,스크린샷의 권리는 해피CGI에 있습니다.


 

Posted by 根™
2009/03/10 17:37

웹해킹 tip/etc2009/03/10 17:37

<웹해킹>

1. 일반적인 해킹 단계

 

   1단계 정보수집 : 웹스캔이나 포트스캔 및 웹사이트를 접속하여 소스 코드 및 구조를 분석함으로써

   어떠한 애플리케이션과 웹 서버를 사용하는지, 웹 서버의 버번은 무엇인지를 수집합니다. 

 

   2단계 취약점 분석 : 정보 수집 단계를 거쳐서 수집한 정보를 바탕으로 애플리케이션 자체의 취약점

   및 웹서버의 취약점을 분석합니다.

 

   3단계 실제 공격 : 취약점 분석을 바탕으로 원격에서 공격을 시도합니다. 원격에서 SQL Injection

   공격이나, XSS, 파일 업로드등의 다양한 공격으로 웹서버에 침투를 시도합니다.

 

   4단계 뒤처리 : 침투에 성공한 경우 악의적인 공격자는 로그를 삭제하고 스니퍼를 설치하기도

   하지만, 어떤 해켜의 경우는 가끔 패치도 해주고 관리자에게 통보까지 해줍니다.

 

2. 웹사이트 탐색과 분석

홈페이지의 파일 확장자를 확인하고 자료실이나 게시판의 취약점 및 웹서버의 취약점을 분석하고 자료실이 존재할 경우 파일 업로드 공격을 통해 공격을 시도하거나, 디렉토리 구조 탐색을 통해 관리자 디렉토리가 있는지 디렉토리 리스팅 취약점이 존재하는지를 조사한다.

 

2-1) 탐색 및 분석 도구

     1. IntelliTemper : 웹사이트에 존재하는 디렉토리들에 대한 탐색을 자동으로 시도

     2. Sleuth : 홈페이지의 소스코드나, 폼, 주석, 쿠키 등과 같은 홈페이지의 전반적인 내용에 대해서

        자동으로 분석

     3. 구글 검색엔진을 이용(고급 검색 기능)

          site : 특정 사이트만을 선정해서 검색

                  예) site:xxx.com admin -> xxx.com 사이트에서 admin 문자열을 찾을 때 사용 

          filetype : 특정 파일 타입에 대해 검색할 때 사용

                  예) filetype:txt 패스워트 -> 텍스트 파일 중 패스워드가 포함된 문자열을 찾을 때 사용

          link : 특정 주소가 링크된 페이지를 찾을 때 사용

          그외 cache, intitle,  inurl 기능이 있고 사용 예제는 같습니다.

2-2) 검색 엔진의 검색을 회피하는 방법

      서버의 홈 디렉토리에 robots.txt 파일을 만들어 검색할 수 없게 만들 수 있습니다.

      예를 들어, http://www.xxx.com/robots.txt 파일이 있으면 구글 검색 엔진은 robots.txt에 있는

      디렉토리들과 규칙에 대항하는 부분을 검색하지 않습니다.

     

      <<robots.txt. 파일의 포멧은 두 개의 필드로 구성되어 있습니다.>>

         1. User-Agent : 특정 검색 엔진으로부터 검색을 막음

                                예) User-Agent:googlebot( 구글 봇으로부터 막음)

         2. Disallow : 특정 파일 또는 디렉토리를 로봇이 검색하지 못하게 하기 위해 사용

                           예) Disallow : dbconn.ini, Disallow: /admin/

 

3. 웹스캐닝

웹사이트를 조사하는 방법으로 수동적인 방법보다는 도구를 이용하여 웹서버의 종류나 버전, 그리고 디렉토리 정보나 중요 파일 정보가 존재하는지, 웹서버 자체의 취약점은 무엇인지 검사하기 위한 방법

 

   3-1) 원리

   공격 대상에게 취약하다고 알려진 HTTP 요청(Request)을 보내고, 대상 시스템이 이에 대한 응답

   코드(Response Code)를 보고 해당 페이지의 존재 여부 및 취약점을 확인

  

 

4. 파일접근

   4-1) 파일 업로드 공격

   공격자가 공격 프로그램을 해당 시스템에 업로드하여 공격하는 방법으로 공격 난이도가 쉬우면서

   영향력이나 파급도가 큰 공격입니다.

   공격방식은 공격자가 시스템 내부 명령어를 실행시킬 수 있는 웹프로그램을 제작하여 자료실과

   같이 파일 업로드를 할 수 있는 곳에 공격용 프로그램을 업로드하고 공격용 프로그램을 웹에서

   브라우저를 이용해 접근하면 시스템 내부 명령어를 실행시킬 수 있게 되는 것입니다.

 

    <대응> : 업로드 시 파일 확장자 이름을 체크합니다. asp나 jsp 같은 소문자만 아니라 aSp, Jsp

   같은 대소문 혼합도 시스템에서는 인식하기 때문에 가능한 모든 조합에 대해 필터링을 해야합니다.

   또한 자바스크립트와 같은 클라이언트 스크립트 언어로 필터링을 하지 말고 서버 사이드 스크립트

   언어나 서버단에서 필터링을 해야합니다.

   파일이 업로드되는 디렉토리에 실행 권한을 제거하는 방법도 있습니다. 이럴 경우에는 파일이 업로

   드 된다고 해도 실행되지 않기 때문에 브라우저에 그대로 나타나거나 파일을 다운로드하게 됩니다.

 

   4-2) 디렉토리 탐색

   웹 브라우저에서 확인 가능한 경로의 상위로 올라가서 특정 시스템 파일을 다운로드 하는 공격

   자료실에 올라간 파일을 다운로드 할 때 전용 다운로드 프로그램이 파일을 가져오는데, 이때 파일

   이름을 필터링하지 않아 발생하는 취약점

  

    1. 특정 파일을 다운로드할 때 다음과 같은 URL을 이용하여 다운로드 된다고 할때

     http ://www.xxx.com/board/down.jsp?filename=upload.hwp'

     2. 공격자는 filename 변수에 해당하는 값을 다음과 같이 조작하면 상위 디렉토리로 거슬러 올라가

         etc/passwd 파일을 다운로드 할 수 있을 것입니다.

      http ://www.xxx.com/board/down.jsp?filename=../../../../../../../../../../../etc/passwd

    

     <대응> : 전용 파일 다운로드 프로그램을 이용할 때는 위 예에서 보는 바와 같이 '..' 문자열이나

                 '/' 문자열 에 대한 필터링을 하고 파일 업로드와 마찬가지로 필터링하는 부분을 자바스

                 크립트와 같은 CSS 언어가 아닌 SSS 언어에 필터링을 해야 합니다.

   

    4-3) 디렉토리 리스팅

    특정 디렉토리를 브라우저에서 열람하면 그 디렉토리에 있는 모든 파일과 디렉토리들의 목록이

    나열됩니다. 공격자는 이 취약점을 이용하여 웹 서버에 어떤한 파일이 있는지 확인할 수 있고

    추가적인 공격 취약점을 찾을 수 있습니다.

    

 

     4-4) 인증 우회

     관리자 페이지나 인증이 필요한 페이지에 대한 인증 미처리로 인해 인증을 우회하여 접속

    

     <대응> 관리자 페이지나 인증이 필요한 페이지에 대해서는 관리자 로그인 세션에 대한 검사를

                수행하는 과정을 넣어야 한다.

 

5. 리버스 텔넷

   리버스 텔넷 기술은 방화벽이 존재하는 시스템을 공격할 때 자주 사용되는 기법입니다.

   방화벽 정책에서 인바운드 정책(외부에서 방화벽 내부로 들어오는 패킷에 대한 정책)은 일반적으로

   80번 포트 외에 필요한 포트 말고는 다막아 놓는다. 그러나 아웃바운드 정책(내부에서 외부로 나갈

   때)은 보통 별다른 필터링을 수행하지 않는 경우가 많다. 이러한 상황에서 리버스 텔넷은 유용한

   기법입니다.

   일반적으로 공격자는 웹서버의 80번 포트로의 접근은 가능하나 방화벽 정첵에 의해서 내부에서

   외부로 나가는 정책은 모두 허용이기 때문에 웹서버에서 공격자 컴퓨터 쪽으로 리버스 텔넷 시도를

   하는 것이 가능한 것입니다.

 

   5-2) 리버스 텔넷 원리

   

 

   5-2) 리버스 텔넷 예

   리버스 텔넷을 사용하기 위해 netcat(=nc) 프로그램을 많이 이용하는데, netcat은 리버스 텔넷

   기능뿐만 아니라 스케닝 기능 등 매우 유용하고 많은 기능르 수행할 수 있는 프로그램입니다

  

   <대응> : 리버스 텔넷이 불가능하도록 하기 위해서는 사이트의 파일 업로드 기능을 철저하게

    점검해야 하고 , 방화벽의 아웃 바운드 정책 역시 엄격하게 적용해야 합니다.

TAG 웹해킹
Posted by 根™

제가 요즘 유튜브 동영상 이용빈도가 높습니다. 그런데 아쉬운점은 화질이 낮다는것.. 그래서 열심히 검색해보니..
고화질로 볼 수도 있다는 사실을 알게되었습니다. 물론 이미 알고있는 분들이 많지만  그래도 모르시는 분께 도움이 될까해서 공부한 내용을 요약 스크립해서 팁/강좌 게시판에 올려봅니다.

-- 핵심 요약 --
고화질로 보고플 땐 : 현재는 동영상 주소에 &fmt=18, 또는 &fmt=22 등을  추가해야 한다는 겁니다.
특히 1280x720로 보입니다. '퍼가기'로 붙일 때는 &ap=%2526fmt%3D22를 추가해야 합니다. 퍼가기 코드에 동영상 주소가 두 개 있으니, 둘 다 추가해야 합니다.

특히 유튜브가 1280x720 HD 고화질 동영상 서비스 시작했기에 원본 고화질로 보려면 &fmt=22가 추가하면 됩니다. 
이제 유튜브는 4개의 화질을 지원하고 있습니다. 일반 화질(320x240, 영상 400kbps FLV, 소리 64kbps 모노 MP3), &fmt=6(480x360, 영상 700kbps FLV, 소리 96kbps 모노 MP3), &fmt=18(480x360, 영상 500kbps H.264, 소리 128kbps 스테레오 AAC), 그리고 이번에 추가된 &fmt=22(1280x720, 영상 2000kbps H.264, 소리 224kbps 스테레오 AAC)가 그것입니다. 유튜브 동영상 페이지에서 '고화질로 보기'를 누르면, 현재는 &fmt=6이 재생됩니다.

=============================================================================

YouTube유튜브에서 고화질의 동영상과 화면크기 1280 X 720 까지 지원해주는 서비스를 시작했습니다.

YouTube 유튜브에 파일 올리는 법과 감상법을 간단하게 알아 봅니다

1.동영상 업로드시

아래 조건만 맞으면 됩니다.업로드할때 특별히 할것은 없습니다. 동영상 업로드가 끝나면 YouTube 유튜브 자체 인코딩(파일의 대폭적인 압축)으로 에 꽤 오랜 시간이 걸리며 그리고 나서도 고화질로 보기위해서는 또 추가로  긴시간이 소요됩니다.경우에 따라서 몇시간씩 걸리기도 하던군요....

참고로 저는 Procoder로  HD급 WMV 포맷으로 인코딩한후 업로드하고 있습니다


(YouTube 유튜브 홈페이지 공지사항)





2.고화질 감상과 링크

업로드한 동영상을 고화질로 감상 할려면 url주소 끝에  &fmt=22를 덧붙여 주소창에 입력해주면  고화질로 YouTube 유튜브
자체 player에서 고화질로 감상가능합니다.

.



예 :제가 올린 동영상 고화질 감상 링크주소


http://kr.youtube.com/watch?v=WCtWMLqY2UI&fmt=22



예 : 제가 올린 동영상을 기준으로 고화질로 링크를 하고 싶을때는 아래처럼...

<embed src=http://www.youtube.com/v/WCtWMLqY2UI&fmt=22&hl=ko&fs=1&ap=%2526fmt%3D22 width=원하는크기 height=원하는크기>

-원하는 크기는 1280X720 한도내에서 비율로 조정하시면 됩니다.


 

(참고사항)

1.화질등급
   &fmt=22 -> HD급 고화질          &fmt=18 ->  SD급 화질        아무것도 없으면 일반화질


2.상기 예시 동영상

-원본 : 깊어가는 가을날의 단풍 20081100.mpg

  파일용량 : 1,336,719KB       화면크기 : 1920X1080        Bitrate : 28.2Mbps        동영상시간 : 5분55초

 
-Procoder에서 HD급 WMV로 인코딩후 업로드한 파일 : 깊어가는 가을날의 단풍 20081100.wmv

  파일용량 : 228,977KB         화면크기 : 1280X720         Bitrate : 5000Kbps         동영상시간 : 5분55초


-YouTube 유튜브에서 보여주는 동영상   XXXXXX.mp4

  파일용량 :  94,688KB          화면크기 : 1280X720         Bitrate : 2000Kbps         동영상시간 : 5분55초

** 자료출처:
http://barosl.com/blog/entry/youtube-fmt-22

http://blog.dreamwiz.com/sscslee/9049663

Posted by 根™
2009/03/06 14:27

구글 크롬 스킨 바꾸기 tip/etc2009/03/06 14:27

이전 구글 크롬의 스킨을 바꿀 수 있는 방법을 알려드린 적이 있습니다. 그때는 크롬스팟(http://www.chromespot.com/)이라는 크롬 전문 포럼에서 몇 가지 스킨을 소개해 드렸는데, 구글 크롬이 정식으로 버전업이 되면서 되는 게 있고 안 되는 게 있는 상황입니다. 거의 대부분이 안된다고 할 수 있습니다.

2008/09/05 - 구글 크롬의 스킨을 바꿔보자!

이런 경우 난감하죠.

신 버전에 맞추어서 모든 스킨이 업데이트 된 것도 아닙니다. 그렇다고 시퍼런 구글의 기본 테마를 쓸 수는 없었습니다. 원래 사용중인 Windows의 테마와 너무 다르니까요. 그런데, 구 버전의 크롬 스킨을 신 버전으로 바꾸어 주는 프로그램이 등장했습니다.

Chrome Theme Updater via ChromeSpot

다운로드 링크 http://www.codigobit.net/software/thememorph.zip

그런데 이 프로그램을 쓰려면, ResHacker.exe가 같은 폴더 안에 있어야 합니다. ResHacker.exe는 Resource Hacker라는 프로그램으로 EXE, DLL 등의 실행 파일 및 라이브러리의 리소스를 고칠 수 있습니다. 프로그램의 아이콘을 고치거나, 텍스트를 일부 고치는데 필요한 프로그램인데, 이 프로그램이 필요한 이유는 구글 크롬의 테마가 DLL에 PNG 형식으로 저장되기 때문입니다.

Resource Hacker 홈페이지 http://angusj.com/resourcehacker/
다운로드 링크 링크1 / 링크2

자, 이 2개의 파일을 아무 폴더에다 우선 풀고 기존 스킨을 Chrome Theme Updater 창에 드래그해서 던지면 파일 변환을 시작합니다. 시간이 꽤 걸리는 편이니 마음 편하게 기다리면 됩니다. 변환된 파일은 _new이 붙어서 Chrome Theme Updater 폴더에 생성됩니다. 이 파일을 default.dll로 바꾸어 테마가 저장된 폴더에 복사해 넣으면 됩니다. 아, 그런데 테마는 어디서 구하냐고요?

바로 Google Chrome Themes에서 다양한 크롬용 스킨을 받을 수 있습니다.

튀는 색깔의 크롬 스킨

     Download Dark Theme

     Download Orange Theme

     Download Green Theme

     Download Black Theme

     Download Blurk Theme

     Download Carbon Fiber Theme

     Download Purple Theme

     Download Hot Pink Theme

     Download Aqua Marine Theme

     Download Gold Theme

다른 프로그램을 베낀 크롬 스킨

     Download Mac V1.0 Theme

     Download Internet Explore Theme

     Download Firefox 3 Theme

     Download Safari Theme

     Download Opera Theme

     Download Iphone Theme

테마가 있는 크롬 스킨

     Download Super Mario Bros Theme

     Download Halloween Theme

     Download Simpsons Theme

     Download Galaxy Theme

     Download Newgrounds Theme

     Download Red Sox Theme

     Download Army Style Theme

혹시 크롬 스킨을 다운 받은 후에 스킨을 어떻게 바꾸는지 모르시는 분을 위해 방법을 다시 소개해 드립니다.

C:\Documents and Settings\[User Name(주1)]\Local Settings\Application Data\Google \Chrome(주2)이란 폴더를 찾아 그 폴더 아래에 있는 Application\ [Version Number(주3)] \Themes 폴더에 위에서 받은 파일을 풀어 넣으면 됩니다. 만약, 풀었는데 실행이 안되거나 스킨이 깨져 나온다면, 앞서 소개한 Chrome Theme Updater를 받아서 실행하여 신 버전의 스킨으로 바꾸면 됩니다.

자, 그럼 크롬을 자신의 색으로 물들여 보시기 바랍니다.

※ 주1 User Name - Windows에 로그인할 때 쓰는 사용자 이름입니다. 현재 사용하는 사용자 이름에 따라 달라집니다.
※ 주2 Windows VIsta의 경우 C:\Documents and Settings가 아니라 C:\Users에 저장됩니다.
※ 주3 Version Number - 사용중인 구글 크롬의 버전입니다. 구글 크롬의 현재 버전은 1.0.154.36이며, 주소창에서 about:을 치면 확인할 수 있습니다. (2008년 12월 26일 기준)

Posted by 根™
http://miniwini.com/miniwinis/bbs/index.php?bid=qna&mode=read&id=13959

전에 위와같은 질문글 올렸었는데요~
블로그 글에서 어떤 링크를 클릭하면 아쿠아엠프에서 특정 트랙이 재생되게끔 하는..소스를 여쭤봤었습니다ㅎ
요즘엔 거의 자문자답식이네요^^;;
한창 블로그 업데이트 중이라서; 오늘로써 한 3일째 하루왼종일 블로그 업데이트에만 열중하다보니-.-
검색도 많이 하게되고;
아! 각설하고 팁을~_~
아참! true, false는 익스에서만 먹힌다고 들었습니다. 불여우 같은데선 무용지물이라고 그러더군요
그래서 true대신 1, false대신 0을 쓰시면 됩니다 =]
주워 들은건 많음 - _-v

** 자신의 설정에 따라 parent 혹은 top이 될수 있습니다.
preview viewsource copy
- 재생되고 있는 playlist.asx 파일의 특정 트랙 재생하기 <a onclick="parent.aquamp.playItem(트랙번호);">특정트랙듣기</a> - 재생 중 다른 list.asx(참고 .mp3/.wma 가능) 파일을 재생하기 <a onclick="parent.aquamp.openItem('http://경로/list.asx');">list.asx듣기</a> - 재생 중 다른 list1.asx 파일을 열고 특정 트랙 재생하기 <a onclick="parent.aquamp.openItem('http://경로/list.asx'); setTimeout('parent.aquamp.playItem(2)',200);">list.asx의 2번트랙 듣기</a> - 재생 중 Dance.asx 파일을 열고 볼륨을 60%로 설정하기 <a onclick="parent.aquamp.openItem('http://경로/dance.asx'); parent.aquamp.setVolume(60);">dance.asx를 볼륨 60%로 듣기</a> - 기타 제어 <a onclick="parent.aquamp.setShuffle(true);">true,false로 순차/랜덤 설정가능<a> <a onclick="parent.aquamp.setLoop(true);">true,false로 반복제어</a> - 더 다양하게 가능하겠지만 요까지만 적어볼께요 ^^ - 위 기능을 잘 조합해서 이젠 Autoplay 하지 말구 ^^ 이쁘게 사용합시다. ^^ - 출처 : http://ashurei.com/
Posted by 根™
2009/02/23 18:05

익스플로러7 제거 tip/etc2009/02/23 18:05

익스플로러 ie7을 삭제하는 법은 두가지

제어판에서 프로그램 추가/제거에서 익스플로러 7을 삭제하는법이 있고,
윈도우즈 디렉토리의 Spuninst.exe를 실행하여 Internet Explorer 7 제거
시작 - 실행에서 아래의 명령을 실행합니다
%windir%\ie7\spuninst\spuninst.exe
마법사의 지시에 따라 Internet Explorer 7을 제거합니다
Posted by 根™
2008/12/13 17:22

한글이름 영어로 바꾸는법 tip/etc2008/12/13 17:22

★한글이름 영어로 바꾸는법

 성씨     원칙표기         사용가능관용표기 (좌측부터 많이쓰는순)

 

Ga

Ka , Kah , Gah
Gan Kan , Khan
Gal Kal, Garl, Gahl, Karl
Gam Kam, Kahm, Karm
Gang Kang, Kahng, Kwang, Khang
Gae
Gyeon Kyun, Kyeon, Kyen, Kyoun, Kyon, Kwion
Gyeong Kyung, Kyoung, Kyeong, Kyong, Kung
Gye Kye, Kay, Kae, Gae, Keh
Go Ko, Koh, Goh, Kho, Gho, Kor
Gok Kok
Gong Kong, Kohng, Koung, Goung, Khong
Gwak Kwak, Kwag, Kwack, Gwag, Koak
Gu Koo, Ku, Goo, Kou, Kuh
Guk Kook, Kuk, Gook, Kug, Gug, Cook
Gun
Gung Koong, Kung, Kwoong
Gwok Kweag
Gwon Kwon, Kweon, Kwun, Gwon, Kwan
Geun Geun, Keun
Geum Keum, Kum, Gum, Guem, Kuem
Gi Ki, Kee, Key, Gee, Ky, Khee, Kie
Gil Kil, Gill, Khil, Kill, Keel
Gim Kim, Kym
Na Ra, Nah, La, Rha, Rah
Nam Nahm, Nham, Narm
남궁 Namgung Namkung, Namkoong, Namgoong, Namkoung, Namgoog, Namgooing
Nang Nahng, Lang
Nae Na
No Noh, Roh, Ro, Rho, Nho
Noe
Dan Dahn
Dang Tang
Dae Dai, Dea
Do Doh, Dho, To, Doe
독고 Dokgo Dokko, Toko, Tokko, Dockko
Don
Dong Tong, Dhong, Tung
동방 Dongbang
Du Doo, Tu, Do, Dou
Ryu Ryoo, Yoo, You, Yu, Lyu
Ma Mah, Mar, Mha
Man Mann
Mae Mea
Maeng Mang, Meang, Maing, Meng, Maeing
Myeong Myung, Myoung, Myong
Mo Moh, Moe, Mho, Mao
Mok Mock, Mog, Muk, Mork
Muk Mook
Mun Moon, Mon, Moun
Mi
Min Minn, Mihn
Bak Park, Pak, Bark, Pack
Ban Bahn, Pan, Bhan, Van
Bang Pang, Bhang, Bahng, Pahng, Phang
Bae Bai, Bea, Pae, Pai
Baek Baik, Back, Paik, Paek, Beak
Beon
Beom Bum, Bom, Burm, Beum
Byeon Byun, Byon, Pyun, Byoun, Pyon
Bok Pok, Pock, Bog
Bong Pong, Bhong, Vong
Bu Boo, Pu, Bou, Poo, Booh
Bi Bee
Bin Been, Bhin, Pin, Bean
Bing
Sa Sha
사공 Sagong Sakong, Sagoung
Sam
Sang
Seo Suh, Su, Sur, So, Seu
서문 Seomun
Seok Suk, Sok, Suck, Seuk, Seak
Seon Sun, Son, Suhn, Sen
선우 Seonu Sunwoo, Seonwoo, Sonu, Sunoo, Sunwou
Seol Sul, Seul, Sol, Sull
Seop Sup, Sub
Seong Sung, Soung, Seung, Song
So Soh, Sho, Soo
Son Sohn, Shon, Soon, Soun, Sun
Song Soung, Shong, Sung
Su
Sun Soon
Seung Sung, Seoung, Seong
Si Shi, See, Sie, Sea
Sin Shin, Shinn, Sheen, Chin, Seen
Sim Shim, Seem, Sheem, Shimn, Sihm
A Ah
An Ahn, Ann, Aan
Ae
Ya
Yang Ryang, Yaung, Lyang
Eo Uh, Eoh, Auh, Eu, Au
Eom Um, Eum, Uhm, Aum, Oum
Yeo Yu, Yo, Yeu, Yuh, Yea
Yeon Youn, Yun, Yon, Yeun, Yeoun
Yeom Yum, Youm, Yeum, Yom, Yeoum
Yeop Yeob, Youb, Yeop, Yub, Yup
Yeong Young
Ye Yea, Yae, Yeh, Yee
O Oh, Oe, Au
Ok Ock, Ohk, Oak, Og
On Ohn, Ohnn
Ong Ohng, Oung
Wang Whang, Wong
Yo
Yong Young, Ryong, Yung, Lyong
U Woo, Wu, Ou, Wo, Uh
Un Woon
Won Weon, Woon, Wone, Wun, One
Wi Wee, We, Wie, Wei
Yu Yoo, You, Ryu
Yuk Yook, Youk, Yug, Ryuk, Yuck
Yun Yoon, Youn, Yune, Yeun
Eun Eun, Un, Uhan, Unn
Eum Um, Em, Yeum
I Lee, Yi, Rhee, Ree, Rey
In Ihn, Yin, Inn, En, Lin
Im Lim, Yim, Rim, Leem, Rhim
Ja
Jang Chang, Jahng, Jhang, Gang, Zhang
Jeon Jun, Chun, Chon, Jeun, Cheon
Jeom
Jeong Jung, Chung, Joung, Chong, Cheong
Je Jae, Jea, Che, Jei, Jhe
제갈 Jegal Jaegal, Jekal, Jeagal, Chegal, Chekal
Jo Cho, Joe, Joh, Jou
Jong Chong, Jung
Jwa Chwa, Joa, Choa, Jaw
Ju Joo, Chu, Choo, Jou, Zoo
Jun
Jeung Zeng
Ji Jee, Ch, Gi, Chee, Gee
Jin Chin, Jean, Gin, Zhin, Chen
Cha Char, Chah, Tchah, Tcha
Chang
Chae Chai, Che, Chea
Cheon Chun, Chon, Chen, Choun
Cho Chu
Choe Choi, Che, Choy, Chey
Chu Choo, Chou, Chyu, Chou
Tak Tark, Tag, Tack, Thak
Tan
Tae Tai, Tea, Te, Tay
Pan
Paeng Pang, Paing, Peng, Pyeong, Pyeng
Pyeon Pyun, Pyon, Pyoun, Pyen, Pyeun
Pyeong Pyung, Pyong, Pyoung, Pyeng
Po
Pyo Phyo, Pio, Puo, Peo
Pung Poong
Pi Pee, Phee, Phi, Phy
Pil Phil
Ha Hah, Har
Han Hahn, Hann
Ham Hahm, Harm, Hamm, Haam
Hae
Heo Hur, Huh, Her, Hu, Ho
Hyeon Hyun, Hyon, Hyoun, Hyen
Hyeong Hyung, Hyoung, Hyong, Hyeung
Ho Hoh, Hu
Hong Houng, Hyong
Hwa Howa
Hwang Whang, Hoang
황보 Hwangbo
Hu Hoo

 


Posted by 根™
2008/11/27 19:50

제로보드 업로드 해결방법 tip/etc2008/11/27 19:50

제로보드 공식 홈페이지는 버그 패치가 적용되었기 때문입니다. (1.1.0에 포함)

http://www.adobe.com/products/flash/about/
이곳에서 Version Information 을 보아 10.0... 이라 적혀있을 경우 10이 설치되어있는 상태입니다.

http://download.macromedia.com/pub/flashplayer/current/uninstall_flash_player.exe
플래시 플레이어 제거 프로그램을 받아서 삭제한뒤

http://cafeimg.daum-img.net/content/top/flash_player_9r124.zip
이것을 받아 설치해주세요
 
Posted by 根™

안녕하세요.
이 내용도 하나의 팁이라고 할 수 있는지 모르겠지만...
제가 엄청 고생을 해서 글 올립니다.
플래너(planner) 모듈가 아주 유용한 기능이라서 사용을 하고 싶은 맘이 많았습니다.
테이블안에 플래너가 삽입하니 IE6 오류가 발생을 해서 작동을 할 수 없었습니다.
mshtml.dll 이 오류발생으로 내 컴퓨터가 이상이 있는 줄 알고 네이버 검색창에 몇 시간동안 서핑을 해봤지만..해결책은 없었습니다.
table이라는 문제가 있어서... 코딩해놓은 것을 div로 고칠 능력이 없어서..
아이프레임 삽입으로 해결 했습니다.

횡설수설이 많았습니다. 이제 본론부터...
http://www.etesat.co.kr/about_5
1. 아이프레임으로 해결하였습니다.
아이프레임 삽입시 이중 스크롤 문제가 있는데...
아래 태그로 해결했습니다.
<!--
<script>
 function resizeHeight(fr) {
  fr = typeof fr == 'string' ? document.getElementById(fr) : fr;
  fr.setExpression('height',about_5_1.document.body.scrollHeight);  }
</script>

<IFRAME name="about_5_1" border=0 marginWidth=0 marginHeight=0 src="/about_5_1" frameBorder=0 width=680 scrolling=no onload="resizeHeight(this)"></IFRAME>
-->

스크롤이 높이에 따라서 자동으로 지정이 되므로 아무런 문제 없이 사용할 수 있습니다.

2. 페이지 안에 위을 태그를 넣어주시면 됩니다.  끝~!

이 팁은 헤더푸더 기능으로 홈페이지 제작하시는 분이 애용하는데 유용할리라 생각이됩니다.
허접한 팁 남기고 갑니다.


[출처] http://www.zeroboard.com/17488974

Posted by 根™

IE6~5.5에서 PNG-24 이미지를 전경과 배경에 동시에 사용하려는 경우 예전에 포스팅 했던 ‘IE6에서 PNG-24의 투명/반투명 색을 바르게 표현하기‘ 라는 글을 참조하시면 됩니다. 그런데 전경으로는 사용하지 않고 오직 배경으로만 사용하려는 경우 저 팁을 적용하기에 불편함이 예상 됩니다. 별도의 iengfix.htc 파일과 blank.gif 파일을 요구하기 때문이죠. 하지만 PNG-24 이미지를 배경으로만 사용할 것이 확실시 된다면 굳이 저렇게 복잡하게 하지 않아도 됩니다. 이미 널리 알려진 팁인데 제 블로그에 적어두질 않아서 간단하게 포스팅 합니다. IE6~5.5 브라우저에만 대응하는 간단한 코드를 작성하고 CSS Hack으로 처리하는 방법 입니다.

PNG-24 이미지를 배경으로만 처리하려는 경우 CSS 코드를 다음과 같이 작성 하면 IE6~5.5 브라우저에서 PNG-24 배경 이미지를 정상적으로 렌더링 합니다.

.selector{background:url(png24.png); _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’png24.png‘, sizingMethod=’crop’);}

filter에 적용할 이미지의 src 경로를 상대경로로 지정하는 경우 background:url과 같이 CSS 파일을 기준으로 적용하면 안됩니다. filter에 적용하는 이미지의 경로는 HTML 문서를 기준으로 설정하여야 합니다. 즉, background의 이미지와 filter에 적용하는 이미지는 같은 이미지라 할지라도 경로의 기준이 CSS와 HTML으로 각각 서로 다르므로 이점 유의하여 적용하세요.

PNG-24를 정상적으로 렌더링 하는 표준계열 브라우저(Firefox, Opera, Safari, Chrome, IE7~8)에서는 다음과 같이 작용 합니다.

.selector{background:url(png24.png); _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’png24.png’, sizingMethod=’crop’);}

PNG-24를 정상적으로 렌더링 하지 못하는 IE6~5.5 브라우저에서는 다음과 같이 작용 합니다.

.selector{background:url(png24.png); _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’png24.png‘, sizingMethod=’crop’);}

언더바 ‘_’ 핵을 사용하여 IE6~5.5 브라우저에만 MS 전용 CSS Filter를 적용하는 방법입니다.

PNG-24 관련 CSS Hack 에 공통으로 발견되는 알려진 버그

이 핵 또한 다른 PNG-24 핵들과 마찬가지로 배경이미지의 배치를 원하는 곳에 할 수 없다는 것과 배경이미지의 반복이 불가능 하다는 문제가 있습니다. 배치는 기본값인 backgroun-position:left top 으로 설정이 되며 반복은 background-repeat:no-repeat 상태가 되므로 참고하세요.

IE에서는 png배경이 사용된 엘리먼트에 position:relative|absolute 속성이 들어가게 되면 자식요소의 a 엘리먼트에 마우스로 접근할 수 없는 버그가 있습니다. png배경이 포함된 요소에 position:relative|absolute 속성을 제거하거나 또는 a요소에 position:relative|absolute 속성을 함께 부여해 보세요.

[출처] http://naradesign.net/wp

TAG png
Posted by 根™

nmind 님께서 포스팅 해주신 ‘오늘의 링크’ 로부터 ‘IE6에서 PNG파일을 사용할 수 있게 해주는 스크립트‘ 라는 글을 보고 이를 적용하는 방법을 풀어 보았습니다. 이 팁은 IE 6.x 버전의 웹 브라우저에서 PNG-24 파일의 투명/반투명 색을 회색으로 처리해버리는 비표준 렌더링 방법을 개선하기 위한 해결방법 입니다. 기존의 스크립트가 단순하게 <img> 태그에만 적용되는 팁이었다면 이 방법은 CSS 의 Background 속성에도 적용이 가능하다는 점 때문에 높은 점수를 주고 싶습니다. PNG-24 이미지는 GIF와 달리 투명색 뿐만아니라 반투명색의 투과까지 지원을 해주기 때문에 웹 디자이너 입장에서 그 활용가치가 매우 높다고 말씀드릴 수 있겠습니다. 단점은 GIF 이미지보다 PNG-24 파일의 용량이 약 2배정도 증가한다는 점인데 화면을 PNG-24 으로 도배하지 않는 이상 그다지 걱정할 만한 트래픽 증가는 아닌것 같습니다. 하지만 되도록 큰 이미지에는 PNG-24의 사용을 자제하시는게 좋겠지요.

IE 6.x 버전에서 PNG-24 파일의 투명/반투명 색을 바르게 렌더링 하기 위한 CSS/Javascript 적용방법은 다음과 같습니다.

  1. iepngfix.htc 파일을 다운로드 한 다음 웹 서버의 원하는 폴더에 올립니다.
  2. 1*1px 짜리 투명색으로 처리된 blank.gif 파일을 웹 서버의 원하는 폴더에 올립니다.
  3. iepngfix.htc 파일을 열어서 blank.gif 파일의 경로를 바르게 변경합니다.
    if (typeof blankImg == ‘undefined’) var blankImg = ‘blank.gif‘; // 1×1px 짜리 투명 이미지(blank.gif)의 경로를 변경.
  4. 모든 페이지에서 참조하는 css 파일을 열고 원하는 class 에 {behavior:url(iepngfix.htc);} 속성을 추가한 다음 iepngfix.htc 의 경로를 바르게 변경해 줍니다.
    .iePngFix {behavior:url(iepngfix.htc);} /* iepngfix.htc 파일의 경로를 바르게 변경합니다 */
  5. 해당 class가 적용된 PNG-24 이미지의 투명/반투명 색이 IE 6.x 버전 에서도 정상적으로 렌더링 됩니다.

IE 6.x 정식버전에서의 렌더링 테스트 결과는 다음과 같습니다.

예제에 사용된 이미지는 포토샵에서 Alpha 50%가 적용된 것입니다. 이미지의 투명/반투명 영역이 체크무늬패턴의 배경을 어떻게 투과시키는지 확인하시면 됩니다. 특히 그림자 부분을 유의깊게 보시구요. 위아래로 같은 이미지이며 좌우로는 파일 형식이 다릅니다. 아래 화면은 IE 6.x 가 정상적으로 설치되어 있지 않은 분들을 위하여 센스있게 미리 캡쳐된 화면입니다. 정상적으로 설치된 IE 6.x 가 깔려있다면 실제로 코딩된 화면을 직접 확인 해보세요. IE6.x Standalone 버전 에서는 아래 화면 대로 렌더링 되지 않으며 스크립트오류까지 만나게 됩니다.

IE6.x 에서 PNG-24의 '투명/반두명' 색을 바르게 표현하기 렌더링 테스트 결과.

IE 5.x 까지 하위버전 호환되지는 않습니다. IE 6.x 버전만을 위한 것이지요. IE 7.x 부터는 이딴짓(?) 안해도 PNG 파일의 투명/반투명 색을 표준에 맞게 렌더링 해줍니다. 따라서 이 팁은 어디까지나 IE 6.x 의 브라우저 호환성을 유지하기 위한 방법이며 IE6.x 브라우저의 하위 호환성을 위하여는 IE8.x 버전이 나오기 전까지 이딴짓을 계속 해야 할 것으로 생각됩니다.

IE 6.x 렌더링 테스트 결과 발견된 문제점

  1. ‘회선속도가 느리거나 웹 문서의 용량이 커지는 경우’ 페이지가 완전히 로딩되기 전까지 투명/반투명 색이 잠깐동안 회색으로 나타나는 증상이 있습니다. 따라서 ‘저회선 사용자의 인터넷 환경’ 을 고려해야 한다거나 ‘포털’ 규모의 웹페이지에 사용하려는 경우 이를 심사숙고 해보아야 합니다. 한편 Apple Mac Pro, Mac OS X Leopard Sneak Peek 페이지 에서도 이 코드를 사용하고 있는것을 보면 그다지 Critical 한 측면은 아닌가 봅니다.
  2. .iePngFix 라는 class 가 적용된 배경이미지의 반복(repeat, repeat-x, repeat-y)과 위치값(left, right, top, bottom & offset value) 적용되지 않습니다.(위 background 렌더링 테스트 결과 참조)
  3. <img> 태그에 padding 값을 주게 되면 padding 값 만큼 PNG 이미지의 크기가 늘어나는 형태로 잘못 렌더링 됩니다. (위 <img> 렌더링 결과 참조)
  4. 2~3번 같은 경우 때문에 공용선택자 ‘*’ 에 behavior 를 적용하는 방법은 지양할 수 밖에 없습니다. repeat 시킬 필요가 없고 padding 값을 줄 필요가 없는 PNG-24 이미지에만 class 를 주어서 현재의 스크립트를 개별적으로 적용 하는 방법을 권장합니다. 사실 PNG-24를 이용하여 투명한 영역을 제대로 렌더링 시켜야 하는 경우는 많지 않으므로 역시 class 를 이용하는 방법을 권장합니다.
    (X) * {behavior:url(iepngfix.htc);} (O) .iePngFix {behavior:url(iepngfix.htc);}

    그럼에도 불구하고 이를 공용선택자 ‘*’ 에 일괄 적용하는 것이 나은 케이스라고 판단되면 이 속성을 상속받을 필요가 없는 PNG-24 이미지에는 다음과 같은 class 로 처리하십시오. 이 코드는 공용선택자 ‘*’ 보다 아래쪽에 코딩되어야 우선순위를 갖습니다. 당연하죠.

    .iePngUnFix {behavior:none;}
  5. IE에서는 png배경이 사용된 엘리먼트에 position:relative|absolute 속성이 들어가게 되면 자식요소의 a 엘리먼트에 마우스로 접근할 수 없는 버그가 있습니다. png배경이 포함된 요소에 position:relative|absolute 속성을 제거하거나 또는 a요소에 position:relative|absolute 속성을 함께 부여해 보세요.
  6. behavior 라는 속성은 IE 전용 속성입니다. 이러한 속성을 다른 브라우저는 오류로 처리하지 않고 그냥 무시해 버리기 때문에 전혀 문제가 되지는 않습니다.

참조문서

관련 포스트

[출처] http://naradesign.net/wp

TAG png
Posted by 根™

역시 실질적으로 '돈'을 벌어다주는(?) 프로그램이라서 그럴까요... 필수유틸이 되는 분위기네요.

별정통신 사용을 위한 것 외에도 다른 기능들이 많아서 활용도도 높은 것 같습니다.

아직 매직콜이 뭔가 어리둥절하시는 분은 아래 링크 참조하시구요....
-MagiCall설정방법, 한글화, 사용예에 대한 플래시 강좌
-MagiCall설치, 전반적인 안내

전체적인 안내는 링크 참조하시면 될 것 같고 한글화 파일설치하시면 메뉴도 한글화되어 이해가 쉬우니
그 중에서 몇가지 설정사항들에 대한 팁만 정리해본니다.


<필터(Filter)탭 >---------
필터타입(Filter type)은 전화번호를 구별하기 위한 것인데 연락처에 저장되었거나 특별한 전화번호이거나 등등 해당되는 번호일 경우에 한해 동작(Opetation)탭을 실행하게 됩니다.
모두 All  / 번호 지정 Specific number / 연락처에 있음 In Contacts / 연락처에 없음 Not in Contacts  / 번호 없음 No number (발신자 번호가 없는 경우) / 범주 Categories : 연락처의 특정 카테고리에 속해있는 번호인 경우


번호지정을 할 경우에 전화번호를 입력하는 칸에 해당되는 번호를 입력해도 되고 입력칸 끝에 보면 있는 화살표 클릭하면 연락처에서 선택해서 입력하거나 별도로 입력할 수 있습니다.
그리고 전화번호를 입력할때 와일드카드 문자 3가지 기억하시면 유용합니다.

* :여러개의 숫자.  ex) 060* 060으로 시작하는 전화번호
? : 글자 한자. 그러니까 ?하나에 숫자 하나씩 대응합니다.
; : 여러개 설정할때 번호끝에 붙여줍니다.


< 동작(Opetation)탭 >----------
Action1과 Action2의 항목들은 한글메뉴가 있으면 이해가 쉬울 겁니다. 굳이 따로 설명안드려도 될 듯... Action2의 경우 Action1을 실행한 후에 추가적으로 실행할 동작을 선택하는 항목입니다.

Action1에서 Change nuber 를 선택하면 Call to란이 활성화되는데 거기에 전화번호를 입력하면 된다. 이때 입력된 전화번호를 그대로 받으려면 {phone}으로 입력하면 됩니다.

{phone}[x,y]와 같이 넘어온 전화번호를 처리하는 방법이 있는데 x나 y값만큼 번호를 없애거가 추가할 수 있습니다. 일반적으로 두가지 경우가 많이 쓰일 것 같습니다.
국제전화를 걸 경우에 외국 모바일 번호의 경우 앞자리 0이 삭제되는 경우죠.
{phone}[-1,0]
090-256-8456와 같은 번호가 넘어왔다면 902568456이라는 {phone}의 값으로 갖게 됩니다.
voltc님이 아이디어 주신 전화번호에 #이 붙인후 #이 붙은 경우에 특정 규칙을 적용하려고 한다면
{phone}[0,-1]
이렇게 입력해서 실제 전화를 걸때는 #이 제거되도록 하면 됩니다.


몇가지 예를 들어보면,

# 연락처에 없는 번호 안받기

규칙형식: 수신전화
필터형식: 연락처에 없음 Not in contacts
작업1: 무시

# 회사에서 오는 전화 안받는기
규모가 있는 회사의 경우, 각 회사만의 국번을 사용하는데, 예로 들어 02-1111-구내번호 이런 식이죠
규칙형식: 수신전화
필터형식: 번호지정
전화번호: 0211111* or 021111????

작업1: 무시

작업2: 아무작업안함


만일 업무 관련된 사람을 연락처에서 "회사" 범주로로 지정했다면...

필터형식: 범주

범주: 회사

작업1: 무시
작업2: 아무작업안함


#일본으로 연락할 일이 많아 국제전화를 많이 써야 한다
전화번호에 국가번호(81)까지 저장되어있다면...
규칙형식: 발신전화
필터형식: 번호지정
전화번호: 81*

작업1: 번호 변경
전화걸기: 00365{phone}

*미국의 경우 국가번호가 1로 시작해서 국내 특수번호들 1588,112 등과 겹치는데 팁을 생각해보면..

1????????* 이렇게 입력하면 국내 특수번호와 길이차이가 있어 국제전화로 인식하게 될 겁니다.

그러니까 위에 것을  국제전화 쓰는 국가들을 추가해서 놓으면 되겠네요.
전화번호: 81*;86*;1????????*

만일 국제전화 콜링카드 등을 쓸 경우, 별정통신과 비슷하게 설정하시면 됩니다.
 

## 별정통신 사용을 위한 최적의 설정을 나름 종합해보면...

  1. 국내 핸드폰과 지역번호,070인터넷 전화 포함 모든 전화는 별정통신으로 연결
    규칙형식: 발신전화
    필터형식: 번호지정
    전화번호: 01*;02*;03*;04*;05*;06*;07*;99
    작업1: 번호변경
    전화 걸기(Call to) : 0808052500,,{phone}# 
    * 080접속번호는 각자쓰시는 걸로...
    * 접속번호 뒤의 , 콤마는 하나만해도 접속이 되긴하더군요.
    상황에 따라서 안되기도 하니 두개가 무난한것같고, 접속안되는 상황이 자주 생기면 ,,, 세개를 입력하세요.
    콤마가 많아지면 시간이 길어지기 때문에 최대한 줄이는게 좋겠죠.
  2. 여기에서 별정통신에서 연결이 안되는 번호는 직접 전화연결하는 규칙을 추가 합니다.
    다른 건 위와 같고..
    Call to : 0505*;060*
  3. voltc님이 아이디어 주신 별정통신 통하지 않고 걸때의 설정방법
    전화번호뒤에 #이 붙은 경우 직접 전화연결 
    Vito님의 아이디어에서 전화번호를 변경해두면 전화올때 발신자가 확인이 안되는 문제가 있습니다. 그러니까 연락처에 #을 붙이는 것보다는 만일의 경우에 위의 룰에 적용이 안되는 번호가 있을때 바로 걸려고 할때 이용하면 좋을 듯 합니다. 아니면 전화번호부에 저장되지 않았으나 망내할인 대상인 사람에게 수동으로 눌러서 전화할 경우에 사용하면 될 겁니다.

여러개의 규칙이 있을 경우 규칙 목록에서 상단에 있는 순서대로 적용이 됩니다. 그러니까 위의 별정통신인 경우, 3-2-1의 순서로 목록에 두면 됩니다.

위의 세가지 경우면 대부분의 상황이 모두 커버 될 것 같습니다. 그 외에 커플요금제, 번호지정의 경우도 상단의 링크와 팁을 활용해 보시면 될 것입니다. 
커플요금제, 망내할인 등 설정 참조

추가적으로 유용한 룰을 더해보겠습니다.

TAG MagiCall
Posted by 根™

탐색기에서 우측마우스 클릭-속성 여기에 보시면 대상(T)에 %SystemRoot%\explorer.exe 라고 되어있을 겁니다..

이곳에 계속해서  ,/n ,/e ,d:\ 라고 이어서 기재해 주시면 됩니다.

띄어쓰기 쉼표 등을 정확하게 해 주셔야 하니까 그냥 %SystemRoot%\explorer.exe ,/n ,/e ,d:\ 를 복사해서 붙여넣기 해 주셔도 됩니다.

TAG 탐색기
Posted by 根™
2008/06/19 18:50

영문 직급, 계급 tip/etc2008/06/19 18:50

회장 會長 Chairman
부회장 副會長 Vice Chairman
사장 社長 President
부사장 副社長 Senior Executive Vice Presiden
전무이사.전무 專務理事 Senior Managing Director
상무이사.상무 常務理事 Managing Director
이사.이사대무 理事 Director
감사 監事 Auditor General
고문.자문 顧問 Advisor
부장 部長 General Manager
본부장 本部長 Director
차장 次長 Deputy General Manager
실장 室長 General manage
과장 課長 Manager
대리 代理 Assistant manager
계장 係長 Chief
주임 主任 Assistant manager
주임기사 主任技士 staff engineer
기사 技士 Engineer
수석연구원 首席硏究員 Principal Research Engineer
상임고문 常任顧問 Executive Advisor
전문위원 專門委員 Research Fellow
법무팀 法務 Law Dept.
전략기획팀 戰略企劃 Plan Dept.
해외사업팀 海外事業 International Development Dept


▣ 군대 영문 계급

훈련병 private ·PVT
이병 private ·PVT
일병 private first class ·PFC
상병 corporal ·CPL

병장 sergeant ·SGT
하사 staff sergeant · SSG
중사 sergeant first class ·PSG
상사 master sergeant · MSG
일등상사 first sergeant · FSG
상급상사 sergeant major · SGM
특무상사 command sergeant major · CSM
육군주임상사 sergeant major of the army ·SMA
※미군에서 병장은 우리처럼 병사가 아니라 하사관급입니다.

준위 warrant officer · CWO1
준위장 chief warrant officer · CWO2
준위장 chief warrant officer · CWO3
준위장 chief warrant officer · CWO4
상급준위장 master chief warrant officer · CWO5
※준위는 총5단계며 chief warrant officer의 경우 명칭은 같지만 약어는 다르며 물론 계급장도 다릅니다.

소위 second lieutenant ·2Lt.
중위 first lieutenant · Lt.
대위 captain · CPT
소령 major · MAJ
중령 lieutenant colonel · LCL
대령 colonel · COL
준장 brigadier general · BG
소장 major general · MG
중장 lieutenant general · LG
대장 general ·GEN
원수 general of the army ·GA
Posted by 根™

보통 폰트를 너무 많이 깔면 안보인다는 식으로 알고계신 분들이 많은데요.

그렇진 않구요..문제는 일러스트에서는 한글폰트이름을 인식하지 못하기 때문입니다.
이렇게 한번 해보세요..
일러스트 10버젼의 경우

 C:\Program Files\Common Files\Adobe\TypeSpt 의 해당파일(AdobeFnt05.lst(버젼10) 이나  AdobeFnt.lst(버젼10이하))을

EditPlus 나 UltraEdit, 윈도우 워드패드에서 읽어 들여 수정를 하면 됩니다

예를 들어

양재다운고딕체인경우


%BeginFont
Handler:WinTTHandler
FontType:TrueType
FontName:양재다운고딕M

FamilyName:양재다운고딕M
StyleName:Medium
WeightClass:400
WidthClass:5
AngleClass:0
FullName:YJ DWGODIC-Medium
FamilyNameNative:양재다운고딕M
StyleNameNative:양재다운고딕M
FullNameNative:양재다운고딕M
WritingScript:Korean
WinName:양재다운고딕M
FileLength:868764
%EndFont

             

    ↓


%BeginFont
Handler:WinTTHandler
FontType:TrueType
FontName:YJ DWGODIC-Medium(이부분을 영문으로 바꿔주면 끝)
FamilyName:양재다운고딕M
StyleName:Medium
WeightClass:400
WidthClass:5
AngleClass:0
FullName:YJ DWGODIC-Medium
FamilyNameNative:양재다운고딕M
StyleNameNative:양재다운고딕M
FullNameNative:양재다운고딕M
WritingScript:Korean
WinName:양재다운고딕M
FileLength:868764
%EndFont


버젼 10의 경우 위의 FontName만 수정을 하면 됩니다.


낮은  버젼의 경우는 FontName, FamilyName, FullName

다 바꿔주어야 하는경우도 있습니다.

 

일러스트 CS 버젼에서는 저런 문제를 다 해결했다고 하니까

CS버젼을 써보심이...^-^

Posted by 根™
2008/06/08 17:39

구글애드센스 테스트용 소스 추가 tip/etc2008/06/08 17:39

사용자 삽입 이미지

사이트 제작할때나.. 기타 위치 변경들의 작업을 할때..
소스를 수정하고 확인하는 반복작을 한다.
그런날은 구글 애드센스의 노출수가 무진장 많아진다.
이런때는 위 그림처럼 소스를 추가해주고 사용하면 끝~~ㅋㅋ

google_adtest = "on";

Posted by 根™
2008/06/02 15:06

Design Watercolor Effect Menu tip/etc2008/06/02 15:06

This is a two-part tutorial on how to create an artistic and un-typical CSS list menu as seen on Web Designer Wall. In the first part (this article), I will show you how to design a watercolor effect menu in Photoshop. Then in next tutorial, I will show you how to slice the menu and code in CSS. If you need some inspiration on creating an artistic menu, visit our previous post on artistic websites. Ready? Let’s begin Part 1. (Update: Part 2 is ready - Advanced CSS Menu)

Download Photoshop file

Preview

Here is a preview of the final image:

sample menu

1. Notepaper stock image

First you need to find a notepaper stock image. You can buy stock photo from iStock or scan from a notepad.

screen 1

Cutout the notepaper and apply 2px drop shadow effect.

2. Watercolor effects

Cmd + click on the notepaper layer to load the selection. Create a new Layer Group and click on the Add Layer Mask mini icon in the Layers palette. This way everything within the Layer Group will be masked.

screen 2

Create a new layer. Choose a pink color (or any pastel color), select the Pencil tool, set the tool Opacity to 10%, brush size 100px, and drag around the document as you are doing a watercolor painting.

screen 3

Repeat this step until you get multi layers of watercolor effects.

screen 4

3. Add details

Find some coffee stain images, paste it in and set the layer blending mode to Multiply.

screen 5

Dirty and splatter effect: download and use the splatter or watercolor Photoshop brushes from Bittbox.

screen 6

Add some pencil sketch illustrations. You can either scan your marker sketches or use vector illustration.

screen 7

Make a triangle selection in the corner, pick a grey color and apply a gradient to make the wrinkle effect.

screen 8

4. Hand wrting text

If you don’t have any nice hand writing fonts, go to Dafont or Urban Fonts to download them. Create a new Layer Group and enter the navigation text.

screen 9

Find a different font, enter the menu mouseover text.

screen 10

5. Washout RSS icon

Use the Eraser tool, choose one of the splatter brushes, set tool Opacity to 10% and randomly erase the edge. Then paint some brown color overlay the icon to give the dirty effect.

screen 11

6. Sketchy strokes

Sketchy or pencil strokes can be easily created in Adobe Illustrator. Draw a shape or path, open the Brushes palette, click on the charcoal brush and set the Stroke weight to 0.25pt.

screen 12

7. Final

Here is my final image. If you want to spend more time on the details, you can add paper clips, tapes, post note, pencil sketches, etc.

sample menu

Subscribe RSS

Don’t forget to subscribe our RSS to stay in touch with our next tutorial on how to code the menu in CSS.

Update: Part 2 is ready

Please continue to read part 2 on how to code an Advanced CSS Menu.

[출처] http://www.webdesignerwall.com/tutorials/design-watercolor-effect-menu/

Posted by 根™
2008/06/02 15:01

Photoshop Secret Shortcuts tip/etc2008/06/02 15:01

It is proven that by using software shortcuts can boost up productivity. Here are 30 secret Photoshop shortcuts that I’ve learned from years of experience. Well, what I mean by "secret" is that these shortcuts are not documented in the menus. Keep reading and you will find how these shortcuts can speed up your productivity. I bet you don’t know all of them.

Note: this article is written in Mac Photoshop format. If you are using PC, Cmd = Ctrl and Opt = Alt.

  1. Drag selection
    With the Marquee tool, drag on the document (do not release the mouse yet), now hold down Spacebar, it will let you drag the undefined selection.

    screenshot

  2. Navigate the document left or right
    Hold down the Cmd key and scroll up or down allows you to navigate the document left or right. For example, hold down Cmd + scroll up will navigate to right.

    screenshot

  3. Browse the font list
    Put your cursor in the font list dropdown, you can browse the font list by pressing arrow Up or Down key.

    screenshot

  4. Scale font size
    Select the text that you want to scale the font size, press Cmd + Shift + > or < to increase / decrease font size.

    screenshot

  5. Zoom with the scroll wheel
    You can zoom in / out by Cmd + Opt + scroll up or down.

    screenshot

  6. Drag to adjust numberic value
    Mouseover the input box, hold down Cmd + drag left or right to increase / decrease. Hold down Cmd + Opt or Shift key and drag can change the value in decimal or 10 interval. This shortcut works in all dialog palettes.

    screenshot

  7. Scroll to adjust numeric value
    Put the cursor in the input box, scroll up or down to increase / decrease value. This shortcut works in all dialog palettes.

    screenshot

  8. Arrow up / down to adjust numeric value
    Put the cursor in the input box, press arrow Up or Down to increase / decrease. Hold down Shift and press arrow Up or Down will change value in 10 interval.

    screenshot

  9. Zoom to 100%
    Double click on the Zoom tool will zoom document to 100%.

    screenshot

  10. Collapse or expand all layer groups
    You can collapse or expand all root-level layer groups by holding down Cmd + click on the triangle icon. Hold down Cmd + Opt + click on the triangle icon will collapse or expand all level layer groups.

    screenshot

  11. Show / hide in a row
    If you need to show / hide more than one layers, instead of clicking one by one, you can click on the visibility icon and drag in a row.

    screenshot

  12. Hide other layers
    Hold down Opt + click on the visibility icon will hide all other layers.

    screenshot

  13. Navigate layer blending mode
    Opt + Shift + "-" or "+" key allows you to navigate through the blending mode dropdown.

    screenshot

  14. Set specific blending mode
    Opt + Shift + C, N, M, S, D… allows to set layer to specific blending mode.
    For examples:
    Normal = Opt + Shift + N
    Screen = Opt + Shift + S
    Multiply = Opt + Shift + M
    Color = Opt + Shift + C

    screenshot

  15. Lock layer transparency
    Press forward slash ("/") to lock layer transparency.

    screenshot

  16. Load Channel selection
    You probably know that Cmd + number keys (1, 2, 3) will activate the channels in sequent. Press Cmd + Opt + number keys will load the selection. For example, press Cmd + Opt + 4 will load Alpha channel 1.

    screenshot

  17. Tool panels
    Press Tab to toggle tool panels.

    screenshot

  18. Precise cursor
    Caps lock will display tool cursor in precise mode.

    screenshot

  19. Navigate the tool list
    You can navigate through the tool list by pressing Shift + tool shorcut. For example: B = Brush tool, if you press Shift + B again, you will switch to Pencil tool.

    screenshot

  20. Increase / decrease brush size
    With the Brush tool selected, you can increase / decrease the brush size by pressing [ or ] key (square bracket key). Press Shift + [ or ] will increase / decrease brush hardness.

    screenshot

  21. Opacity
    You can set the layer opacity by pressing the number keys (ie. 1 = 10%, 2 = 20%…). When you have the brush tool selected, pressing the number keys will adjust the brush opacity.

    screenshot

  22. Duplicate layer
    There are several shortcuts to duplicate layers.
    1. You can hold down Cmd + Opt + drag to duplicate the active layer.
    2. Cmd + Opt + arrow keys (Up, Down, Left, Right).
    3. Cmd + J will duplicate the active layer in exact position.
    4. Hold down Opt + drag within the Layers palette can also duplicate layers.

    screenshot

  23. Copy visible and paste in a new layer
    Press Cmd + Opt + Shift + E will copy the visible layers and paste in a new layer.

    screenshot

  24. Change workspace background
    By default Photoshop use grey for the workspace background color. You can change that by:
    1. select your favorite color
    2. choose the Paint Bucket tool
    3. Hold down Shift + click on the working area (outside the document area)

    screenshot

    Update: right-click on the workspace area to get a dropdown menu - allows you to set the background to black, grey, or a custom color (commented by Todd Patrick).

  25. Fill background or foreground color
    Opt + Delete (Backspace) = fill the layer with foreground color.
    Cmd + Delete (Backspace) = fill the layer with background color

    screenshot

    Update:
    Cmd + Shift + Delete (Backspace) = Fill non-transparent pixels with background color
    Opt + Shift + Delete (Backspace) = Fill non-transparent pixels with foreground color
    (commented by André Dion)

  26. Switch between document windows
    Ctrl + Tab will switch between document windows.

    screenshot

  27. Load layer transparent
    Cmd + click on the layer thumbnail will load its transparency.

    screenshot

  28. Scale proportionally from center
    When you are using the Marquee tools or Free Transform, hold down Opt + Shift + drag will scale proportionally from the center.

    screenshot

  29. Shortcut to Eyedropper
    If you have the Brush tool selected, hold down Opt key will quickly activate the Eyedropper tool. Hold down Opt + Shift will activate the Color Sampler Tool.

    screenshot

  30. Finally…
    Finally, if you want to check or set your own custom shortcuts, press Cmd + Opt + Shift + K will bring up the Keyboard Shortcuts panel.

    screenshot

Additional from the comments

  • In some dialog boxes, holding the Opt key will turn the “Cancel” button into a most useful “Reset”. (by Miguel Tavares)
  • To stroke a path, first select the path, then change to the brush tool, select a brush, and type Enter or Return. This works with all of the brush-like tools (eraser, clone, blur, etc.). (by buddhistMonkey)
  • To turn a path into a selection, type Command-Enter or Command-Return (doesn’t matter what tool is selected). If there is already a selection, then Command-Shift-Return will add your path’s shape to the selection, Command-Option-Return will subtract it, and Command-Option-Shift-Return will select the intersection. (by buddhistMonkey)
  • If you are adding a “Drop Shadow” layer effect, and you have the Layer Style dialog open to the Drop Shadow settings, you can move the shadow around by clicking and dragging in the image. This also works with the “Inner Shadow” effect. If you hold down the Option key, you can also adjust the Gradient Overlay, Pattern Overlay, and Satin effects by clicking and dragging. (by buddhistMonkey)

Do you know more shortcuts?

Do you know more Photoshop shortcuts that are not listed in this article? Please post them in the comment form. Make sure they are "secret" (not documented in the Photoshop menus).

Posted by 根™
2008/06/02 14:19

Google Doctype tip/etc2008/06/02 14:19

Documenting the Open Web

Google Doctype is an open encyclopedia and reference library. Written by web developers, for web developers. It includes articles on web security, JavaScript DOM manipulation, CSS tips and tricks, and more. The reference section includes a growing library of test cases for checking cross-browser and cross-platform compatibility.

Google Doctype is 100% open.

  • Open source
  • Open content
  • Open to contributions from anyone

Featured Video

Posted by 根™
2008/05/27 11:44

FLV 다운로드, 동영상 다운로드 tip/etc2008/05/27 11:44

매우 오랫만에 동영상 관련 포스트를 작성하게 되었네요
아직까지도 많은 분들이 질문을 해오고 계셔서 깜짝 놀라곤 합니다

벌써 2~3년 전 동영상 서비스에 입문하면서 꽤 까다로운 방법으로 변환을 했던 것 같은데
요즘은 많이 편해졌다는 것을 느낀답니다
(이제는 동영상 서비스 업무를 하지 않아요 ^^;)

예전엔 별도의 프로그램이나 인터넷 브라우저를 통해 저장된 파일을 꺼내는 방법을 주로 썼지만
요즘은 동영상 파일을 사이트에서 편하게 다운로드 할 수 있는 서비스가 있답니다

국내와 해외 서비스를 하나씩 소개해 드리고자 하는데
공통으로 테스트 할 수 있는 Youtube 동영상 하나를 샘플로 선택하도록 할께요

- 샘플 동영상 -

사용자 삽입 이미지

얼마 전 많은 사람들에게 인기를 끌었던 빵상아줌마 동영상입니다
(http://kr.youtube.com/watch?v=RkYqQk3Z5GI)

사용자 삽입 이미지
 ↓
사용자 삽입 이미지

주소 창에 해당 영상의 URL이 나타나기도 하지만
혹시 확인이 안되실 경우에는 영상 오른쪽의 동영상 정보에서
추가정보를 누르시면 URL을 확인하실 수 있답니다

- 국내 서비스 - 

사용자 삽입 이미지

To Get FLV 라는 서비스 입니다
(http://www.2getflv.com)

국내의 거의 모든 동영상 서비스에서 파일을 다운로드 받을 수 있고
해외의 일부 동영상 서비스에서도 받을 수 있습니다
 

사용자 삽입 이미지

샘플 동영상의 URL을 입력하고 검색을 누릅니다
URL에 문제가 없다면 아래에 다운로드 버튼이 생긴답니다
(누르면 다운로드를 하실 수 있어요)

사용자 삽입 이미지

추가로 엠군 동영상 하나를 더 테스트 해 봤습니다
(문제없이 잘 되는군요 ^^;)

- 해외 서비스 - 

사용자 삽입 이미지
해외 서비스는 이미 많이들 알고 계시는 KEEPVID 입니다
(http://keepvid.com/)

사용법은 동일하며
국내 동영상 서비스 업체는 지원하지 않는군요

사용자 삽입 이미지

샘플 동영상의 URL을 입력하니 다운로드 링크가 생기는군요
(Download Link를 누르시면 받으실 수 있어요)

Youtube 영상의 경우
국가별 서비스도 모두 다운로드가 가능한 것 같습니다

동영상 다운로드에 대한 갈증이 조금이나마 풀어지셨는지 모르겠네요
조만간 동영상 변환 프로그램에 대한 포스트로 찾아 뵙도록 하겠습니다


관련글
유튜브 동영상 다운로드 해서 아이팟에 넣는 프로그램 프로그램 리뷰 Program Review | 08.05.23
FLV format Memory | 08.05.20 09:56
to get .flv file 쿠...sal | 08.05.27 06:39
AVISynth Plugins - dll, avs, vdf 필터 모음집 종스비의 방 | 08.05.26 05:16
프로그램/UCC다바다 기획 전문가 (세상을 기획하는 남자)
원더걸스 소핫 뮤직비디오 다운방법 (FLV 동영상 다운방법) 2Click.kr | 08.05.24 02:55
양쪽 브레이크 등 등화손상 아~찔 3rd challenge:BELLBLOG.COM ... safe
FLV format Memory | 08.05.20 09:41

Posted by 根™
2008/05/15 12:11

DNS Ever, dnsever tip/etc2008/05/15 12:11

사용자 삽입 이미지


Link.. DNS Ever.com


  • DNSEver는 도메인은 보유하고 있으나, 네임서버가 없으신 분, 네임서버 구축 또는 관리에 어려운 분을 위하여, 안정적인 네임서버를 제공하고 있습니다.
  • 여러분의 사내 네트워크내에 DNS서버를 구축할 경우에, 네트워크가 다운되거나, 새로운 전용선으로 교체를 할 경우, 인터넷 서비스를 못하게 되는 문제점이 발생할 수 있습니다.
  • DNSEver 의 DNS 시스템은 전용IDC에 설치되고, 최고의 시스템 전문가가 항상 최적의 네트워크 및 서버환경을 유지토록 관리하여, 항상 DNS서비스가 최고의 상태로 정상 작동하도록 합니다.
  • DNSEver의 네임서버는 지역적으로 분리되어 있으며, 각기 다른 기간망에 물려 있어, 네트워크 장애의 가능성을 차단하고 서비스의 안정성을 극대화합니다. ( 서울의 KIDC와 경기도분당의 KT-IDC에 각각 분산되어 있음)
  • DNSEver의 DNS서비스를 이용하면, DNS를 운용할 서버와 시스템전문가를 두지 않아도 되므로, 도메인을 관리하기 위한 시간과 돈이 절약됩니다.
  • 전화나 케이블망으로 초고속인터넷을 이용하때, 매번 접속할 때마다, IP가 변경되는 유동IP환경에서도, 자신의 컴퓨터에서 인터넷 서버를 구축할 수 있습니다.DNSEver의 다이나믹DNS 서비스를 이용하면 자신의 컴퓨터에 다이나믹DNS클라이언트를 설치하여, 주기적으로, 자신의 도메인주소(예:www.myhome.com)을 매번 바뀌는 유동IP로 연결할 수 있습니다.
  • 홈페이지 주소가 너무 길거나 복잡하십니까? 기존의 길고 복잡한 홈페이지 주소를 자신의 새로운 도메인으로 손쉽게 연결하고 싶으십니까? DNSEver의 웹포워딩 서비스는 길고 복잡한 홈페이지 주소를 짧게 해 드립니다.
  • 홈페이지를 아직 만드시지 않으셨다면, “공사중”, “판매중”등을 나타내는 시작 홈페이지를 즉시 만들어 드립니다.
  • Posted by 根™
    사용자 삽입 이미지

    [이미지입니다. 클릭하셔도 작동안되요 ^^]

    네오얼리에 보시면 FLV플레이어가 구동되는 게시물들 몇개 보셨죠? (EX. 예를 들면 이런 게시물 )
    FLV플레이어가 뭐냐면 플래시로 컨버팅된 동영상을 재생할 수 있는 플래시 플레이어입니다.
    이미 어느정도 주류화가 되었다고 생각하는데요 잘 아시는 YOUTUBE나 MNCAST등이 바로 FLV플레이어입니다.

    이것을 본인의 홈페이지에 탑재하는 방법입니다.
    자유게시판에 재아님의 요청으로 올려드립니다.
    먼저 플레이어 소스는 http://www.jeroenwijering.com/?item=Flash_Video_Player 에서 다운로드 받으실 수 있습니다.
    현재 3.8버전까지 런칭되어 있습니다.

    비상업적인 홈페이지에서 사용하는 것은 무료이며 상업적인 홈페이지에서 사용하려면
    15유로를 지불하면 별도의 플레이어를 제공한다고 합니다.
    다운로드 받은 압축파일을 해제하면 다음과 같은 파일들이 들어있는데 다른건 신경쓰시지 말고
    붉은 박스쳐놓은 flvplayer.swf 파일을 본인의 계정에 업로드 하십니다.
    그 경로를 기반으로 FLV파일을 재생할 수 있도록 일단 준비는 끝났습니다.

    사용자 삽입 이미지


    그럼 모든 준비는 끝났습니다. 이제 재생을 원할 FLV포맷파일을 계정에 업로드하고 둘을 싱크시키면 됩니다.
    그리고는 다음과 같이 게시판이나 홈페이지에 입력해주세요.

    <embed src="FLV플레이어경로" width="가로크기" height="세로크기" allowfullscreen="true" flashvars="&file=FLV무비경로&height=180&image=재생되기전 보여질 이미지경로&width=320" />


    그외 플레이어 색상 바꾸기, 리스트 형식으로 재생되기, 워터마크 이미지등 매우 많은 옵션이 있지만
    일반적으로 잘 사용할 필요는 없는 부분이며 그래도 나는 꼭 알아야겠다라고 생각하시는 분들을 위해
    간편하게 Wizard홈페이지가 운영되고 있으니 참고하시면 되겠습니다.
    속성을 암기하시지 못했을 경우에는 WIZARD를 사용하시는게 더욱 간편하니 이쪽을 권장드리는 바입니다.
    http://www.jeroenwijering.com/extras/wizard.html


    사용자 삽입 이미지


    1. 어떤 형태로 구동할 것인가입니다. MP3플레이어도 있고 플레이리스트 설정등의 포맷도 있지만
    일반적인 동영상을 구현하기 위해 A single FLV file을 선택합니다.

    2. 설정을 잡는 곳입니다. 적어놓은대로 하시면 됩니다. 원본높이+20은 플레이어바때문에 무비원본보다 20을 더 크게 준것입니다.

    3. 여기가 결과값이 생성되는 곳입니다. 하시고 카피하셔서 쓰시면 됩니다.

    4. 결과값을 불러오는 곳입니다. 다 설정하시고 요부분을 클릭하시면 됩니다. 그럼 3번에 결과값이 뿌려집니다.

    5. 보다 세부적인 옵션을 설정하는 곳입니다. 클릭하시면 하단에 세부옵션창이 튀어나옵니다.



    -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

    PS - 변화를 원해님의 질문에 추가로 답변 드립니다. 2007.6.8
    MP3플레이어로 사용시 한곡 재생시에는 무비경로에 MP3경로를 바로 입력하시면 되지만
    여러곡을 재생하시려면 플레이리스트를 XML로 작성하셔야 됩니다.
    사용된 xml플레이 리스트를 예제로 올려드릴테니 다음 형식으로 작성하시고 확장자를 XML로 저장후 계정에 업로드 하시고
    무비경로에 xml파일을 지정해주시면 됩니다. 샘플을 올려드릴테니 참고하시고 만들어보세요.

    [sample xml파일]

    <playlist version="1" xmlns="http://xspf.org/ns/0/">
     <trackList>


      <track>
       <title>곡제목</title>
       <creator>작성자 혹은 가수(일반적으로 가수) </creator>
       <location>MP3경로</location>
       <image>썸네일 이미지 경로</image>
       <info>클릭했을때 보내질 사이트 (본인홈페이지나 앨범정보 사이트) </info>
       <identifier>식별자(1,2,3...100등으로 명기하시면 됩니다.) </identifier>
      </track>


      <track>
       <title>Jazzalude</title>
       <creator>Basement Jaxx</creator>
       <location>http://www.jeroenwijering.com/upload/song2.mp3</location>
       <image>http://www.jeroenwijering.com/upload/basement.jpg</image>
       <identifier>123</identifier>
       <info>http://www.amazon.com/Rooty-Basement-Jaxx/dp/B00005K9V5/sr=8-3/qid=1166887603/ref=pd_bbs_sr_3/105-9454024-2355627?ie=UTF8&s=music</info>
      </track>


      <track>
       <title>Sunshine Up Ahead</title>
       <creator>Peter Jones</creator>
       <location>http://www.jeroenwijering.com/upload/peterjones_sunshine_lofi.mp3</location>
       <identifier>789</identifier>
      </track>


      <track>
       <title>Homeland</title>
       <creator>Postman</creator>
       <location>http://www.jeroenwijering.com/upload/song1.mp3</location>
       <image>http://www.jeroenwijering.com/upload/postmen.jpg</image>
       <info>http://www.amazon.com/Revival-Postmen/dp/B00005J8R7/sr=1-6/qid=1166887655/ref=sr_1_6/105-9454024-2355627?ie=UTF8&s=music</info>
       <identifier>456</identifier>
      </track>


     </trackList>
    </playlist>

    유용하게 사용하시구요 모르시는 점 있으시면 질문 언제든지 환영합니다.
    고맙습니다 ^^

    [펌] http://www.neoearly.com/bbs/view.php?no=61&id=webforum

    TAG FLV
    Posted by 根™
    2008/01/10 15:25

    UCC 동영상사이트 모음 tip/etc2008/01/10 15:25

    1.  www.mncast.com               ;빠른 속도에 가장 만족.
    2.  www.pandora.tv                 ;다양하고 많은 동영상 자료.
    3.  http://play.naver.com          ;네이버 동영상 ucc
    4.  http://see.daum.net            ;다음 동영상 ucc
    5.  http://netv.sbs.co.kr           ;sbs 방송 컨텐츠들을 직접 편집하고 올릴 수 있음.  
    6.  www.tagstory.com              ; 태그와 rss를 이용한 동영상 ucc. rss 구독도 됨.
    7.  http://aura.damoim.net/       ; 다모임 동영상 ucc
    8.  www.mgoon.com                ;동영상 개인미디어
    9.  http://tvpot.media.daum.net  ;다음 tv 팟
    10. http://kr.multimedia.yahoo.com  ; 야후 야미
    11. www.diodeo.com               ; 디오데오

    그밖에
    12. http://www.allpot.co.kr/     ;KT 통합 ucc
    13. http://cyplaza.cyworld.nate.com/bbs/cli ··· code%3D1   ;싸이월드 동영상채널              
    14. http://www.youtube.com    ; 미국 유투브 동영상 ucc
    TAG ucc
    Posted by 根™