예제 소스코드 다운로드 :
안녕하세요. 코드덤입니다.
이번 시간에는 포트폴리오 갤러리를 만들어 볼 거예요.
부트스트랩 클래스를 적용해서 사진 3장이 이렇게 가로로 펼쳐지도록 만들어 보겠습니다.
그리고 화면 크기에 따라서 이미지의 크기와 여백 또한 그에 맞춰 달라지도록 만들어 볼 거예요.
본 예제에 사용된 이미지는 상단에서 다운로드하실 수 있습니다.
이전 시간에 배경 색을 넣고, 불투명도를 지정하고, 텍스트 속성 및 가운데 정렬하는 방법에 대해 배워보았는데요.
함께 만들어 나가기 전에, 배경색과 제목
그리고 이미지를 3장이 반응형으로 들어가도록 여러분 스스로 먼저 도전해 보세요!
물론 이 3장을 부트스트랩으로 가로 배치시키는 방법에 대해서는 오늘 함께 배워나갈 거예요!
만들어 나가는 과정은 아래 영상을 통해서 자세히 들으실 수 있습니다!!
이번 시간에 새롭게 배울 부트스트랩 클래스는 바로 d-flex입니다!
이렇게 여러 장의 이미지를 가로로 배치하고자 할 때,
CSS에서는 display속성을 flex로 바꿔주죠!
부트스트랩에서는 d-flex 클래스를 적용만으로 바로 플렉스 박스로 만들어 줄 수 있답니다.
그러면, 위의 이미지처럼 바로 가로 배치가 되는 거예요.
그리고 이렇게 가로로 배치된 이미지들을 다양하게 정렬시켜 줄 수 있는데요.
CSS에서는 justify-content로 주축 정렬을 하죠.
부트스트랩에서도 동일하게 justify-content 클래스를 사용합니다.
그래서 justify-content-center로 맞춰주면, 가운데 정렬이 되고요.
justify-content-end 클래스를 적용해 주면 오른쪽 정렬이 되는 거예요.
상세한 내용을 위의 영상을 참고해 주세요!
아직, HTML이나 CSS에 대한 개념이 확실하게 잡히지 않으신 분들에게는 조금 이해하기 힘든 부분일 수 있는데요.
그런 분들을 위해 HTML 기초 개념부터, 웹 사이트 제작 및 배포까지 전체적인 흐름을 체득할 수 있는 부트스트랩 강좌를 오픈하였습니다.
본 강의는 인프런, 구름edu, 코드덤 홈페이지 그리고 유튜브 멤버십을 통해서 만나실 수 있습니다!
본 bootstrap강의를 통해 세상에 단 하나뿐인!!
나만의 색깔이 드러나는 웹사이트를 세상 속으로 탄생시켜 보세요~!
부트스트랩 5로 만드는 포트폴리오 웹 사이트
35% 할인 쿠폰 : EARLYBIRD35
codethem.co.kr
'웹 프로그래밍 강좌 > 부트스트랩 5 강의 | bootstrap 5' 카테고리의 다른 글
| 부트스트랩 5 무료 강좌 | 예제 5. 프로필 섹션 | 그리드 (grid) 시스템 | bootstrap (0) | 2022.11.29 |
|---|---|
| [ 예제로 배우는 부트스트랩 5 ] 프로그래스 바를 활용한 영화 평점 페이지 만들기 (0) | 2022.11.28 |
| [부트스트랩5 무료 강좌] 예제 2 : 명언 카드 만들기 | 인용문, 그림자 효과, 배경 불투명도 설정 (0) | 2022.11.25 |
| [부트스트랩5로 만드는 별자리 소개 페이지] 반응형 이미지, 텍스트 스타일, 마진 등 (0) | 2022.11.24 |
| [부트스트랩5 무료 강의] 버튼 스타일 빠르게 지정하기 | HTML, CSS (0) | 2022.11.24 |