demun(대문블로그)

퍼블리셔/SublimeText2013. 9. 22. 21:37

서브라임 텍스트 3도 라이센스 구매창이 뜨긴 합니다만 무료로 이용할 수 있습니다.현재 베타버젼이라 구매권유창이 뜨는 것을 제외하고는 무료로 이용이 가능합니다.주소에서 2와 3의 차이입니다. 다운로드 -> http://www.sublimetext.com/3 버젼 2와 3은 사용법이 거의 흡사합니다.서브라임텍스트 버젼을 3을 설치를 한다음 제일먼저 Package Control 을 설치해야겠지요.얼마전까지만해도 모습이 이렇지 않았는데....역시 바뀌었군요. 버젼3은 3탭을 2는 2탭을 클릭해서 패키지컨트롤을 설치하면 됩니다. 설치하는 모습입니다. 사용팁을 버젼3을 사용하면서 하나 하나 채워나가도록 하겠습니다. 그럼 Package Control 설치 끝~~~~

티스토리스킨수정/사이드바2013. 9. 22. 01:00

티스토리 사이드바에 위치한 카테고리를 접고 펴는 방식에 대한 포스팅입니다. 예전에 발행한 글인데 실수로 비공개로 발행이 되어서 공개로 전환합니다. 1. html 을 수정합니다.2. css 를 수정합니다.3. jquery 를 추가합니다. 에드센스 스킨에 적용되었던 방법입니다.기존의 자바스크립트를 이용하는 방법은 아래의 링크를 참고하세요. 카테고리 펼쳐보이기 -> http://demun.tistory.com/919 원하는 곳만 펼치거나 접거나 할 수 있습니다.아이콘을 클릭하면 접거나 펼쳐지고, 카테고리 텍스트를 클릭하면 기존의 카테고리로 이동이 되는 방식입니다. 펼쳐진 카테고리는 리스트 아이콘 이미지가 보이고, 접혀진 곳은 플러스 아이콘이 보여집니다. 먼저 결과 화면을 보여드리겠습니다.에드센스 스킨에 적용된..

퍼블리셔/SublimeText2013. 9. 21. 01:00

Emmet LiveStyle - 크롬등에 설치되어 있는 개발자도구와 서브라임 텍스트와 실시간으로 스타일을 공유하는 플러그인입니다. 즉, 개발자도구에서 스타일을 수정하면 동시에 수정한 코드가 서브라임텍스트에 입력하지 않아도 자동으로 입력이 되는 플러그인입니다. Emmet LiveStyle 플러그인이 어떤건지 잠시 사용하는 방법을 동영상으로 담아봤습니다. 설치하는 방법과 사용하는 방법에 대해서 소개합니다. LiveStyle 플러그인 설치하는 방법 이 플러그인은 대표적으로 크롬에 최적화 되어 있는듯 합니다. 웹킷 엔진을 사용하는 브라우져에서 먼저 사용이 됩니다. 그렇기 때문에 사파리도 되긴 합니다. 여기서는 일단 크롬을 예로 들겠습니다. 서브라임텍스트에 플러그인을 설치하려면 먼저 Package Control ..

퍼블리셔/SublimeText2013. 9. 20. 17:57

제가 실무에서도 사용하는 방법인데요. 서브라임텍스트를 이용하면서 너무 유용한 플러그인 두개를 동시에 사용하면 얼마나 좋은지 알려드리는 동영상을 만들어봤습니다. LiveStyle 플러그인에 대한 포스팅은 2013.09.22 에 발행 됩니다LiveStyle 포스트 보기 => http://demun.tistory.com/2362LiveReload 포스트 보기 => http://demun.tistory.com/2345 두 플러그인은 완벽하지는 않습니다. 동영상을 녹화하면서 말을 듣지 않아서 브라우져와 서브라임을 몇번이고 재실행하곤 했습니다.아직 완전하지는 않지만 이런 이점과, 단점이 있구나....하는 생각으로 봐주시면 될것 같습니다.

퍼블리셔/Bootstrap2013. 9. 16. 09:12

부트스트랩에서는 버튼 스타일을 몇가지 지원합니다. 단순이 클래스만 부여하면 됩니다. 사용자지정에서 색상을 설정하면 다른 색상으로도 이용할 수 있습니다. 내용이 깁니다. 해당 링크를 클릭하면 바로 이동합니다. Buttons Buttons size Buttons disabled(비활성버튼) Images Helper classes Responsive utilties Available classes(사용가능한 클래스) Buttons 이전보다 더 종류가 많아졌군요. 총 7가지 스타일의 버튼을 사용할 수 있습니다. 버튼은 .btn 클래스를 공통으로 가지고 있습니다. .btn클래스는 버튼의 기본 스타일을 정의합니다. 그 뒤에 따라오는 클래스는 버튼의 색상을 결정합니다. 클래스로는 .btn-default, .btn-p..

