demun(대문블로그)

퍼블리셔/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 는아이콘의 모양을 지정합니다. 예제로..

퍼블리셔/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 링크만 걸어줘도 사용할 수 있다는 말입니다.예제는 홈페이지에 나와 있듯 아래 이미지와 같습니..

퍼블리셔/Bootstrap2013. 8. 26. 12:52

부트스트랩이 버젼 3이 나왔지만 베타버젼으로써 RC1,2 를 거쳐 3.0버젼까지 올라갔습니다.모바일 우선주의로 인해 이전에 부트스트랩 2 버젼은 IE7 이상을 지원했지만 이제는 IE 9이상을 써야 됩니다.즉 IE 무시.....ㅎㅎㅎ. 대략 그렇다고치고, 릴리즈에 대한 내용은 github 사이트의 https://github.com/twbs/bootstrap/releases 를 참고하시면 됩니다. 부트스트랩 3.0 홈페이지 -> http://getbootstrap.com/아래 사진을 보시면 아시겠지만 상단에는 이전과 같이 부트스트랩 3.0 을 어떻게 사용해야되는지 문서가 작성되어 있습니다. 하단에는 버젼 3.0 이라는것을 표기하고, 이전 문서의 최신버젼인 2.3.2 버젼도 링크를 표시해 두었습니다.이전 부트..

퍼블리셔/Bootstrap2013. 8. 19. 08:15

부트스트랩이 3의 정식버젼을 앞두고 계속 업데이트를 하고 있습니다.공식블로그에 보면 현재 익스10에 대한 문제, 아리아에 대한 문제, html5의 사용도 향상 등 해결과 업데이트에 대한 내용이 있습니다. 또 그라디언트에 대한부분과, pull-right, pull-left 등의 클래스를 사용하는데 !important 에 대한 부분, 그라디언트 중에서 RGBA() 믹스인 색상에 대한 부분도 언급이 되었군요. 부트스트랩 버젼 3부터 사용하게된 클래중에서 .col-xs, col-sm, col-md, col-lg 클래스 등이 추가되었는데 다른 부분과 호환되도록 수정했나봅니다. 기타 버튼과 폼에 대한 부분등 많은 부분이 업데이트되고 있습니다. 요즘 워낙 시간이 없어 이 포스팅은 소식을 전하는 포스팅으로 해야 되겠네..