부트스트랩 Bootstrap 3 CSS 개요 4 Buttons,Images,Helper classes,Responsive utilities

부트스트랩에서는 버튼 스타일을 몇가지 지원합니다. 단순이 클래스만 부여하면 됩니다.

사용자지정에서 색상을 설정하면 다른 색상으로도 이용할 수 있습니다.

내용이 깁니다. 해당 링크를 클릭하면 바로 이동합니다.





Buttons


이전보다 더 종류가 많아졌군요. 총 7가지 스타일의 버튼을 사용할 수 있습니다.

버튼은 .btn 클래스를 공통으로 가지고 있습니다. .btn클래스는 버튼의 기본 스타일을 정의합니다.

그 뒤에 따라오는 클래스는 버튼의 색상을 결정합니다.

클래스로는 .btn-default, .btn-premary, .btn-success, .btn-info, .btn-warnig, .btn-danger, .btn-link 등이 있습니다.




Sizes(크기)

버튼의 크기는 기본적으로 4가지가 있으며, 마찬가지로 클래스만 부여하면 기본 스타일이 입혀집니다.





버튼은 기본적으로 모두 inline-block 입니다. 이걸 블럭으로도 사용할 수 있으며, 블럭으로 잡을 경우 좀 더 큰 버튼을 사용할 수 있습니다.

클래스는 .btn-block 입니다.

아럐 예제에 보면 클래스가 많아서 잠깐 설명하고 넘어가야 할 것 같군요.

.btn : 버튼의 기본설정.

.btn-primary : 버튼의 모양 설정.

.btn-lg : 폰트사이즈와 여백 등 좀 더 큰크기로 설정, 크기 설정

.btn-block : 버튼을 블럭으로 설정.





Disabled state(비활성 버튼)

비활성 버튼은 클릭을 할 수 없는 버튼을 말합니다.

disabled 속성을 disabled 로 하면 그 버튼을 클릭할 수 없는 버튼으로 만듭니다. 아래 예제를 보면 모양을 설정하는 .btn-primary 를 사용함으로 모양을 다른 모양으로도 설정할 수 있습니다.



위에는 버튼을 말한것이고 앵커요소인 a 에도 버튼 스타일을 사용할 수 있습니다.

또한 input 에도 버튼 형식을 사용할 수 있습니다.


앵커요소에 사용한 예




input 에 사용한 예.




참고로 버튼(button) 태그는 브라우져간 호환성을 보장한다고 합니다. 하지만 input 의 경우는 파이어폭스에서는 약간 다를수 있다고 합니다.


Images


부트스트랩은 이미지 태그도 지원한다고 나오네요.

다만 둥근테두리의 경우는 IE8 버젼이하에서는 지원하지 않는다고 나오네요.

부트스트랩에서는 둥근형태의 모양에 클래스를 만들어놨습니다.

아래 이미지를 참고하시면 됩니다.




위에서 말했듯 익스플로러는 지원하지 않습니다.

이미지를 반응형으로 사용하는 방법은 이전의 포스팅에서 알려드렸죠. 간단이 말하자면 이미지태그에 img-responsive 클래스만 추가해주면 됩니다.



Helper classes


부트스트랩에서는 홈페이지 제작에 도움이 되는 클래스를 미리 만들어놨습니다. 종류가 몇가지되다보니 하나 하나 설명합니다.


Close icon(닫기 아이콘)

아시다시피 부트스트랩은 아이콘을 웹폰트로 표시합니다 이미지가 아닙니다. 그래서 크기를 설정하려면 font-size 로 설정해야 합니다.

여기서는 닫기 아이콘을 말합니다 X 표시로 보이는것인데요. opacity 도 조절하고 해서 기본적으로 사용할 수 있도록 설정이 다 되어 있습니다.


단순이 버튼에 close 라는 클래스만 지정해주면 됩니다.




.pull-left

pull-left 라는 클래스는 왼쪽으로 플로트시키는 것을 말합니다.

클래스를 pull-left 라고 하면 CSS 에서 아래처럼 왼쪽으로 플로트 시키는 설정이 되어 있습니다. 



