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 클래스를 사용하며 테두..

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

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

퍼블리셔/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 기본 스타일은 아래와 같습니다. 아래 이미..

퍼블리셔/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" 이 있어야합니다.이것이 바로 자바스크..