반응형

웹 프로그래밍(Web Programming)/Bootstrap 3

[Bootstrap] 부트스트랩 버튼 색상 변경하기

일반적으로 부트스트랩에서 제공하는 색상은 Primary, Secondary, Success, Danger, Warning, Info, Light, Dark로 8가지입니다. 하지만 이는 한정적이고 본인이 표현하고자 하는 색상으로는 한계가 있습니다. 이번에는 원하는 부트스트랩 버튼의 색상을 임의로 변경하는 방법에 대해서 알아보도록 하겠습니다. 1. 색 이름을 이용한 버튼 색 변경 HTML 색 이름을 이용하는 방법은 기본적으로 HTML에서 제공하는 표준 색 이름과 윈도에서 분류된 X11 색 이름을 사용하는 방법입니다. 색 이름에는 red, green, blue, black, white 등과 같이 영문으로 표기로 사용합니다. class에 text-white 또는 text-black(dark) 등을 주어 버튼 텍..

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

일반적으로 HTML에서 제공하는 버튼 태그입니다. 버튼 이름 이를 직접 구현한 버튼의 모양은 다음과 같습니다. HTML에서 제공하는 버튼은 CSS를 통해 꾸며줘야 하는 어려움이 있는데, 부트스트랩 버튼은 부트스트랩에서 제공하는 태그를 알맞게 입력하면 적용이 됩니다. 따라서 간편하게 제작이 가능한 부트스트랩 버튼의 여러 가지 기능들을 소개해 드리도록 하겠습니다. 1. 부트스트랩 버튼 개요 부트 스트랩에서 다양한 색상들을 이용해서 구현할 수 있지만 기본적으로 제공하는 색은 다음과 같습니다. 따라서 코드를 통해 다음과 같이 위 색상들의 버튼을 구현할 수 있습니다. 부트스트랩 버튼 Primary Secondary Success Danger Warning Info Light Dark Link 위 HTML 코드의 ..

[Bootstrap] 부트스트랩이란 무엇일까? - 간단한 사용법

부트스트랩(Bootstrap) 부트스트랩은 트위터의 개발을 했었던 Mark Otto와 Jacob Thornton이 함께 개발한 것으로 2011년 8월 깃허브에 오픈 소스로 공개되면서 등장한 HTML, CSS, JS 프레임워크입니다. 즉, 웹 페이지를 쉽게 만들 수 있게 해주는 도구들의 모임입니다. 각종 버튼, 배너, 아이콘 등 웹 디자인 기능 요소들을 JavaScript와 CSS로 만들어 놓아 많은 웹 개발자 및 디자이너들에게서 큰 반응을 얻었습니다. 과거에는 웹 개발 시 여러 개발자들이 개발하면서 병합하는 과정에서 많은 어려움을 겪었는데요. 공동의 작업을 하더라도 개개인의 작업물이 다른 결과물로 나타났기 때문입니다. 부트스트랩이 이러한 어려움을 상당 부분 해결해주고 있습니다. 부트스트랩은 SASS 스타..

반응형