demun(대문블로그)

퍼블리셔/css2012. 8. 2. 06:00

이미지를 가지고 transition 을 하는 방법이 있어 소개합니다. 마우스를 갖다대었을때 이미지가 변경이 되는 트랜지션을 알려드립니다. 먼저 앞에 보이는 이미지나 숫자가 있고(front), 뒤에 보이는 배경이(back) 있습니다. 처음에는 앞에 보이는 이미지가 보이고 마우스를 갖다 대었을때 뒤에 보이는 이미지가 보이는 형식입니다. 블로그에서 직접 시현하면서 보여드릴려고 클래스가 좀 복잡합니다. 이해해주시고 어떻에 적용되어지는지에 관심을 맞쳐서 보시기 바랍니다. 결과물이 어떤지 먼저 동영상을 보시고 글을 읽어주세요. 여기서는 -webkit 을 사용했습니다. 크로스 브라우징 코드를 만들어주는 사이트를 참고하세요. http://demun.tistory.com/2172 먼저 소스는 아래와 같습니다. 1 그럼 ..

퍼블리셔/도구2012. 8. 1. 06:00

글쓰는 현재의 시점에 각 브라우져별로 접두사를 사용합니다. -webkit, -moz, -ms, -o 등등이 있지요. 오늘 소개하는 사이트는 http://prefixr.com/ 입니다. 이 사이트는 하나의 코드를 넣으면 각 브라우져의 접두사를 알아서 넣어 만들어줍니다. 옵션으로는 줄바꿈을 추가한다든가, 코드를 압축하는 등의 옵션이 있고, 각 브라우져의 접두사를 제외할 것인지를 선택할 수 있습니다. 간단하게 사용법을 알려드리겠습니다. 접속하면 코드가 있는데 모두 지우고 내가 만든 코드를 넣습니다. 줄바꿈도 안되고 띄어쓰기도 안된 그냥 예제 코드를 하나 넣어보겠습니다. 아래 Prefixize 를 클릭합니다. 이런식으로 이 prefixr.com 은 각 브라우져에 맞게 접두사를 알아서 넣어줍니다. 하나의 스타일만..

퍼블리셔/기술2012. 7. 28. 06:00

K-WAH 4.0이란? K-WAH 4.0은 한국형 웹 콘텐츠 접근성 지침 2.0에 따라 웹사이트(웹페이지)가 접근성 지침의 6개 세부지침을 준수하는지를 자동 점검하도록 지원해 주는 소프트웨어입니다. K-WAH 4.0에서 자동 점검하는 6개 세부 지침은 다음과 같습니다. 1. 대체텍스트 제공 2. 제목제공 3. 기본언어 명시 4. 사용자 요구에 따른 새창 열기 5. 레이블 제공 6. 마크업 오류 방지 K-WAH 4.0을 이용하여 웹 사이트의 접근성 준수 여부를 점검하고 오류를 수정하는 과정을 통해서 장애인들의 접근이 용이한 웹사이트를 만들 수 있도록 도와줍니다. 이 소프트웨어 프로그램은 한국정보화진흥원에서 제작하였습니다. 다운로드는 웹접근성 연구소에서 하면 됩니다. http://www.wah.or.kr/A..

퍼블리셔/도구2012. 7. 27. 14:11

대부분 css 나 javascript 는 압축을 많이 합니다. 하지만 압축된것을 다시 보기 좋게 정렬하는것은 흔치 않더군요. 그래서 이번에는 압축되거나 엉클어진 코드를 보기 좋게 정렬 시키는 도구를 소개합니다. 1 cssAlign 이전에도 한번 언급한 적이 있는데요. css 를 주석이 있거나, 없거나, 줄바꿈을 하거나 하는등의 옵션을 지정해서 코드를 정렬할 수 있습니다. 저도 자주 사용하곤 합니다. 홈페이지 => http://www.clearboth.org/util/cssAlign.html 2 CSS Beautify 이 사이트는 영어로 되어 잇지만 사용하는데는 무리가 없어 보입니다. 엉클어진 코드를 넣고 우측을 클릭하면 자동으로 코드를 정렬시킵니다. 코드를 넣어봤습니다. 자동으로 정렬하네요.... 위 화..

퍼블리셔/css2012. 7. 21. 13:33

CSS 3 로 제작된 드롭다운 메뉴입니다. 뭐 워낙 좋은 드롭다운메뉴는 많이 있습니다. 그런데 하나같이 이미지가 있어야 하거나, 스크립트가 추가되거나 합니다. 또 부드럽게 하위메뉴가 펼쳐지면 좋은데 그냥 보이고, 감추는 형식입니다. CSS 3 에는 에니메이션이나 트렌스폼같은것이 있습니다. 적절하게 잘만 응용하면 좋은 드롭다운 메뉴가 나오는데요.... 저도 해보았지만 그닥 만만하지가 않군요. 적어도 ie8 버젼까지는 사용할만 해야 할것 같아서요... 이 메인메뉴의 포커스는 아래와 같습니다. 이미지가 없습니다. 자바스크립트가 없습니다. 하위로 펼쳐지는 드롭다운 메뉴입니다. 하위로 부드럽게 펼쳐집니다. 호환성은 ie8 까지는 잘 보입니다. ie7 이하로는 물론 보이기는 하나 약간 엉클어집니다. 뭐 구지 그것까..

