안녕하세요. 코드덤입니다!
이번 시간에는 부트스트랩으로 간단하게 카드 형식을 만드는 방법에 대해 알아볼 거예요.
예제로 짧은 명언을 카드 형식으로 만들어 보았는데요.
부트스트랩 스타일을 적용해서 빠르게 아래와 같은 카드 형식을 만들어 줄 수 있답니다!
부트스트랩에서 카드 모양은 shadow 클래스 하나만 적용해 주면, 간단하게 카드 모양을 만들어 줄 수 있어요!
거기에, 패딩으로 내부 여백을 넣거나, rounded 클래스로 모서리를 둥글게 만들어 줄 수도 있습니다.
자세한 내용은 아래 영상을 통해서 확인하실 수 있습니다!
부트스트랩 기본 코드를 가져오는 방법부터, 부트스트랩의 blockquote 클래스와 blockquote-footer 클래스로 인용 문구의 스타일을 적용하는 방법, 카드 모양을 잡아주고, 부트스트랩의 배경 색상에 투명도를 적용하는 방법까지 알아볼 거예요.
아래 배경 이미지의 색상 역시, 부트스트랩 클래스 지정만으로 만든 색상이랍니다!
여러분도 지금까지 배운 부트스트랩 스타일을 활용해서 또 다른 형식의 웹 페이지를 만들어 보세요!
전 세계적으로 가장 많이 사용되는 웹디자인 툴킷!
부트스트랩 5를 보다 체계적으로 배우고 싶으신 분들을 위해, 부트스트랩 강좌를 오픈하였습니다.
Bootstrap5로 보다 효율적이고 스마트하게 나만의 웹사이트를 만들어 보세요!
아래 페이지를 통해 상세한 커리큘럼을 확인해 보세요!
HTML 기초 개념부터, 웹 사이트 제작, 그리고 배포까지! 그 전체적인 흐름을 경험하시게 되실 거예요!
[부트스트랩5] 빠르고 스마트하게 웹 사이트 만들기 [입문용] - 인프런 | 강의
전세계적으로 가장 많이 사용되고 있는 웹 디자인 툴킷! 부트스트랩 5로 나만의 색을 입힌 포트폴리오 웹 사이트 제작부터 배포까지!, - 강의 소개 | 인프런...
www.inflearn.com
'웹 프로그래밍 강좌 > 부트스트랩 5 강의 | bootstrap 5' 카테고리의 다른 글
| [ 예제로 배우는 부트스트랩 5 ] 프로그래스 바를 활용한 영화 평점 페이지 만들기 (0) | 2022.11.28 |
|---|---|
| [ 부트스트랩 5 무료 강좌 ] 예제 3 : 포트폴리오 갤러리 페이지 | d-flex (0) | 2022.11.26 |
| [부트스트랩5로 만드는 별자리 소개 페이지] 반응형 이미지, 텍스트 스타일, 마진 등 (0) | 2022.11.24 |
| [부트스트랩5 무료 강의] 버튼 스타일 빠르게 지정하기 | HTML, CSS (0) | 2022.11.24 |
| [부트스트랩5 무료 강의] bootstrap 적용 방식 이해하기 (0) | 2022.11.24 |