demun(대문블로그)

퍼블리셔/Bootstrap2013. 10. 11. 01:00

Progress bars(진행바)는 작업의 흐름이나 액셕의 진행을 나타낼때 사용합니다.CSS3 의 트렌지션과 에니메이션을 사용하기 때문에 IE9 이하나 구버젼의 파이어폭스에서는 지원되지 않습니다.또 오페라 12도 애니메이션을 지원하지 않는다고 하네요. 기본예제는 아래와 같습니다..progress 클래스로 진행바의 영역을 감싸고 진행바의 상태를 표시하기 위해 .pregress-bar 클래스를 사용합니다. 일관된 스타일을 유지하기 위해 sucess, info, warning, danger 을 사용해서 색상별 진행바도 지원합니다. 또한 그라디언트를 이용해서 좀더 효과를 줄수도 있습니다. 하지만 IE8 에서는 작동하지 않습니다.간단하게 위에서 말한 .pregress 클래스에 .pregress-striped 클래..

퍼블리셔/Bootstrap2013. 10. 10. 01:00

부트스트랩의 미디어객체는 다양한 유형 즉 블로그의 댓글이나 트위등에 사용하기 좋은 스타일입니다. 이미지를 왼쪽이나 오른쪽에 붙일 수도 있습니다. .media 클래스를 사용하며 다음에 오는 요소로 왼쪽에 배치하고 싶으면 .pull-left 오른쪽으로는 .pull-right 클래스를 사용합니다. 기본 형태는 미디어 객체 즉 이미지, 동영상, 소리 등을 왼쪽이나 오른쪽에 배치합니다.아래 예제는 64*64 의 이미지를 배치한 형태입니다. 리스트 형태.댓글이나 기사목록등에 사용하면 좋은 형태입니다.리스트 태그인 ol 또는 ul 에 .media-list 클래스로 감싸는 형태입니다. List group 부트스트랩에서는 다양한 형태의 목록을 지원합니다.기본 형태는 ul 등에 .list-group 클래스를 사용하며 테두..

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

Sidebar Enhancements 는 Sublime Text(서브라임텍스트)의 사이드바 기능을 좀 더 향상시킨 기능을 제공합니다. 간단한 사용법에 대한 글은 제가 이전 포스트를 참고하시기 바랍니다. 사이드바 확장 => http://demun.tistory.com/2225 사이드바 확장은 기존 서브라임 텍스트 2에서 사용하던것에서 3버젼이 발표되고 플러그인도 업데이트 되었습니다. 이전 SidebarEnhancements => https://github.com/titoBouzout/SideBarEnhancements 업데이트 된 SidebarEnhancements => https://github.com/titoBouzout/SideBarEnhancements/tree/st3 업데이트 된 사이드바 향상(S..

퍼블리셔/Bootstrap2013. 10. 8. 01:00

부트스트랩 Bootstrap 3 에서는 이미지, 비디오, 텍스트 등을 쉽게 그리드하려면 썸네일 컨포넌트와 부트스트랩의 그리드시스템을 이용하라고 합니다.부트스트랩에서 썸네일은 최소한의 필수 마크업으로 인한 링크 이미지를 보여주기위해 고안되었다고 합니다.아래는 기본 예제입니다. 링크 안에 이미지가 존재하는 형식입니다. 콘텐츠에 맞게 제작도 가능합니다.약간의 추가 마크업으로 이미지와 텍스트, 그리고 버튼 등이 같은 너비에 보여지도록 가능합니다. 아래 코드를 보시면 아시겠지만 이미지 아래에 caption 이라는 클래스를 사용해서 컨텐츠를 삽입하면 됩니다. Alerts (경고창) alerts 는 일반적으로 경고창(알림)을 말합니다. 무언가 정보를 알릴때 팝업창으로 떠서 정보를 알릴때 사용하는데요. 이와 비슷한 기..

퍼블리셔/SublimeText2013. 10. 7. 01:00

Sublimerge 사용법은 무척 간단합니다. 단축키 한두개 정도만 알면 사용하는데 어려움이 없을정도로 무척 간단합니다. 파일을 보는 방법과 코드를 비교해서 보는 방법에 대한 단축키가 있습니다. 아래 단축키를 누르기전에 먼저 비교해볼 수 있는 파일 두개를 여세요.제가 예제로 아래처럼 1.css 와 2.css 두개를 만들어놨습니다. 메뉴에서 View - Layout 에서 Columns 2 를 클릭해서 두개다 볼 수 있도록 했습니다. 그럼 어떻게 사용하는지 볼까요. 파일 보기 파일보기는 Ctrl + Alt + D 를 클릭하면 됩니다.위와 같이 두개의 파일을 연 상태에서 Ctrl + Alt + D 를 클릭합니다.그럼 아래처럼 Compare to View 가 나옵니다. 엔터. 그럼 열러있는 파일중에서 동기화, ..

퍼블리셔/SublimeText2013. 10. 5. 12:29

