demun(대문블로그)

퍼블리셔/css2011. 11. 20. 11:11

이미지없이 에니메니트되는 네비게이션 메뉴가 있어 소개합니다. 원문보기 => http://www.red-team-design.com/css3-animated-dropdown-menu 제가 종종 방문하는 사이트 인데요. css3 로 움직이는 네비게이션 메뉴를 만드는 방법입니다. 원문에 코드가 나와 있기는 합니다만 제가 테스트로 몇가지 수정해보고 다른 브라우져에서는 어떻게 보이는지도 한번 테스트해보았습니다. 일단 html 코드는 아래와 같습니다. 홈 첫번째 folder1 Item 11 Item 12 Item 13 Item 14 folder2 Item 21 Item 22 Item 23 Item 24 folder3 Item 31 Item 32 Item 33 Item 34 folder4 Item 41 Item 42..

퍼블리셔/html2011. 11. 19. 11:00

현시점에서 브라우져별 html5 를 지원하는 현황이 다릅니다. 그래서 막상 사용하기에도 꺼림직한면이 없지 않아 있습니다. 하지만 신기술을 고이 고이 썩힐 필요는 없다고 생각합니다. 웹표준을 준수하는 브라우져들은 모두 지원하는데 유독 IE만 지원이 안되는 부분이 많습니다. 우리나라의 경우 IE 의 비중이 높기 때문에 더욱 html5를 사용하기에 않좋은 여건이지만 그렇다고 사용 못하란 법은 없습니다. 현재 시점에서 html5 를 지원하는 브라우져 현황을 볼수 있는곳을 링크합니다. http://www.findmebyip.com/litmus 위의 사이트는 html5 뿐만 아니라 css3 의 지원현황을 브라우져별, 선택자별로 볼수 있습니다. 나는 브라우져도 모르고, 각 브라우져의 버젼도 모른다하시면 아래의 사이트..

퍼블리셔/기술2011. 10. 26. 12:24

이번에는 API 를 이용하는 방법을 알아보겠습니다. 이전에 알려드린 방법은 다소 어려운 부분이 있고 모든 브라우져에서 지원을 하지 않아 따로 주석을 넣어야하는 불편함이 있었습니다. 하지만 API를 이용하면 간단하고 모든 브라우져에서 동일하게 보여질수 있다는 장점이 있습니다. 웹폰트를 사용하는 올바른 방법(나눔고딕폰트,티스토리에서 사용하는 방법) =>http://demun.tistory.com/1930 문제는 API 를 지원해줘야 한다는 것입니다. 자 이제 시작해보겠습니다. API 를 지원하는곳은 현재 제가 알기로는 두군데가 있습니다. 이또한 언제까지 지원할지는 모르지만 현재는 지원하고 있습니다. 1. http://fontface.kr/ 나눔고딕관련 글꼴만 지원하고 있습니다. 나눔고딕, 나눔고딕(굵게), ..

퍼블리셔/기술2011. 8. 5. 09:00

css 로 그라데이션을 만들려면 꽤나 복잡하지요. 간단하게 설정만하면 자동으로 만들어 주는 사이트를 소개합니다. 한가지 영어로 되어 있다는 단점이 있긴 하지만 곧잘 익숙해져야 합니다. 간단하게 타입, 너비, 높이 그리고 시작하는 컬러와 끝나는 컬러를 지정하면 됩니다. 모르면 이것 저것 눌러보세요. 손해 안봅니다. Gradient Image Maker 아래 이미지처럼 몇가지 설정을 한후 저장할 이미지 포맷을 지정하면 됩니다. 새창열기 Gradient Texture 아래 스샷에는 전부 안나왔지만 그라데이션 타입과, 사이즈, 컬러를 지정한후 Generate 를 클릭하면 됩니다. 새창열기 ogim.4u2ges.com 꽤나 복잡하게 보입니다. 많은 설정을 할수 있습니다. 화살표처럼 설정을 해도 되지만 아래 화살표..

퍼블리셔/기술2011. 8. 3. 11:24

티스토리 스킨 제작을 약 20여건을 한것으로 기억합니다. 어떤것은 배포를 하였고 어떤것은 배포를 하지 않았습니다. 얼마전부터 웹표준에 관심을 두었고 관련 서적과 글들을 섭렵하기 시작했습니다. 또한 웹표준과 관련한 레이아웃 제작비법 및 튜토리얼등도 섭렵하기 시작했습니다. 제가 배포하는 스킨은 이제는 배포하지 않습니다. 모두 삭제하였습니다. 여러 이유가 있겠지만 그중 가장 큰 영향을 받은것은 방탄웹이라는 책 때문입니다. 방탄웹을 번역하신분이 박수만이라는 분인데요.더블트랙의 대표이사입니다. 현재는 사이트에 접속이 되지 않는군요. 여하튼 이분이 웹표준에 관련한 책을 3권을 번역한것을 봤습니다. 그중에 방탄웹이 최고였고 또 다른 하나는 css 마스터 전략이라는 책입니다. 또한권은 실용예제로 배우는 웹표준이라는 책..