퍼블리셔/Bootstrap2013. 9. 13. 08:41

이번 시간에는 폼입니다. 이전글은 -> http://demun.tistory.com/category/Development/Bootstrap 를 참고하세요 내용일 깁니다. 아래 목록을 클릭하면 해당글로 바로갑니다. Forms Inline form(인라인 폼) Horizontal form(수평형태의 폼) Supported controls(지원되는 컨트롤) Static control(정적인, 고정된 컨트롤) Form states(폼의 상태) Input focus Disabled inputs(비활성화된 인풋) Disabled fieldsets(비활성화된 필드셋) Validation states(유효성검증) Control sizing(컨트롤 높이 조정) Help text(도움말) Forms form 은 form-..

퍼블리셔/Bootstrap2013. 9. 11. 06:00

CSS 에 대한 부분이 많아서 이렇게 나누게 되었습니다. 오늘은 CSS 에서 Code 부분부터 시작합니다.부트스트랩 2와 3은 여기서도 약간 차이가 납니다.아래 이미지처럼 code 에 해당하는 부분은 로 감싸면 됩니다. 그러면 기본 스타일이 지정이 되는데요. 대표적으로 컬러값이 빨강색이 됩니다. 물론 커스터마이징하면 값을 바꿀수도 있지만 기본은 그렇다는 이야기 입니다.기본적으로 를 사용하면 글꼴크기를 90%로하고, 컬러는 빨강색, 배경은 흰색(#f9f2f4) 으로 되고, border-radius 도 4px 가 들어갑니다. code 와 비슷하게 사용하는것이 태그 입니다.또한 긴 코드를 위해서 버젼 2에서는 없던 pre-scrollable 클래스를 지원합니다.그럼 높이값이 340px 로 한정되고 오버플로우 ..

퍼블리셔/Bootstrap2013. 9. 2. 08:42

CSS 개요.bootstrap3 은 html5를 사용합니다. doctype 선언도 그래서 아주 간단합니다. ... 물론 사용하려면 좀더 보강해야하지만 이렇듯 간단하다는것을 말하네요. bootstrap3 은 모바일 우선주의입니다. 즉 제일 우선시 하는것이 바로 모바일입니다.적절한 렌더링을 위해서는 head 안에 뷰포트 메타태그를 넣어줘야 합니다. ... 물론 여기에서 좀더 깊게 들어가 확대하는 기능을 비활성화 시킬수도 있습니다. 네이버 같은 곳에 가면 두 손가락을 아무리 넓혀도 커지지 않는 화면이 있는데요. 그것은 inital-scale=1.0 으로 해놓았기 때문입니다. bootstrap3에서는 이미지를 반응형으로 사용할수 있도록 클래스를 제공하고 있습니다. 간단이 img-responsive 만 클래스를 ..

퍼블리셔/Bootstrap2013. 8. 28. 09:00

내용이 길어 전편에 이어갑니다. 브라우져 지원. 부트스트랩 버젼 2에서는 IE 7까지 지원을 했었습니다. 물론 버젼 3에서도 IE7도 충분이 잘 동작합니다.동작하는데는 문제가 없지만 부트스트랩 버젼3에서는 CSS3 를 많이 사용함으로 IE9 이하에서는 동일하게 보여지지 않을 수 있습니다. 또한 미디어쿼리를 지원하지 않기 때문에 respond.js 등을 링크 시켜야 합니다. 호환성을 위해 IE 최신모드를 사용하도록 head 안에 아래와 같은 코드를 추가해야 합니다. 이것은 IE 최신버젼을 사용하라는 내용입니다. Windows Phone 8 and Internet Explorer 10 윈도우8과 익스플로러 10에서 뷰포트 장치의 너비를 구분하지 못하는 일이 있어 미디어쿼리를 제대로 설정할 수가 없습니다.MS..

퍼블리셔/Bootstrap2013. 8. 27. 08:55

이전에 홈페이지나 다운로드 링크를 알려드렸습니다.오늘도 다운로드 링크와 함께 부트스트랩 3을 어떻게 시작해야 하는지 알아봅니다.홈페이지에서 Getting started 를 클릭하면 아래와 같은 화면이 나옵니다. 보시면 css, js, fonts 등만을 포함한 최소한의 파일을 다운로드 할 수 있는 링크를 제공하고 있습니다.다운로드 하시면 홈페이지에서 다운로드하는 것과는 폴더명이 다른 dist 가 붙은 파일로 다운로드를 제공합니다. 다운로드는 이전 포스트에서도 말했든 github 저장소에서 프로젝트 형식으로 다운로드 받을 수 있습니다. 이전부터 부트스트랩은 CDN 을 제공하고 있습니다. 다운로드를 받지 않아도 cdn 링크만 걸어줘도 사용할 수 있다는 말입니다.예제는 홈페이지에 나와 있듯 아래 이미지와 같습니..