demun(대문블로그)

퍼블리셔/Bootstrap2013. 9. 29. 01:00

bar 형태의 네비게이션 메뉴입니다.여기서는 그냥 네비라고 말합니다. 부트스트랩에서 네비는 해더 역활을 하기도 하며 반응형으로 작동이 됩니다.너비가 줄어들면 즉 폰 사이즈에 맞게되면 모든 네비의 메뉴가 감쳐지며 클릭을 하면 보여지는 형식으로 변경이 됩니다. 우측의 아이콘을 클릭하면 다시 하위메뉴가 펼쳐지는 형식이죠.클릭을 했을때 하위 메뉴가 보이는것은 자바스크립트 플러그인(collapse.js) 가 있어야 합니다. 또 접근성을 위해 role="navigation" 도 사용되고 있음을 알아야합니다. 그럼 어느 너비까지 줄어들면 이런 형태로 가느냐?그리드 시스템에 변수 @grid-float-breakpoint 라는것이 있습니다. 사용자정의(Customize)에 보시면 이것을 설정하는 곳이 있습니다. 기본 크..

퍼블리셔/Bootstrap2013. 9. 28. 01:00

Navs 는 리스트들의 모음입니다. 어찌보면 네비게이션 메뉴를 뜻하기도 하지만 부트스트랩에서는 Navbar 라고 또 있으니 Navbar 가 네비게이션 메뉴를 뜻하고, Navs 는 목록의 집합으로 보는것이 더 맞는듯 합니다.즉 Navs 는 그냥 네비게이션 메뉴(목록의 모음)이고 Navbar 는 bar 형태의 네비게이션 메뉴라고 보면 될 듯 합니다. 여기에는 여러가지 형태가 존재하며 기본적으로 .nav 클래스로 시작하며 이 클래스는 네비게이션 공통 클래스 입니다.뒤에 추가적으로 붙는 클래스에 의해서 네이게이션의 형태가 지정이 되며 없으면 기본 형태로 됩니다. Tabs(탭 형태의 네비게이션메뉴) 위에서 말했듯 nav 클래스는 공통입니다. 여기에 .nav-tabs 라는 클래스를 추가해주면 탭 형태의 네비게이션 ..

퍼블리셔/Bootstrap2013. 9. 27. 01:00

input 요소는 크로스브라우징이 좀 힘든요소입니다. 기본구조를 보면 input 에는 .form-control 이라는 클래스를 사용합니다. 이 클래스는 input 에 대한 기본 스타일을 지정하고 있습니다.앞에 @ 같은 표시를 붙이고 싶다다면 addon 이라는것을 써서 .input-group-addon 클래스를 사용합니다.물론 뒤에 붙일때도 사용합니다. html 순서상 다음에 위치하기만 하면 됩니다. input 은 모두 .input-group 클래스로 감싸는 형태입니다. Sizing(크기조정) input 에서 크기조정은 input-group 클래스에 input-group-* 클래스를 추가해주기만 하면 됩니다. 여기서 * 는 lg,sm 등등 크기를 나타내는 단어를 똑같이 쓰면 됩니다. Checkboxes a..

퍼블리셔/Bootstrap2013. 9. 26. 01:00

Button dropdowns 은 버튼에 드롭다운메뉴가 추가된 형태를 말합니다. 그래서 버튼을 클릭하면 하위메뉴가 나오는 형태입니다. 이또한 제대로 작동하려면 자바스크립트(dropdown.js)가 포함되어야 합니다. Single button dropdowns 기본적인 형태로 하나의 드롭다운이 있는 형태입니다.아래 이미지를 보시면 버튼의 버튼의 색깔 모양은 이전에 얘기했듯 .btn-primary, .btn-success, .btn-info..... 등의 클래스만 추가하면 아래처럼 모양이 바뀝니다.아래 이미지는 .btn-default 인 기본형태입니다. 자세히봐야할점은 버튼에 dropdown-toggle 라는 클래스가 있어야하고, data-toggle="dropdown" 이 있어야합니다.이것이 바로 자바스크..

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

Column Selection 열선택은 Sublime Text 2 서브라임텍스트에 사각형 영역을 선택하는 것을 말합니다. 즉 행이 아닌 열을 선택할 수 있는 기능에 대해서 말합니다.선택하는 열은 추가하거나 뺄수 있습니다.자세한 내용은 맨 아래 동영상을 참고하세요. 열선택하는 방법에는 마우스를 사용하는 방법과 키보드를 사용하는 방법 두가지가 있습니다. 마우스를 사용해서 열선택을 하는 방법 OS X마우스 왼쪽버튼 + Option 또는 마우스 가운데 버튼선택영역 추가 : Command선택영역 빼기 : Command + Shift Windows마우스 우측버튼 + Shift또는 마우스 가운데 버튼선택영역 추가 : Ctrl (원문에는 Ctrl 키만 나왔지만 실질적으로 Shift + Ctrl 키를 같이 눌러야 합니다..

퍼블리셔/Bootstrap2013. 9. 25. 01:00

버튼그룹은 한줄에 또는 하나의 묶음의 버튼들을 말합니다.라디오버튼과 체크박스 등의 추가적인 동작을 원할때는 자바스크립트 플러그인을 사용해야 합니다. 자바스크립트에 대해서는 차후 포스팅에서 자세히 다루겠습니다. 버튼그룹에서 툴팁과 팝오버(popovers)를 사용하려면 특별한 설정이 필요합니다..btn-group 안의 태그에 툴팁이나 팝오버를 사용할 때, 원치 않는 부작용(툴팁이나 팝오버가 동작할때 태그 요소가 넓어진다거나 둥근모서리 효과가 없어진다거나 하는 현상)을 피하기 위해서는 container: 'body' 옵션을 명시해야 한다고 합니다. 기본 예제 기본은 .btn 클래스를 .btn-group 가 감싸는 형태를 취하면 됩니다. Button toolbar .btn-group(버튼 그룹이라 칭함) 이 버..

퍼블리셔/Bootstrap2013. 9. 23. 01:00

부트스트랩 3 구성요소에서 아이콘을 표시하는 Glyphicons 와 Dropdowns 에 대해서 알아봅니다.먼저 아이콘부터 시작합니다. Glyphicons 부트스트랩3는 Glyphicons 에서 제공하는 폰트를 기반으로한 아이콘을 사용하는데요. 약 180개가 있다고 합니다. 물론 라이센스는 무료입니다. 누구나 부트스트랩을 사용하면서 이 아이콘을 사용할 수 있습니다. 이미지가 너무커서 모두 캡쳐를 하지 못했습니다. 참고만 하세요. 사용방법.부트스트랩에서는 성능상의 이유로 기본클래스와 개별클래스를 사용한다고 합니다.무슨 말이냐 아래처럼 두개의 클래스로 항상 사용합니다.즉 앞의 glyphicon 클래스는 아이콘의 기본 스타일을 설정합니다.뒤의 glyphicon-search 는아이콘의 모양을 지정합니다. 예제로..

퍼블리셔/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 설치 끝~~~~

퍼블리셔/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 두 플러그인은 완벽하지는 않습니다. 동영상을 녹화하면서 말을 듣지 않아서 브라우져와 서브라임을 몇번이고 재실행하곤 했습니다.아직 완전하지는 않지만 이런 이점과, 단점이 있구나....하는 생각으로 봐주시면 될것 같습니다.