demun(대문블로그)

퍼블리셔/SublimeText2013. 2. 7. 05:00

서브라임텍스트의 최대의 단점인것 같습니다. 일본, 중국, 한국 등 아시아권 언어인 euc-kr 등의 캐릭터셋의 언어가 서브라임텍스트에서는 깨집니다.이와 관련해서 플러그인이 나왔는데요. ConvertToUTF8 이라는 것입니다.문제는 이 사이트가 접속이 원할하지가 않습니다. 업데이의 가능성이 있는데 그 부분이 아직 진행되지 않는듯 보입니다. 아쉬운대로 이 플러그인을 사용하면 euc-kr 등의 아시아권 언어 파일을 깨지지 않고 사용할 수 있습니다.설치하는 방법.모든 플러그인은 Install Packages 를 통해서 설치한 뒤 ConvertToUTF8 을 설치하면 됩니다.만약 사이트의 접속이 원할하지 않을경우 설치가 되지 않을수 있습니다. 그럴때는 수동으로 설치하면 됩니다. 서브라임 테스트의 메뉴에서 Pre..

퍼블리셔/도구2013. 1. 14. 05:00

요즘은 html5에 대한 관심이 날로 높아지는 시기입니다.티스토리 블로그를 하고 잇지만 다른곳에서는 html5와 css3에 대한 템플릿이나 기술들이 넘쳐납니다. 저도 매번 html5로 코딩을 하는것을 잠시 뒤로 하고 남들이 만들어놓은것을 찾아보던중 좋은 곳이 있어 소개합니다. http://www.html5webtemplates.co.uk/templates.html 이 사이트의 템플릿을 모두 공짜입니다. 미리보기도 할 수 있으며 미리보기를 클릭하면 브라우져 지원 현황까지 나옵니다.대부분이 IE7이상은 모두 지원하는것으로 나옵니다. 또 한군데는 http://smashinghub.com/best-free-html5-and-css3-templates.htm 입니다. 좋은 템플릿중에서 html5, css3 를 지..

퍼블리셔/SublimeText2013. 1. 12. 05:00

서브라임텍스트에서 이번에는 프로젝트를 만들고 관리하는 방법을 알아봅니다.프로젝트를 사용하면 매번 같은 폴더에 접근하는 불편함을 해소할수 있고, 폴더가 많을경우 원하는 파일형식만 보이도록 하는등 다양한 편리함이 있습니다.어떻게 프로젝트를 만들고, 사용하고 관리하는지 알아보겠습니다. 모든 명령은 Ctrl+Shift+P 로 시작합니다.ㅎㅎㅎㅎ 1. 프로젝트 생성 - 폴더 추가하는 법. Ctrl+Shift+P 를 눌러 add 를 입력하면 아래처럼 Project: Add Folder 이 나옵니다. 선택합니다. 더 간단한 방법은 폴더채로 마우스로 드레그해서 서브라임텍스트에 떨궈주기만 하면 폴더를 통채로 인식합니다.결과는 동일합니다. 2. 프로젝트 저장.프로젝트를 저장을해야 관리도하고, 설정도 할 수 있습니다.원하는..

퍼블리셔/도구2013. 1. 11. 05:00

웹폰트 아이콘을 표시하는 Font Awesome 에 대해서 소개합니다.Font Awesome -> http://fortawesome.github.com/Font-Awesome/ Font Awesome 는 부트스트랩을 지원합니다.부트스트랩 스킨을 사용하는 분이면 이걸 추천합니다. 문제는 티스토리에서는 파이어폭스가 제대로 표시하지 못하는 단점이 있습니다. 이유는 도메인때문인것으로 알고 있습니다. 티스토리쪽에 질문을 남겼는데 언제 해답이 올런지는 아직 미지수..... 여하튼 웹폰트를 사용해서 아이콘을 표시한다는 겁니다.이전에도 이와 비슷한 글을 남긴적이 있습니다.@font-face kits를 이용하여 버튼 아이콘 만들기-고급팁 -> http://demun.tistory.com/2055 Font Awesome ..

퍼블리셔/도구2013. 1. 10. 05:00

그리드시스템이란 레이아웃을 격자형태로 짤라서 잡아주는 도구를 말합니다. 검색을 해보시면 아주 많은 그리드가 나옵니다. 그중에서 오늘 소개하는 것은 세만틱 그리드 시스템입니다. -> http://semantic.gs/ 이 semantic 은 제가 제작한 반응형 스킨 Responsive 에 사용된 그리드 시스템입니다. 반응형 스킨 Responsive -> http://demun.tistory.com/2271 홈페이지에 보시면 다운로드 링크와 함께 사용방법이 적혀있습니다. 예제. Fixed Layout , Fluid Layout , Maximum-width , Nested Columns , Responsive Semantic 의 장점 또는 특징. 1. less 를 지원합니다. 그리드 시스템중에서 less , ..

퍼블리셔/도구2013. 1. 9. 04:30