마찬가지로 오른쪽으로 플로트시킬려면 pull-right 라고 클래스만 주면 됩니다.

문제는 플로트는 해제를 잘 해줘야 합니다. 

왜냐면 다음에오는 엘리먼트에 영향을 주기 때문이죠.


이 플로트를 해제시켜주는 클래스도 부트스트랩에서는 지원합니다.

플로트를 해제하는 방법은 여러가지가 있는데요. 부트스트랩에서는 니콜라스 갤러거(Nicolas Gallagher) 가 사용하는 일명 micro clearfix 를 사용합니다.


사용방법은 div 와 같은 엘리먼트에 clearfix 라는 클래스만 부여하면 됩니다.

대략 이런 모습이죠. <div class="clearfix">....</div>


그러면 어떻게 설정이 되느냐하면 아래처럼 됩니다.

왼쪽에는 less 파일입니다. 왼쪽처럼해서 빌드를 하면 우측의 css 처럼 보인다는 말입니다.





맨 아래 .element {...} 라고 나오는것은 사용방법에 관한 겁니다. 어떤 엘리먼트 예를들어 <div class="element">...</div> 라고 했을때 element 라는 클래스에 플로트를 해제하려면 less 파일에서 위처럼 해당 클래스(.element)에 클리어픽스를 시켜주면 됩니다.


.sr-only

우리들은 일명 스킵 네비게이션이라 칭합니다. body 다음에 장애우등과 같이 마우스 사용이 여의치 않은 사람을 위해 네비게이션 영역을 뛰어넘어 본문으로 바로가기 메뉴를 만듭니다. 그 메뉴는 스크린리더는 읽고, 화면에서는 안보이는 설정을 하곤 합니다.

부트스트랩에서는 그런 설정을 미리 해두고, 단순이 클래스만 지정하면 된다고 합니다.

그 클래스가 .sr-only 입니다. 대략 sr 이 스크린리더를 뜻하는것이 아닌가 싶은데요.....


여하는 앵커에 sr-only 클래스를 지정하고 해당 목표지점(href)는 본문의 아이디를 가리키면 됩니다. 



Responsive utilities


부트스트랩 3은 모바일 우선 정책에 개발을 하는데요. 미디어쿼리를 통해 콘텐츠를 숨기는 여러 클래스를 지원합니다.

또 인쇄할 때도 사용할 수 있는 클래스도 지원합니다.

단 인라인 테이블요소는 지원되지 않는다고 하는데요. 이건 좀 살펴봐야 할 부분인것 같습니다.


Available classes(사용가능한 클래스)

어떤 너비에 또는 어떤 기기에 어떤 클래스를 사용하느냐에 따라 보여지고, 감쳐지고 합니다.

아래 이미지는 각 기기(너비에 따른) 클래스를 부여하면 보여지고 감쳐지는 부분을 알려드립니다.

왼쪽에는 사용할 수 있는 클래스를 보여주고, 맨 첫번째행은 각 기기의 너비를 말합니다.





또한 CSS 설정시 프린터에 대한 설정도 하는데요. 부트스트랩에서는 이렇듯 미리 클래스를 지정해 놧습니다.





또 한 기기(하나의 너비사이즈)에서만 보이고 감추는것이 아니라 두개의 기기(너비)에 보이고 안보이고도 가능합니다.

그러면 클래스를 두개씩 지정해줘야겠지요.





예를들어 맨 아래 왼쪽의 클래스를 보고 설명합니다.

Visible 인데 x-small 사이즈와 large 사이즈에는 보여라해서 아래 클래스가 <span class="visible-xs visible-lg">...이렇게 나오는겁니다.

만약 타블렛 크기이면 지금 활성화되어있는 클래스는 히든처리되고, 그 위에 있는 <span class="hidden-xs hidden-lg"> 가 보일겁니다. 지금은 그것이 비활성이지만 타블렛 크기로 되면 그것이 활성화됩니다. 








여기서는 visible 클래스만 가지고 이야기했지만 hidden 도 마찬가지입니다.

visible 과 반대로 생각하면 됩니다. 


개    개