퍼블리셔/기술2011. 8. 2. 19:38

이전에는 포터블 프로그램을 만들고 테스트를 해보기 위해 Virtual Machines 을 돌리곤 했습니다. 그러나 이제는 스킨을 제작하면서 스킨이 제대로 보여지나 테스트를 하기 위해 브라우져를 포터블로 만들거나 포터블 브라우져를 이용하곤 합니다. 허나 이건 프로그램을 이용하는것이고 간단하게 사이트에서 이용하는 방법도 존재합니다. 개발자, 스킨 제작자 또는 스킨을 수정하고 잘 되었나 확인해보는 블로거면 한두개 정도는 알아두면 좋은 정보입니다. 어느 브라우져에나 똑같이 보여지는 크로스 브라우져 환경에 맞쳐 스킨을 제작하는 것은 그리 녹녹치 않습니다. 그건 가장많은 버그를 가지고 있는 익스플로러 때문이고 가장많이 사용하는 브라우져인 익스플로러 때문입니다. 여하튼 이유는 잠시 접고 한두번씩 호환성 검사를 해봐야..

퍼블리셔/css2011. 7. 18. 06:00

왼쪽 정렬, 오른쪽 정렬을 하는 방법으로 float 를 사용하곤 합니다. 아마도 가장 많이 사용하는 선택자가 아닌가 싶네요. 그런데 주의 할점이 있습니다. float:left 는 왼쪽으로 띄우고, float:right 는 오른쪽으로 띄웁니다. 문제는 이렇게 float 로 띄울경우 다음에 오는박스가 동일한 크기가 오면 상관없지만 만약 크기가 작을경우 , 그위로 올라타는 경우가 생깁니다. 즉 3번 박스가 원래는 4번자리에 위치해야 하지만 2번 다음에 위치하게 됩니다. 차례대로 정렬이 되지 않는다는 거죠. 2번 박스가 작아도 동일하게 옆으로만 정렬이 돼야 하는데 동일한 크기거나 크기가 클경우는 정상적이지만 만약 크기가 작다면 위처럼 올라타는 문제가 생깁니다. 또하나 float 로 지정을 할경우 그 위부모가 배..

퍼블리셔/기술2011. 7. 2. 13:13

웹폰트를 사용하려면 @font-face 라는것을 사용하는데 관심이 있는분이면 다 아실겁니다. 아래의 글은 나눔고딕과 티스토리를 예를들어 작성했습니다. @font-face 는 css2에 지정이 되어있지만 지원여부때문에 많이들 사용안한것 같습니다. 참고로 @font-face 는 스타일시트에서 지정하면 ie 는 무시합니다. 사용법은 아래에 자세히 설명하겠습니다. 그런데 웹폰트로 검색을 하면 css 에서 지정하는것만 나오고 관리(?) 하는 것은 안나옵니다. 관리라고 하니 좀 그런데요. 처리하는 부분이라고 하겠습니다. 웹폰트를 사용하려면 브라우져에 대해서 좀 짚고 넘어가야 합니다. IE 는 .eot 파일을 지원하고 , 나머지 브라우져들은 .ttf 파일을 지원합니다. 고로 이것에 맞쳐 크로스브라우징 환경에 알맞게 ..

퍼블리셔/도구2011. 2. 28. 06:00

색상선택기는 한글이 지원됩니다. 설치형으로 배포가 되지만 포터블로 만들어봤습니다. 이 ColorSelector 5.1 은 http://www.fujitsu.com 에서 배포하는 프리웨어 입니다. 사용가능한 OS 버젼은 아래와 같습니다. Windows Environment Microsoft® Windows® 2000 Professional (Service Pack 4) Microsoft® Windows® XP Home Edition (Service Pack 2) Microsoft® Windows® XP Professional (Service Pack 2) Microsoft® Windows Vista® Home Basic Microsoft® Windows Vista® Home Premium Microsoft..

퍼블리셔/jQuery2011. 2. 27. 06:00

스클롤을 따라다니는 플로팅 메뉴는 검색을 해보시면 많이 있는것을 알수 있을겁니다. 각자의 환경에 맞쳐서 사용하시면 됩니다. 제가 소개하는 floating menu 는 jquery 를 사용하는 메뉴입니다. 참고로 jquery 를 사용하면 정말 많은 효과를 줄수 있습니다. 그리고 소개하는 플로팅 메뉴는 크로스 브라우징 환경에 있어 모든 브라우져에서 정상작동합니다. 예제 페이지를 참고하세요. 스크롤을 내렸다 올렸다 해보세요. https://d2o0t5hpnwv4c1.cloudfront.net/018_Floating_Menu/demo/dhtml_float_menu_final_nettut.html 제 블로그에 적용되어 있는것입니다. 현재 우측에 따라다니는 메뉴가 보이지요? 이제 적용하는 법을 알려드리겠습니다. 플..