반응형
부트스트랩 5 예제 9 이미지 다운로드 :
안녕하세요. 코드덤입니다.
이번 시간에는 레스토랑 대표 메뉴를 소개하는 페이지를 이미지 슬라이드 쇼 형식으로 만들어 볼 거예요.
부트스트랩의 캐러셀 예제 코드를 활용하면 빠르게 만들 수 있습니다.
여러 장의 이미지가 자동으로 슬라이드 되면서 보입니다.
그리고 이미지 좌우로 버튼이 보이죠.
좌우 버튼을 클릭해서 이미지를 이전과 다음으로 넘길 수도 있습니다.
이번 예제 코드는 부트스트랩에서 제공하는 예제 코드를 가져와서, 이미지만 넣어주고, 너비와 같이 간단한 스타일만 추가로 잡아 준 거랍니다.
부트스트랩의 carousel은 여러 장의 이미지를 슬라이드시켜 주는 요소인데요.
부트스트랩 Docs를 통해서 다양한 예시들을 제공하고 있어요.
만들어 나가는 자세한 과정은 아래 영상에 상세하게 담아두었습니다.
그러니, 아래 영상을 참고해 주세요!
이번에 함께 만들어 본 이미지 슬라이드와 같이 부트스트랩 예시 코드를 활용하면, 상당히 빠르게 웹 사이트를 만들어 나갈 수 있습니다.
2가지 포트폴리오 웹사이트를 직접 만들어 나가며 부트스트랩을 보다 체계적으로 배울 수 있는 강좌를 오픈하였습니다.
HTML과 CSS 기초 개념부터, 웹사이트 배포까지!
부트스트랩5를 통해 나만의 색을 담은 웹사이트를 세상과 공유해 보세요!
부트스트랩 5로 만드는 포트폴리오 웹 사이트
20% 할인 쿠폰 : welcome20
codethem.co.kr
반응형
'웹 프로그래밍 강좌 > 부트스트랩 5 강의 | bootstrap 5' 카테고리의 다른 글
| 예제로 배우는 부트스트랩 5 | 예제 11 : 입력 폼 스타일 | bootstrap 플로팅 레이블 (0) | 2022.12.22 |
|---|---|
| 부트스트랩 무료 강좌 | 예제 10 : bootstrap 표 스타일 | Table (0) | 2022.12.15 |
| 부트스트랩 5 무료 강좌 | 디지털 명함 만들기 | bootstrap (0) | 2022.12.02 |
| 부트스트랩 5 card overlay | 카드 스타일에 배경 이미지 넣기 (0) | 2022.12.01 |
| [부트스트랩 5 무료 강좌] 예제 6 : My Pet 소개 페이지 | 그리드(grid) 시스템 | bootstrap 5 (0) | 2022.11.30 |