오늘은 지난 시간의 부트스트랩의 기본적인 사용환경 설정에 이어서
부트스랩을 활용하여 디자인 요소들을 적용해보도록 하겠습니다.
버튼에 디자인을 적용하기 위해서 먼저 버튼을 하나 생성해주겠습니다.
지난 시간에 작성했던 코드의 <body> </body>의 가운데에 아래 버튼 태그 코드를 삽입해주세요.
<button type="button">example button</button>
웹 브라우저를 사용해서 해당 html 파일을 열어보면, 기본 버튼이 생성된 것을 볼 수 있습니다.
(Chrome 기준으로 새 탭을 연 후 'Ctrl + O' 를 눌러 열 수 있습니다.)
이 버튼의 디자인을 부트스트랩을 이용해서 바꿔보겠습니다.
부트스트랩에서는 디자인 속성을 적용하기 위해서 class 속성을 사용합니다.
class 속성이란 html 태그 안에 적어서 사용하는데, 해당 태그가 어떤 반(class)에 포함된다 라고 생각하시면 됩니다.
위 캡쳐 화면의 코드와 같이 방금 적은 코드의 type 속성 뒤에 class="btn" 이라고 적어주시면 됩니다.
이렇게 적어주시면 해당 버튼 태그는 btn 이라는 클래스에 속해있다는 의미입니다.
적용해 준 후 웹페이지 새로고침을 하면 버튼 디자인이 변경된 모습을 볼 수 있습니다.
이 외에도 다양한 속성들을 사용해서 여러 디자인들을 적용할 수 있습니다.
부트스트랩에서는 위와 같은 버튼 디자인을 제공하고 있습니다. (http://bootstrapk.com/examples/theme/)
해당 버튼들의 사용법은 다음과 같습니다.
<button type="button" class="btn btn-xs btn-default">Default</button>
<button type="button" class="btn btn-xs btn-primary">Primary</button>
<button type="button" class="btn btn-sm btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-lg btn-warning">Warning</button>
<button type="button" class="btn btn-lg btn-danger">Danger</button>
<button type="button" class="btn btn-lgbtn-link">Link</button>위 코드를 보시면 class="btn btn-xs btn-default" 와 같이
class 안에 btn 외에도 다른 속성이 들어간 것을 볼 수 있습니다.
먼저 btn 은 부트스트랩 버튼 디자인을 적용하는 클래스이고
btn-xs btn-lg 등은 버튼의 크기를 적용하는 클래스입니다.
그리고 btn-default, btn-info 등은 버튼의 디자인 속성을 지정하는 클래스입니다.
위 코드를 적용한 웹 페이지 화면입니다. 각 버튼의 크기, 디자인 속성들이 적용된 모습입니다.
이처럼 부트스트랩의 버튼 class를 적용해줌으로써 원하는 버튼 디자인을 할 수 있습니다.
'Web' 카테고리의 다른 글
| [Font Awesome] 폰트어썸 웹폰트 아이콘 사용하기 (0) | 2020.02.19 |
|---|---|
| [Bootstrap] 부트스트랩 사용하기 (0) | 2020.02.19 |
| bitmani WAMP apachi 로컬서버 동작 확인하기 (0) | 2020.02.17 |
| bitnami WAMP 설치하기 (0) | 2020.02.03 |