demun(대문블로그)

퍼블리셔/jQueryMobile2011. 11. 21. 20:40

요즘 html5 와 모바일로 많은 관심을 두고 있습니다. 그중 jquery mobile 에 대해서 배웠는데 복습차원에서 하나 하나 뜯어보았습니다. 그중 기본 템플렛에 대해서 이야기 할려고 합니다. 뭐 다 아는 이야기이지만 처음 입문하시는분을 위해서 몇자 적습니다. jquery mobile 를 인클루드하는것만으로 모바일 페이지는 끝이라고 해도 과언이 아닙니다. 웹사이트를 만들때는 float 가 어떻고, IE 의 버그를 잡고 하는데....모바일은 그게 없습니다. 심지어는 css 까지 직접 작성하지 않고 그냥 링크만 거는것으로 겜 끝~~~ 먼저 홈페이지를 알려드려야지요. jquery mobile 홈페이지 : http://jquerymobile.com/ 시작해볼까요... 시작은 html5 입니다. 그럼 대략 기..

퍼블리셔/html2011. 11. 21. 06:00

html5 에 관심이 있는 분이라면 아래와 같은 로고를 보신적이 있으실겁니다. 그런데 이것이 원래 이미지가 아닌 코드로 짜여졌다는 사실은 잘 몰랐을 수도 있을겁니다. 원래의 모양은 이렇습니다. 글꼴이 위와 다르죠?? 그리고 5라는 숫자도 다릅니다. 맨위가 수정한 코드를 이미지로 캡쳐한 것입니다. html5 로고의 개념은 이렇습니다. css 테두리모양, :before 와 :after 의 pseudo-elements , 그리고 css3 의 속성 불투명도와 변환, 또 구글의 API 를 이용한 글꼴, 또하나 div 안에 5라는 숫자를 넣은것입니다. 이걸 보기좋게 수정을 하였습니다. 원래의 코드 파일은 아래와 같습니다. 크롬이나 파이어폭스같은 브라우져로 열어보시면 됩니다. 특히 IE 6 같은 브라우져로 열어보시면..

퍼블리셔/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. 11. 15. 18:18

제가 요즘 모바일과 HTML5 를 공부중인데 제 블로그는 어떤지 세삼 확인하게 됐습니다. 시간이 좀 있으면 각 레이아웃에 맞는 스킨을 제작하려고 하는데....좀처럼 시간이 나지를 않군요. 티스토리에서 제공하는 모바일 스킨을 사용해 봤습니다. 설정화면에서는 제대로 안나오는군요. 요것도 좀 살펴보고 정리해야 하는데.... 요즘 포스팅이 너무 없어 몇글자 적고 갑니다.

컴퓨터/무설치/포터블2011. 11. 9. 06:00

현재 글쓰는 시점에서 최신버젼의 파일입니다. 포터블을 구하다보면 외국사이트를 많이 돌아다니게 됩니다. 그런데 이전부터 느낀점이지만 포터블 파일이 거의 영어버젼이 많습니다. 한글은 우리나라 사람이 많들지 않으면 찾기 힘듭니다. 또한 우리나라에서 만든 프로그램은 한글이 나오죠. 그래서 영어는 많이 돌아다니니 한글로만 제작을 했습니다. 이번 버젼의 특징은 아래와 같습니다. 용량을 줄이기 위해 드림위버가 아닌 다른것은 설치하지 않았습니다. 즉 설치할때 같이 설치되는 Flash Player, Adobe Air, Java.Runtime.Environment 를 설치하지 않고 모두 플러그인으로 활용했습니다. 위의 파일들이 설치가 되어 있어야 정상적으로 실행이 됩니다. 플러그인으로 활용하는 방법은 아래에서 다시 설명합..

블로그/블로그팁2011. 10. 26. 14:11

티스토리 블로그의 관리자 화면이 멋지게 변신을 했습니다. 이전보다 훨씬 좋다는 평입니다. 티스토리에 박수를 보냅니다. 짝짝짝~~~ 티스토리는 관리자 화면을 새롭게 단장하고 이를 알렸습니다. TISTORY가 이렇게 바뀌었습니다. => http://notice.tistory.com/1699 또한 이를 계기로 이벤트도 진행합니다. TISTORY 관리 개편 이벤트에 참여하셔서 푸짐한 상품 받으세요! => http://notice.tistory.com/1699 저도 이벤트에 참여하니 이글을 보신 시점이 늦지 않으시다면 여러분들도 참여해보세요. 변경된 점과 사용방법은 http://notice.tistory.com/1694 에 있으니 따로 기술하지 않아도 될듯 싶습니다. 그중 네트워크 기능이라는 멋진 기능을 선보였습..

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

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

블로그/블로그팁2011. 10. 25. 06:16

요즘 블로그나 어떤 제품등을 봤을때 이상한 코드갔은것이 있는데 이걸 QRCode 라고 합니다. QRCode 라고 검색을 하면 많이 나옵니다. 여기서는 간단이 나만의 QRCode 를 만들어 보겠습니다. 저는 이렇게 했습니다. 간단이 블로그의 링크를 걸 용도로 즉, 블로그 대문격으로 사용할 코드와 저의 모든 신상이력이 있는 코드, 그다음 인터넷에서 특히 sns 를 용도로 제작한 코드..... 이렇게 3가지를 만들었습니다. QRCode 를 만드는곳은 네이버에서 지원하는 http://qr.naver.com/ 를 선택했습니다. 만들고 N드라이브에 저장하시고 스마트폰으로 저장하는 방식을 사용해도 좋을듯 합니다. 어떻게 만들고, 어디에 사용할것인지 만들기 전에 한번쯤 생각해보시기 바랍니다. 이제 만들어 보겠습니다. ..

컴퓨터2011. 10. 22. 08:19

시간으로 쫓기고 돈으로 쫓기고... 여건이 마땅치가 않다가 좋은 소식을 하나 접해 알려드립니다. 웹개발 강좌를 무료로 들을수 있는 기회입니다. 여러분들 중 관심있는 분은 신청해보세요. 일단 저도 신청했습니다. 배우는것은 좋은 일이니까요... 각 지역마다 이런 일을 하는곳이 있어요. 홈페이지에서 보고 참고하시기 바랍니다. 아래는 스크랩입니다.