블로그를 하다가도 이쁜 버튼하나 만들려면 html, css 코드 넣어야하고, 경우에 따라서는 이미지도 만들어야 합니다.하지만 간단하게 원하는 디자인을 만들거나 선택한 다음 생성버튼만 클릭하면 코드가 나오는 사이트가 있습니다. 퀄리티 또한 괜찮습니다.버튼 생성기 -> http://livetools.uiparade.com/button-builder.html 보시면 아시겠지만 우측에 셋팅을 이것 저것 만져보세요. 왼쪽에 미리보기를 통해서 쉽게 조작이 가능합니다.아래는 노멀상태와 마우스가 올라갔을때의 호버상태, 그리고 클릭했을때의 상태등을 쉽게 보고 판단할 수 있습니다. 설정이 모두 완료되면 아래의 Generate HTML,CSS 등을 클릭해서 코드를 복사할 수 있습니다. 보시면 아시겠지만 각 브라우져의 벤터 ..

퍼블리셔/도구2013. 1. 8. 05:00

Sublime text 2에서도 html 을 압축할 수 있습니다.Sublime text 2에서 html 압축하기(HTML Compressor) -> http://demun.tistory.com/2244 하지만 단점이 있습니다. 주석을 모두 제거합니다.물론 주석까지 모두 제거하고 압축을 하는것이 맞습니다만 티스토리의 사이드바를 나타내는 정보는 주석을 통해서 나타냅니다.그래서 주석은 남겨두고 압축을 해야 됩니다. 하지만 서브라임 텍스트는 그런 기능이 있는지는 모르겠으나 찾을길이 없습니다.해서 찾은 사이트가 htmlcompressor -> http://htmlcompressor.com/compressor.html 입니다. 이곳은 온라인 압축 사이트 입니다.저의 경우 압축을 하되 주석을 없애지말고 같이 압축해주..

퍼블리셔/기술2013. 1. 5. 17:25

IE는 버젼별로 조건을 걸어서 스타일을 작성하곤 합니다. 그래서 HTML이 아주 조건부 주석으로 난잡해지고 또한 스타일시트도 버젼별로 만들어서 사용하곤 했습니다. 하지만 좀더 간단하고 효율적인 방법이 있어 소개합니다. 아래의 경우는 제가 이번에 제작한 스킨인 Responsive 라는 스킨에도 포함된 마크업구조 입니다. 반응형 티스토리 블로그 스킨 Responsive 를 소개합니다. -> http://demun.tistory.com/2264 티스토리의 경우 스킨 편집에서 업로드하면 images 라는 폴더구조가 생깁니다. ie6,7,8 등의 스타일시트를 만들고, IE를 조건부로 스타일시트를 링크시킬려면 에 아래처럼 사용합니다. 이것도 좋지만 단점은 각각의 스타일시트를 만들어서 사용해야 한다는 점입니다. 이걸..

퍼블리셔/에디터2012. 12. 31. 09:00

이클립스는 프로젝트 기반으로 소스를 작성하고 실행하는 방식입니다. 프로젝트 단위로 소스를 관리하고 개발하며 패키징하는 방식을 사용하고 있습니다.이클립스를 설치하고 사용하다보면 제일먼저 나오는것이 워크스페이스(workspace) 입니다. 이클립스는 프로젝트를 폴더로 묶고 저장할 워크스페이스라는 프로젝트 소스 저장 폴더를 설정해야 시작할 수 있습니다.따라서 이클립스에서 자바 프로젝트를 생성하고 개발 작업을 하려면 먼저 적합한 워크스페이스를 설정하고 있는지 확인해야 합니다. 워크스페이스 변경은 File - Switch Workspace - Other 에서 수정이 가능합니다. 프로젝트 생성 이클립스 기본 웹개발 환경이라 할 수 있는 Java EE 패키지에는 Static Web Project 와 Dynamic W..

퍼블리셔/에디터2012. 12. 29. 09:00

이클립스는 CSS 와 비슷한 설정을 가지고 있습니다. 그말이 뭐냐? 즉 상속성입니다.전역으로 한번 설정을 해놓으면 그 아래. 그 아래 모두 설정값을 그대로 상속을 합니다. 즉 이클립스에서 워크스페이스(workspace)에서 인코딩 설정을 해 놓으면 프로젝트를 생성하면 어떤 프로젝트든간에 인코딩 설정값을 상속한다는 이야기 입니다.이 방법이 아닌 각각의 프로젝트에 따로 설정을 하려면 해당 프로젝트를 선택하고 설정을 하면 됩니다. 여기서는 일일이 파일이나, 프로젝트마다 설정하기 피곤하니까 한번에 전역으로 인코딩을 설정하는 방법을 알아봅니다.이클립스를 처음 설치했다면 꼭 이 방법대로 인코딩을 먼저 설정하기를 권장합니다. Window - Preferences 를 클릭합니다. General - Workspace 에..