퍼블리셔/에디터2012. 7. 10. 06:00

텍스트 에디터 중에서 가장 인기있는 에디터가 coda 가 아닌가 싶습니다. textmate, coda 등은 꽤 유명한 에디터이고 테마도 매우 유명합니다. 하지만 윈도우에서 사용할 수 없다거나, 유료이거나 해서 많은 분들이 사용을 못하는 것도 있습니다. 하지만 윈도우에서도 사용할 수 있고 더군다나 무료로 사용할 수 있는 에디터중에서 유명한 notepad++ 가 있습니다. notepad++ 정말 유용한 기능이 많이 있습니다. 단점을 꼽으라고 하면 한글 설명서가 없다는것, 한글 입력이 100%매끄럽지만은 안다는 점이 단점이라면 단점입니다. 저도 가장 많이 사용하는 에디터인데요. editplus 보다더 많이 notepad++를 사용합니다. 제가 notepad++ 테마를 찾다가 아주 유용한 정보가 있어서 알려드립..

퍼블리셔/도구2012. 7. 9. 06:00

css 및 javascript 는 압축을 해서 사용을 하곤 합니다. 이유는 한가지겠죠. 가볍기 때문입니다. 검색을 해보시면 아시겠지만 온라인 압축도구는 많이 있습니다. 제가 검색을 해서 css 압축과 js 압축을 쭉~~ 비교해 보았습니다. 제가 제작한 스킨중에서 GoodFriends 라는 스킨이 있는데 워낙 기능이 많다보니 css 파일도 많고, js 파일도 많습니다. 이걸 온라인 압축기를 모두 테스트해서 비교해보았습니다. 대략 10여곳의 압축기를 이용해보았습니다. 합격점을 받은것은 딱 한군데 입니다. 바로 Online YUI 입니다. => http://www.refresh-sf.com/yui/ 이유는 간단합니다. 압축후에 한글이 깨지지 않아야되고 올바르게 표현이 되어야 합니다. 또 압축해서도 올바르게 작..

퍼블리셔/Bootstrap2012. 7. 8. 06:00

얼마전 부트스트랩을 소개한적이 있었습니다. 보자마자 티스토리 스킨에 적용을 해보았지요.... Bootstrap - 홈페이지 개발 및 디자인을 위한 혁명적인 도구 => http://demun.tistory.com/2133 부트스트랩(Bootstrap)에 관한 유용한 도구 => http://demun.tistory.com/2136 부트스트랩으로 만들어본 티스토리 스킨 참고 이미지. 그냥 흰색 배경에 사이드바는 아코디언 메뉴로 만들어 봤습니다. 상단 네비게이션은 부트스트랩에서 지원하는 드롭다운으로 만들었구요. 또 하단에는 탭메뉴를 적용해봤습니다. 부트스트랩도 완전하지는 않았습니다. 아니 티스토리에 적용하는데 잇어 단점도 보이더군요. 특히 자바스크립트 부분이 티스토리는 치환자를 사용하기 때문에 아코디언 부분이 ..

퍼블리셔/jQuery2012. 7. 6. 06:00

이글은 웹 디자이너를 위한 jquery 에서 추출한 글입니다. 그중에서도 실무에서 써먹을수 있는 것중에서 드롭다운 메뉴를 골라봤습니다. 여기서 말한 드롭다운 메뉴는 이미지가 두개 필요합니다. 하나는 평상시의 이미지고 또하나는 마우스가 오버시 나타나는 이미지입니다. 이미지 경로는 제가 블로그에 업로드한후 수정했습니다. 모르고 그냥 저장을 눌러 다 쓰지도 않은 글이 아마도 발행이 됐을겁니다.ㅎㅎㅎ 다시 수정해서 쓰는 중입니다. 모든 부분은 제외하고 jquery 부분만 설명하겠습니다. 모든 소스 코드는 아래의 파일을 다운로드해서 보시기 바랍니다. 아래처럼 보여집니다. jquery 부분만 설명하겠습니다. 무지하게 간단합니다. 단순이 ul의 자식중에서 animated 되지 않은것은 열고(slideDown), 되는..

퍼블리셔/jQuery2012. 7. 5. 06:00

이글은 웹디자이너를 위한 jquery 에서 추출한 것입니다. 이전에도 아코디언 메뉴에 대한 글을 썻는데요. 자주 써먹은 것중에 하나가 탭메뉴가 아닌가 싶네요. 현재 시점에 제 블로그에도 탭메뉴가 적용이 되어 있는데요. jquery cookbook 에서 나온 코드를 수정해서 적용한것입니다. 탭메뉴에 대한 글은 현재 두개가 있습니다. 하나는 자바스크립트로 구성된 것이구요. 또하나는 jquery cookbook 에서 만든 코드입니다. 자바스크립트 탭메뉴 => http://demun.tistory.com/1696 jquery cookbook 탭메뉴 => http://demun.tistory.com/2125 오늘은 위와는 조금은 다른 웹디자이너를 위한 jquery 에서 말한 탭메뉴입니다. 여기에는 이미지가 두개가..