CSS
-
웹디자이너를 위한 컨닝페이퍼 , 한장씩 뽑아서 책상앞에 붙여 두라구!달을파는아이 2008. 10. 14. 14:43
웹디자이너들은 출근을 하고 컴퓨터를 켜자 말자 바로 실행시키는 몇가지 프로그램들이 있다. 포토삽, 드림위버, 일러스트 등등.. 그런 프로그램들의 단축키와 색상표 , CSS 태크표를 A4한장에 깔끔하게 정리해둔 컨닝 페이지들이다. 책상앞에 한장씩들 붙여놓고 살짝살짝 보면 많은 도움이 되지 않을까 한다. 포토샵 단축키 컨닝페이퍼 http://morris-photographics.com/photoshop/shortcuts/#pscs3 Adobe Photoshop CS3 : pdf 파일 다운로드 (43 KB) Adobe Photoshop CS2 pdf 파일 다운로드 (51 KB) Adobe Photoshop 7 pdf 파일 다운로드 (32 KB) 그외 버전들 : http://morris-photographics..
-
브라우저 크기에 따라 변하는 리퀴드 레이아웃 디자인 사이트들달을파는아이 2008. 5. 13. 10:00
리퀴드 레이아웃 디자인이란? 브라우저가 커지거나 작아질때 마다 유동적으로 변하는 디자인이다. Liquid layout design , 말그래도 물처럼 상황에 맞게 모양을 바꾼다는 의미. 우리나라는 주로 가로세로를 딱 맞춰서 디자인 하는 경우가 많다. 가로세로를 맞춰서 디자인을 할 경우 항상 일정한 디자인을 보여줄수 있고 디자이너가 원하는 디자인을 유지할수 있다는 장점이 있다. 하지만 모니터를 작게 쓰는 사람이나, 너무 큰 사람에게는 잘려보이거나 너무 헐렁해보일 수 있다는 단점이 있다. 리퀴드 디자인은 그런 약점을 보완하고 모니터 크기에 상관없이 화면에 꽉 차 보이게 하는 장점이 있다. 아래 사이트들은 대표적인 리퀴드 디자인으로 구현된 사이트들이다. http://clearleft.com/ http://ov..
-
CSS 레이아웃 생성기달을파는아이 2008. 5. 10. 00:37
CSS로 레이아웃을 잡다가 보면, 의외로 생각대로 안될때가 많다. 생각같아서는 분명이 되야 하는데 안될때가 있다. 이럴때면 키보드를 하나씩 뽑아 버리고 싶은 충동이 일어난다. 하지만 이제는 그럴일이 없다. 원하는 레이아웃을 자동으로 생성해주는 곳이 있기때문이다. 아래 사이트들은 CSS 레이아웃을 자동으로 생성해주는곳이다. CSS Layout Generator http://csscreator.com/?q=tools/layout 상단,왼쪽,오른쪽,하단의 간격을 설정해주고 "Generrate Layout" 버튼을 눌러주면 자동으로 css와 html 파일을 생성해준다. Firdamatic http://www.wannabegirl.org/firdamatic/ 이 사이트는 2단,3단 레이아아웃을 생성해주는데, 단순..
-
[웹디자인] CSS 로 만들어진 다양한 네비게이션 메뉴들 대량 모음!!달을파는아이 2008. 4. 29. 13:36
출처 : CSSで作成されたサイトのメニューサンプル集(css로 작성된 사이트메뉴 샘플들 모음.) サイトのデザインにとってメニュー部分は重要な箇所になってきます。そのメニュー部分のサンプル集。 多くのリソースから自分の作りたいサイトにあったナビゲーションを選んで使えますね。 사이트에 있어서 메뉴부분은 중요하지. 그 메뉴부분 샘플모음. 많은 리리즈에서 자기가 만드는 사이트에 맞게 네비게이션을 골라서 쓰삼~ 11 CSS navigation menus 12 more CSS Navigation Menus. 14 Free Vertical CSS Menus 2-level horizontal navigation Absolute Lists Accessible Image-Tab Rollovers ADxMenu A drop-down theme ..
-
[CSS] 자바스크립트 없이 재빠른 롤오버 버튼 만들기달을파는아이 2008. 4. 27. 15:51
출처 : How to make Buttons with Hover Load Faster 자바스크립트를 이용하지 않고 단지 css만을 이용해서 롤오버를 만드는 방법이다. 예제 css : .nav a:link, .nav a:visited { width: 160px ; height: 30px ; display: block; overflow:hidden; background: url(’images/nav1.gif’) 0px 0px no-repeat; } .nav a:hover, .nav a:active{ background-position: 0px -30px; } css 소스와 이미지만 보고 대충 감잡은 분들도 있을거란 생각이 든다. 원리는 간단하다. 한 이미지에 노멀할때랑 롤오버되었을때를 같이 만들어 넣는다. ..
-
남홈페이지 일부분만 내홈페이지에 넣기파싱의 추억 2008. 4. 27. 13:34
남 홈페이지중 일부분만 가져와서 내홈페이지 넣는 방법입니다. 꽁수중에 왕꽁수 입니다. 테스트해본결과 익스,파폭 다 잘 됩니다. 아이프레임과 div 를 이용한 꽁수인데 겉으로 보이기만 일부분만 보이는것이지 실제로는 홈페이지 두개를 불러내는거와 같습니다. 과도하게 많이 사용하면 페이지 로딩속도가 상당히 떨어질수 있습니다. 위에 보이는 사이트를 넣고 난 결과(http://insidedream.net)는 아래와 같습니다. 깜쪽같지 않습니까? ㅋㅋ 물론 링크걸렸을때 페이지 안에서만 보인다는 단점이 있긴하지만 , 이런기능이 꼭 필요할분들이 분명이 있을거라 생각됩니다. ^^ 소스는 아래와 같습니다. 응용해서 쓰세요 원리를 간단히 설명드리자면, (설명색과 같은 색인 소스를 보면 됩니다.) 1.아이프레임으로 홈페이지 통..