[Bootstrap] 2. 부트스트랩 버튼 사용하기

안녕하세요. 개발 토끼 입니다. 

오늘은 부트스트랩 2번째 시간으로 버튼에 대해서 알아보도록 하겠습니다. 

흔히 HTML에서 버튼을 표현할 때는 아래와 같이 표현합니다. 

<button type="button">버튼</button>

이를 HTML 페이지에 넣어 봅시다.

- button 태그를 추가한 모습 - 

그리고 이를 브라우저로 표현 하면 아래와 같이 표현됩니다. 

브라우저로 테스트 하실 때는 ALT + F2를 입력하시면 브라우저 선택 메뉴가 나오는 데 이때 크롬이나 IE 어느것으로 띄우셔도 무방합니다. 

한번 테스트 해보세요.

이는 브라우저에 따라 달리 표시가 될 수 있는 데 한국에서 많이 쓰는 Internet Explorer로 표현해볼까요?

어떤가요? ㅎㅎㅎ 비슷한거 같으면서도 약간 차이가 있죠?

어쨋든 기본 모양새는 비슷합니다. 

근데, 보시다시피 사용자들은 이렇게 이쁘지 않은 버튼 모양을 선호하지 않습니다. 이쁜 버튼을 아주 좋아 하죠. 

그러나, 우리와 같은 초보나 개인 개발자는 디자인을 이쁘게 하기 힘듭니다. 디자인에 안목이 별로 없기 때문이죠. 그래서 간단하게 부트스트랩의 힘을 빌리면 나름 이쁜 버튼을 구현할 수 있습니다.

그럼 부트스트랩으로 적용해볼까요?

부트스트랩으로 버튼을 꾸미는 방법은 간단합니다. button 태그에 class 를 적용해주는 것이죠.

clsss="btn"을 추가 해줍니다. 

그리고 출력 결과를 볼까요?

위 이미지에서 왼쪽은 기본 HTML 버튼이고

오른쪽은 Bootstrap이 적용된 버튼입니다. 

단순 색상이 회색으로 적용된 버튼이죠. 

부트스트랩 버튼의 특징은 버튼 끝이 둥글둥글하다는 것입니다.

근데 여러분도 느끼시겠지만, 색상이 마음에 들지 않을 겁니다. 

색상은 원하시는 색상을 적용해도 되지만 우리는 부트스트랩을 공부하므로 부트스트랩에서 기본으로 제공하는 색상으로 버튼을 구현해봅시다. 

# btn-primary 버튼

btn-primary 버튼은 파란색으로 구성된 버튼을 뜻합니다. 

나중에 알게되겠지만, 부트스트랩에서는 primary, success, warning, info, danger 등으로 색상을 구분해놓았습니다. 

그러면 일단 btn-primary를 구현해봅시다. 

clsss 속성 부분에 btn btn-primary를 추가 해주세요.

그러면 위와 같이 버튼이 표현됩니다. 

어떤가요? 쫌 이뻐졌는가요? ㅎㅎㅎㅎ

# btn-success, btn-info, btn-warning, btn-danger 버튼 구현하기

앞서 success, info, warning, danger도 있다고 했죠?

그럼 이들도 같이 구현해 봅시다.

위 소스를 보시면 btn btn-xxxxxx 이런식으로 진행된다는 것을 아실 수 있을 겁니다. 

위와 같이 입력하시고

ALT + F2 를 눌러 크롬으로 실행해봅시다.

색상이 정말 이쁘죠? ㅎㅎㅎ

이들이 바로 부트스트랩에서 제공하는 기본 색상들입니다. 

사실 우리가 색상을 선택해도 되지만, 저는 개인적으로 디자인에 막눈이라 제가 선택한 색은 영 별로 더라구요. ㅎㅎㅎ

아 그리고 한가지를 빠뜨렸는데 

btn-default라는 것도 있습니다. 

위 코드를 추가하고 크롬으로 실행해볼까요?

3번째 default 버튼이 생성되었습니다. 

# 버튼 사이즈 조정하기

이번에는 부트스트랩에서 지원하는 버튼 사이즈 조정에 대해서 알아보겠습니다. 

부트스트랩에서는 btn-lg, btn-sm, btn-xs 를 통해서 버튼 크기를 조정할 수 있습니다. 

원한다면 개별적인 css를 적용해서 크기를 조절할 수 있습니다.

그럼 btn-lg부터 적용해볼까요?

위와 같이 코드를 넣고 브라우저에서 테스트를 해봅시다.

첫번째 줄에 있는 버튼들은 일반적인 부트스트랩 버튼 크기이고 두번째 줄은 btn-lg가 적용된 버튼들 입니다.

눈으로 봐도 확연히 크기가 커진것을 보실 수 있으실겁니다.

그럼 btn-sm과 btn-xs도 구현해보죠.

- btn-sm 적용 -

- btn-xs 적용 -

그럼 결과를 출력해볼까요?

기본, btn-lg, btn-sm, btn-xs 까지 한번에 모아서 비교해 봅시다.

첫번째 줄은 기본크기

두번째 줄은 btn-lg 크기

세번째 줄은 btn-sm 크기

네번째 줄은 btn-xs 크기 입니다.

이처럼 특별히 css 작업 없이 아주 이쁜 부트스트랩 버튼을 구현해보았습니다. 

다음 시간엔 버튼과 비슷한 방식으로 텍스트를 부트스트랩으로 꾸미는 방법에 대해서 공부하도록 하죠. 

오늘도 긴 글 읽어주셔서 감사합니다. ^.^