demun(대문블로그)

일상/도서2012. 10. 22. 09:00

HTML5와 CSS3로 작성하는 반응형 웹 디자인 이라는 책에 대해서 이야기 하려 합니다. 책 이름이 워낙 길다보니 이하에서는 (HTML5와 CSS3로 작성하는 반응형 웹 디자인 ) 반응이라고 말하겠습니다. 이전에 제가 같은 제목인 웹엑츄얼리북스팀에서 발간한 반응형 웹디자인 이라는 책에 대해서도 이야기 했습니다. 근데 반응에서도 똑같이 이야기가 시작됩니다. 뭐냐. target / context = result 입니다. 또 같은 이야기죠. 아주 중요한 이야기이기도 하고 곧 이것이 정석이 아닌가 싶습니다. 반응에서는 좀더 디테일하고, 많은 이야기를 합니다. 구버젼의 IE를 무서워하지 말고 반응형 웹디자인을 해야된다. 뷰포트에 대한 이야기, 이미어쿼리에 대한 이야기 유동형 레이아아웃에 대한 이야기. 반응형 레..

일상/도서2012. 10. 21. 09:00

이단마콧이 지은 반응형 웹디자인책에 대해서 이야기 하려 합니다. 저는 개인적으로 한달에 5권 ~ 15권의 책을 읽습니다. 그것도 순전이 웹디지인에 관련한 책만 봅니다. ㅎㅎㅎㅎ 요새 대세는 아무래도 html5, css3에 힘입어 반응형 웹디자인이라는 화두입니다. 좀 잘나간다 하는 사이트는 반응형 웹디자인으로 변형을 합니다. 그것도 그런것이 바로 제일 강력한 모바일때문입니다. 반응형 웹디자인 책은 재미있는 글로 꾸며졌습니다. 첫장을 넘기면서 출간에 앞서라는 곳을 읽다가 잠시 생각을 하게 됐습니다. 바로 웹액츄얼리 북스팀 때문인데요.... 이런 문구가 있습니다. 조직을 꾸려 웹사이트를 제작해왔습니다. 이책을 읽어보시면 어떻게 그리고 왜 이런 방법으로 웹사이트를 제작해야 하는지 분명한 이유를 알 수 있을 것입..

티스토리/스킨배포2012. 10. 20. 09:00

기존에 제작했던 BusinessBlogSkin_1 이 약간의 버그가 있었습니다. 미처 확인하지 못했던 사항도 있었구요. 기존의 사용법은 똑같습니다. 업데이트 된 내용만 알려드리겠습니다. 1. 검색부분 추가. 기존에 실수로 검색을 안넣었습니다. 사이드바에 이걸 추가했습니다. 2. RSS 피드 및 소셜 버튼 추가. 이것도 빠뜨린 부분인데 사이드바에 추가했습니다. 혹 더 추가될수 있기에 일단 3개만 넣었으며 이미지 스트라이프 기법으로 최적화 및 오버까지 활용했습니다. 3. 메인메뉴 수정. 만약을 구성했습니다. 즉 블로그 메뉴와 카테고리 메뉴를 사용하면 카테고리 메뉴는 우측에 존재해야 합니다. 그러기때문에 하위메뉴인 드롭다운이 왼쪽으로 나와야 레이아웃 안에 들어갑니다. 하지만 여러 상황이 생기겠죠. 블로그메뉴를..

티스토리/스킨배포2012. 10. 19. 18:09

이전에 3.1버젼에서 약간의 버그를 수정하고 디자인과 기능을 추가했습니다. 사용자들이 요구에 맞게 선택의 폭을 넓혔습니다. 이전보다 다양한 기능이 있으니 업데이트 내용을 꼭 확인하시고 사용하시기 바랍니다. 스킨 배포에 대해서는 여러번 이야기 했으니 공지사항의 스킨 배포에 대한 글을 읽어보시고 메일로 신청하시기 바랍니다. 업데이트가 단순한 업데이트가 아니네요. 3.1버젼이 이전에 비해 바뀐것이 없어서 이번에는 좀 많이 다듬었습니다. 그래서 재탄생한 Bootstrap_TS_ver.3.2 입니다. 이번에 초점을 맞춘것은 광고입니다. 부트스트랩은 반응형 레이아웃입니다. 브라우져의 너비에 따라 레이아웃이 맞게 변합니다. 특별한 마크업 요소를 넣지 않는한 bootstrap-responsive.css 에서 다 잡아주..

퍼블리셔/에디터2012. 10. 18. 09:00

에디터를 사용하는 이유는 여러가지가 있지만 코드에 대한 색상이 한가지 이유가 될 수 있습니다. 이는 여러가지 코드가 있는 곳에서 색상으로써 가시성이 보장되기 때문입니다. 태그에 대한 색상설정은 보기에도 좋지만 색상으로 분류가 되기때문에 오류를 방지할 수 있기도 합니다. 드림위버는 상단이 많은 기능이 있는 에디터입니다. 아마도 현존하는 에디터중에서 가장 많은 기능이 있지 않나 싶을 정도인데요. 사용법이 워낙 복잡하고 다양해서 익히는데만 상당한 시일이 걸리는 단점이 있는 에디터이기도 합니다. 드림위버는 한글판도 있기 때문에 초보자도 쉽게 다가가지만 모든 기능을 알고 사용하기는 좀 힘들지 않나 싶습니다. 저는 티스토리를 오래했고 앞으로도 하기 때문에 ... 그리고 코드를 많이 다루는 작업을 많이 하기 때문에 ..

