이번 시간에는 부트스트랩으로 다양한 버튼 스타일을 지정해 볼 거예요.
부트스트랩 docs에서 botton이라고 검색하시면, 해당 페이지에 예시와 그에 대한 코드를 확인하실 수 있습니다.
이러한 예시를 보면서 원하는 버튼 코드를 적용해 주시면 되세요.
class 속성에 부트스트랩 클래스 스타일을 적용해 주시면 됩니다.
이렇게 말로 설명드리면, 이해하기 조금 힘드시죠!
아래 영상에, 부트스트랩 공식 홈페이지에서 예시 코드를 확인하는 과정부터,
부트스트랩 스타일을 적용해서 버튼 모양을 만들어 나가는 과정을 상세하게 담아 두었으니까요.
아래 영상을 통해서 확인해 보세요!
btn, btn-색상명
단 이 두 개의 부트스트랩 클래스만 적용해 주면, 바로 예쁜 버튼 모양을 만들 수 있습니다!
부트스트랩에서 이러한 스타일을 미리 만들어 두었기 때문에, 저희는 단순히 클래스 속성 지정만으로 예쁜 버튼을 만들 수 있게 되는 거예요.
버튼뿐만 아니라, 다른 모든 스타일도 이러한 형식으로 적용되도록 되어 있습니다.
그래서 부트스트랩을 사용하면, 상당히 높은 수준의 웹사이트를 그것도 빠르게 만들 수 있게 되는 거예요.
위의 영상에, 버튼의 색상 뿐만 아니라, 버튼 크기, 버튼 테두리 스타일 등을 지정하는 방법에 대해 상세히 담겨 있으니까요.
상단의 영상을 통해 직접 실습해 보세요!
이 적용 방식을 이해하고 나시면 다음 시간부터 진행될 다양한 예제들이 보다 쉽게 이해가 되실 거예요!
보다 빠르고 스마트하게 나만의 포트폴리오 웹 사이트 만들기! 부트스트랩 강좌 또한 오픈하였습니다.
인프런이나, 유튜브 멤버십을 통해서도 들으실 수 있어요!
부트스트랩 강좌 뿐만 아니라,
점프 게임, 맞춤법 폭탄 게임, 미로 탈출 게임, 발사 게임 등 파이썬으로 총 20가지 프로젝트를 만들어 나가는 과정 또한
유튜브 멤버십을 통해 함께 만나실 수 있습니다!
본 강좌를 통해 부트스트랩이라는 아이템을 장착해 보세요!
그럼 저는 다음 강의에서 뵙겠습니다~!
'웹 프로그래밍 강좌 > 부트스트랩 5 강의 | bootstrap 5' 카테고리의 다른 글
| [부트스트랩5 무료 강좌] 예제 2 : 명언 카드 만들기 | 인용문, 그림자 효과, 배경 불투명도 설정 (0) | 2022.11.25 |
|---|---|
| [부트스트랩5로 만드는 별자리 소개 페이지] 반응형 이미지, 텍스트 스타일, 마진 등 (0) | 2022.11.24 |
| [부트스트랩5 무료 강의] bootstrap 적용 방식 이해하기 (0) | 2022.11.24 |
| [부트스트랩5 무료 강좌] HTML, CSS 자바스크립트란? (0) | 2022.11.24 |
| [부트스트랩5 무료 강좌] 웹 프로그래밍을 위한 준비 사항 (0) | 2022.11.24 |