[부트스트랩 5 무료 강좌] 예제 6 : My Pet 소개 페이지 | 그리드(grid) 시스템 | bootstrap 5

부트스트랩 예제 6용 이미지 다운로드 : 

images.zip

0.48MB

 

안녕하세요. 코드덤입니다. 

이번 시간에는 카드 형식으로 반려견을 소개하는 페이지를 만들어 볼 거예요. 

각 카드에는 이렇게 이미지와 간단한 소개들이 들어가 있습니다. 

 

그리고 지난 시간에 배운 부트스트랩의 그리드 (grid) 시스템 또한 적용되어 있어요. 

그래서 large 사이즈 이상에서는 이렇게 카드 4장이 일려로 펼쳐집니다.

small 사이즈 이상에서는 한 줄에 카드 2장씩, 

가장 작은 화면에서는 카드 한 장식 출력되도록 만들어 볼 거예요. 

 

오늘의 예제에 필요한 이미지는 상단의 첨부 파일을 다운로드하여서 사용해 주시면 됩니다. 

 

오늘 예제는 부트스트랩의 카드 (card) 스타일과 그리드 (grid) 시스템을 활용한 예제인데요. 

부트스트랩에서 제공하는 예제 코드를 활용해서 빠르게 만들어 나갈 거예요. 

 

부트스트랩의 그리드 시스템을 통해 반응형 레이아웃을 만들어 나가는 자세한 과정을 아래 영상 속에 담아 두었습니다. 

그러니 아래 영상을 참고해 주세요! 

 

 

2가지 실전 프로젝트를 통해 웹 사이트 제작부터 배포까지 경험해 볼 수 있는 부트스트랩 강좌를 오픈하였습니다. 

본 강좌는 인프런, 코드덤 홈페이지, 구름edu, 코드덤 유튜브 멤버십을 통해서 만나실 수 있습니다. 

부트스트랩을 보다 체계적으로 배워 나고자 하시는 분들은 아래 페이지를 통해 상세 커리큘럼을 확인해 보세요! 

 

부트스트랩 5로 만드는 포트폴리오 웹 사이트

 

모두 멋진 하루하루 만들어 나가시길 바랍니다!