퍼블리셔/에디터2012. 10. 17. 07:00

에디터플러스에서 문서템플릿을 선택하고 부가적으로 사용하기 편하게 설정하는 방법, 그리고 제가 올린 jQuery 템플릿파일을 선택해서 사용하는 방법을 알려드리겠습니다. 에디터플러스의 사용법은 아래의 글을 참고하세요. [Design/코딩] - 에디터플러스 사용법 구문강조파일 선택하는 방법 [Design/코딩] - 에디터플러스 사용법 구문강조파일 CSS3지원 [Design/코딩] - 에디터에 사용하기 좋은 글꼴 Monaco, Bitstream Vera Sans Mono, 나눔고딕코딩 [Design/코딩] - 에디터플러스를 이용해서 블로그에 코드 구문강조하기 먼저 문서템플릿을 추가하고 사용하는 방법부터 알려드리겠습니다. 제가 사용하기위해 만들어놓은 jQuery 템플릿파일을 다운로드 받으세요. 다운을 받았으면 도..

퍼블리셔/에디터2012. 10. 16. 09:00

에디터플러스에서 구문강조파일이나 템플릿 등을 추가할때가 있습니다. 정상적인 확장자를 가지고 있으면 쉽게 추가가 가능하지만 여러기능이 포함된 파일도 있고, 파일 종류도 달라서 추가하기가 쉽지 않은 경우가 있습니다.구문강조를 하는 방법은 이전에 작성한 에디터플러스 구문강조파일을 참고하세요. [Design/코딩] - 에디터플러스 사용법 구문강조파일 CSS3지원 그런데 이런 파일을 설정에서 어떻게 사용하느냐를 오늘을 살펴보겠습니다.위처럼 구문강조파일이면 확장자가 acp로 끝나야 합니다.파일찾기 버튼을 클릭해서 컴퓨터에 저장되어 있는 acp파일을 선택하면 됩니다.구문강조파일은 설정 & 구문강조에서 파일찾기 버튼을 클릭하면 acp파일을 선택하면 됩니다. 기본적으로 에디터플러스에 포함된 파일이 없으면 다운로드 받아서..

퍼블리셔/에디터2012. 10. 14. 09:00

저는 원래 Notepad++ 를 많이 사용합니다. 무료라서 어디에서나 다운로드 받아서 사용할 수 있는 장점이 있지요....헌데 이번에 노트북에서 말썽을 일으켜서 다시 에디터플러스로 돌아왔습니다.그러다보니 수동으로 만져야하는 편리한 기능들이 그동안 잠시 잊어져서 다시 만지작거렸습니다.에디터플러스에서 CSS 를 구문강조하는 기능이 있습니다.설정 - 파일 - 설정 & 구문강조에서 acp파일이 지정이 되어 있으면 됩니다. 현재는 CSS3가 나온 상태입니다. 그런것까지 전부 구문강조를 해주는 파일이 없는듯 합니다.기본적으로 CSS3를 어느정도 지원하는 파일을 가져다가 발견하는 족족 추가했습니다.아래에서 보면 구문강조가 되지 않는 속성이 있습니다. 그래서 해당 속성은 추가했습니다. 추가된 부분이 잘 보입니다. 이렇..

퍼블리셔/기술2012. 10. 13. 09:00

에디터등에 사용하기 좋은 글꼴입니다. 한글을 표기할때는 아무래도 나눔고코딩 글꼴을 사용합니다만 영어를 표현할때는 모나코 글꼴을 사용합니다. Bitstream Vera Sans Mono 도 좋다고는 하나 개인적으로 저는 모나코 글꼴이 가장 좋은것 같네요. 업로드 해보니 모나코가 가장 가볍군요. 아래 스샷은 윈도우에서 notepad++ 에서 모나코 글꼴을 사용할때 입니다. 개인적으로 포맷을 하거나 그럴때 꼭 나눔고딕과 모나코 글꼴을 설치하는 편입니다. 폰트 추가합니다. 모나코 글꼴이 한글표기가 이쁘지 않아 모나코와 맑은고딕을 합친 글꼴을 올립니다.원작자: http://code.oopman.com/100 개인적으로 자료정리차원에서 같은 파일을 올립니다.

Design2012. 10. 12. 09:00

배경 패턴 등을 다운로드 받을수 있는 사이트를 알려드리겠습니다.제가 쭉 들러보고, 사용해보니 아주 좋습니다.회원가입이나 제약없이 그냥 보고 맘에 들면 바로 다운로드 받을수 있습니다. http://subtlepatterns.com/ 마우스를 갖다대어보고 맘에 들면 왼쪽에 다운로드를 클릭해서 사용하시면 됩니다.아래보시면 태그가 있습니다.태그에서 원하는 스타일을 선택한다음 쭉 둘러보는것도 좋은 방법입니다.