Sublimerge 는 Sublime text 서브라임텍스트에서 비교 및 병합을 할 수 있는 플러그인입니다.아래 이미지를 보시면 아시겠지만 왼쪽과 오른쪽을 비교해서 뺄건 빼고, 넣을건 넣고 할 수 있는 플러그인입니다. 지원 운영체제 : OS X, Windows, Linux지원 버전관리 도구 : Git, Subversion, Mercurial(곧 지원한다고 합니다.) Why do you need it? (필요성) Sublime text 서브라임 텍스트 전체 통합 - 외부도구의 도움없이 서브라임텍스트에서 통합을 할 수 있습니다.간단하고 생산성이 좋음. - 단축키나 키보드의 몇가지 키만 배워서 누르기만 하면 간단하게 통합을 할 수 있습니다.비교해서 차이점을 보여줍니다. - 변경된 부분을 블럭을 잡아서 어떻게 ..

퍼블리셔/SublimeText2013. 10. 4. 23:00

Auto Complete 자동완성이란 한개의 문자 또는 몇개의 문자를 입력했을때 팝업으로 입력한 문자의 완성된 글자 또는 단어, 코드를 나타내는 것을 말합니다.이것은 기본으로 활성화되어 있습니다. Disabling Auto Complete (자동완성 비활성) 자동완성을 사용하고 싶지 않을때 따로 설정을 통해서 비활성화 시킬수 있습니다.Sublime Text(서브라임 텍스트)에서 메뉴에서 Prefernces - Settings - Default 를 클릭합니다. 그러면 아래와 같은 화면이 나옵니다. Ctrl + F 를 눌러서 auto_complete 로 검색을 하면 아래처럼 기본값이 true 로 나온것을 알 수 있습니다. "auto_complete": false 로 변경하기만 하면 자동완성기능은 끌수가 있습..

퍼블리셔/Bootstrap2013. 10. 3. 01:00

Jumbotron 과 Page header 에 대해서 이야기 합니다.부트스트랩에서 말하는 Jumbotron 은 사이트에서 주요 내용을 소개하기 위한 박스 형태의 스타일을 말합니다.메인페이지에 보면 컨텐츠 상단에 가장 중요한 글이나 주요내용을 표시하는 공간이 있는데요. 바로 그런 부분을 말합니다. Page header 은 해당 페이지의 제목부분에 해당하는 부분을 말합니다. Jumbotron 위에서도 말했듯 페이지의 주요내용이나 중요 콘텐츠를 줄여 표기하기 위한 공간을 말합니다.그런 공간을 사용하라고 부트스트랩에서는 따로 클래스를 만들어놨습니다..jumbotron 클래스를 사용하면 되는데요. 여기안에 .container 를 사용하면 적절한 여백을 유지하며 둥근 모서리를 제공합니다. Page header 페이..

퍼블리셔/Bootstrap2013. 10. 2. 01:00

라벨과 벳지.여기서 라벨 label 은 input 에 사용되는 그 라벨이 아닙니다.텍스트상에서 어는 한 부분을 강조하거나 다르게 보이게 위한 스타일을 입힌 부분입니다.벳지도 마찬가지 입니다. Labels 먼저 기본 스타일입니다. 참고할 점은 아래의 라벨 크기는 라벨에 크기를 설정한것이 아니라 텍스틀에 크기를 설정한 것입니다. 즉 첫번째것은 ....... 입니다. 라벨은 다른곳과 마찬기자로 클래스가 두개로 만들어집니다..label 클래스는 라벨의 기본 스타일을 지정하고 뒤에 이어지는 .label-* 는 그 상태,모양을 나타냅니다. Badges 뱃지는 읽었거나 읽지 않았거나 할때 자주 사용합니다. 아래처럼 받은 편지함의 42개의 메일이 왔다는 형식으로 사용합니다..badge 라는 클래스를 사용합니다. Sel..

퍼블리셔/Bootstrap2013. 10. 1. 01:00

빵조각인 Breadcrumbs 와 페이징인 Pagination 을 이야기 합니다.빵조각은 영어로 Breadcrumbs 라고 말하는데 뜻은 탐색 계층구조에서 현재 보여지는 페이지를 보여주는 것을 말합니다.(카테고리라고 말해도 뜻은 어느정도 맞다고 봅니다.)티스토리에서 현재 페이지처럼 Home > 블로그 글 이렇게 쓰면 이해가 되실려나...... 또는 Home > 카테고리1 > 카테고리1-1 이런식으로 현재보여지는 페이지가 어느 위치에 해당하는지를 보여주는것이 바로 Breadcrumbs(빵조각) 입니다. 페이징은 현재페이지를 기점으로 다음페이지가 있거나 이전페이지가 있을때 다음이나 이전으로 넘어갈 수 있는 링크들의 모음입니다.즉 페이지넘김이죠. Breadcrumbs 기본 스타일은 아래와 같습니다. 아래 이미..