부트스트랩 5 무료 강좌 | 디지털 명함 만들기 | bootstrap
예제 이미지 다운로드 :
안녕하세요. 코드덤입니다.
이번 시간에는 부트스트랩 5로 디지털 명함을 만들어 볼 거예요.
아래 이미지와 같이 전체적인 배경을 넣고, 그 위로 디지털 명함을 넣어 볼 거예요.
그리고 프로필 정보 가장 하단에 SNS로 연결되는 버튼들이 있는데요.
이 버튼에 사용된 아이콘은 부트스트랩에서 제공하는 아이콘을 사용했습니다.
이렇게 이번 시간에는 부트스트랩 아이콘을 가져오는 방법에 대해서도 함께 배워 보겠습니다!
큰 화면에서는 이렇게 프로필 사진과 세부 정보가 수평으로 배치되고요.
작은 화면에서는 프로필 사진 아래쪽으로 텍스트가 배치되도록 만들어 볼 거예요.
부트스트랩을 사용하면, 입문 과정에서도 이러한 웹 페이지는 크게 어렵지 않게 만드실 수 있습니다.
그럼 함께 디지털 명함을 만들어 보겠습니다.
만들어 나가는 자세한 과정은 아래 영상에 담아 두었습니다.
그러니, 아래 영상을 통해서 여러분만의 디지털 명함 만들기에 도전해 보세요!
오늘 배운 내용을 활용해서 여러분을 대표하는 디지털 명함을 만들어 보세요!
그리고 실제 활용도 해 보시기 바랍니다!
본 예제 외에도 더 많은 부트스트랩 5 예제들이 오픈되어 있으니까요.
코드덤 유튜브 채널을 통해서 보다 다양한 예제들을 만나 보세요!
오늘 예제처럼 부트스트랩을 활용하면, 입문 과정에서도 상당히 수준 높은 웹 페이지를 만들 수 있답니다!
2가지 포트폴리오 웹 사이트를 함께 만들어 나가며, 부트스트랩을 보다 체계적으로 배워 보세요!
HTML과 CSS의 기초 핵심 개념부터, 웹 사이트 배포까지!
그 전체적인 흐름을 경험하게 되실 거예요.
부트스트랩을 보다 체계적으로 배우고 싶은 분들은 아래 링크를 통해 상세한 커리큘럼을 확인해 보세요.
부트스트랩 5로 만드는 포트폴리오 웹 사이트
20% 할인 쿠폰 : welcome20
codethem.co.kr
부트스트랩이라는 새로운 도구를 손에 쥐고 한단계 더 도약할 수 있기를 진심으로 바랍니다!
모두 웃음 가득한 하루 되세요!