예제 이미지 다운로드 :
안녕하세요. 코드덤입니다.
이번 시간에 부트스트랩5로 첫 번째로 만들어 볼 예제 페이지입니다!
이 예제 페이지에 사용된 이미지는 바로 위의 jpg 파일을 다운로드하여서 사용해 주시면 됩니다.
이번 페이지를 통해서 부트스트랩으로 글자 크기, 굵기, 색상 등과 같은 텍스트 스타일과 배경색 그리고 마진을 설정하는 방법에 대해 알아볼 거예요.
그리고 상단에 이미지가 있는데요.
이 이미지는 화면의 너비에 따라 이미지의 크기 또한 반응형으로 바뀌도록 만들어 줄 거예요.
이 부분도 부트스트랩을 통해서 아주 간단하게 처리할 수 있답니다!
자, 그러면 함께 만들어 볼께요!!
부트스트랩이 처음이신 분들은 맨 첫강부터 들어주셔야 보다 잘 이해하실 수 있으실 거예요.
만들어 나가는 자세한 과정은 아래 영상 안에 담았답니다!!
그러니 영상을 참고해 주세요!
위의 영상을 통해서 알 수 있듯이 부트스트랩을 활용하면, 상당히 빠르게 웹사이트 디자인을 만들어 나갈 수 있답니다!
HTML 기초 개념부터 2가지 포트폴리오 웹 사이트를 만들어 나가는 부트스트랩 강좌를 론칭하였으니가요.
보다 체계적으로 부트스트랩을 배우고 싶은 분들은 아래 링크를 참고해 주세요!
본 강좌를 통해 보다 빠르고 효율적으로 나만의 웹 사이트를 제작해 보세요!
부트스트랩 5로 만드는 포트폴리오 웹 사이트
부트스트랩 2번째 작품은 여러 페이지로 구성된 웹 사이트입니다. 이미지 슬라이더, 사이드 바 레이아웃, Tab과 아코디언 기능이 추가되며, 구글 맵과 폼 디자인도 적용해 봅니다.
codethem.co.kr
'웹 프로그래밍 강좌 > 부트스트랩 5 강의 | bootstrap 5' 카테고리의 다른 글
| [ 부트스트랩 5 무료 강좌 ] 예제 3 : 포트폴리오 갤러리 페이지 | d-flex (0) | 2022.11.26 |
|---|---|
| [부트스트랩5 무료 강좌] 예제 2 : 명언 카드 만들기 | 인용문, 그림자 효과, 배경 불투명도 설정 (0) | 2022.11.25 |
| [부트스트랩5 무료 강의] 버튼 스타일 빠르게 지정하기 | HTML, CSS (0) | 2022.11.24 |
| [부트스트랩5 무료 강의] bootstrap 적용 방식 이해하기 (0) | 2022.11.24 |
| [부트스트랩5 무료 강좌] HTML, CSS 자바스크립트란? (0) | 2022.11.24 |