부트스트랩 5 card overlay | 카드 스타일에 배경 이미지 넣기

부트스트랩5 예제7 이미지 다운로드 :

bg-card.jpg

0.03MB

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

이번 시간에 부트스트랩으로 만들어 볼 예제를 먼저 소개해 드릴게요. 

이전 시간에 그리드 시스템을 적용해서 여러 장의 카드를 배치시켜 보았습니다. 

그때, 부트스트랩의 카드 스타일을 적용해서 이미지 아래쪽으로 텍스트를 배치시켰는데요. 

 

이번 시간에도 부트스트랩의 카드 스타일을 적용해서 만들어 볼 거예요. 

차이점은, 이번 예제에서는 카드 전체에 배경 이미지로 이미지를 깔아 준다는 거예요!

그리고 그 배경 이미지 위로 텍스트를 띄워 볼 거랍니다! 

 

위의 사진처럼 말이에요! 

 

이러한 카드 스타일 또한 부트스트랩에 예제 코드가 제시되어 있으니까요. 

우리는 이 예시 코드를 활용해서 빠르게 만들어 줄 수 있어요! 

 

자, 그럼 함께 만들어 볼게요! 

만들어 나가는 자세한 과정과 설명 그리고 최종 코드는 아래 영상 속에 담아뒀으니까요! 

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

 

Bootstrap 5를 통해 보다 빠르고, 스마트하게 나만의 포트폴리오 웹 사이트 만들기에 도전해 보세요! 

 

부트스트랩은 전세계적으로 많이 사용되고 있는 CSS/자바스크립트 프레임워크입니다. 

2가지 포트폴리오 웹 사이트를 만들어 나가며, 실전 프로젝트를 통해 부트스트랩이라는 도구를 여러분의 손에 쥐어 보세요! 

 

자세한 커리큘럼은 아래 링크를 통해 확인하실 수 있습니다! 

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