예제 이미지 다운로드 :
안녕하세요. 코드덤입니다.
이번 시간에 부트스트랩으로 만들어 볼 예제는 프로필 소개 섹션이에요!
위의 그림과 같이 이미지와 텍스트를 배치시켜 볼 거랍니다.
왼쪽으로 사진이 배치되어 있죠. 그리고 오른쪽으로 프로필에 대한 세부 사항이 배치되어 있는데요.
이 예제는 부트스트랩의 그리드 시스템이 적용된 예제랍니다!
그래서 화면이 스몰 사이즈 이하로 작아지면, 사진 아래쪽으로 텍스트가 배치되도록 만들어 줄 거예요.
부트스트랩의 가장 큰 장점 중 하나가 바로 반응형 웹 디자인입니다.
반응형 웹 디자인은 브라우저의 너비에 따라 레이아웃을 변경해 주는 것을 말하는데요.
이제는 스마트폰이나, 태블릿, 노트북뿐만 아니라, 자동차나 가전제품을 통해서도 웹 브라우저 접속이 가능해졌습니다.
이처럼 우리는 다양한 장치를 통해 웹 사이트에 접속하게 되는데요.
각 장치의 화면 크기가 다르기 때문에, 접속하는 기기에 맞춰서 화면 레이아웃을 변경해 주어야 합니다.
바로 오늘 배우게 될 부트스트랩의 그리드 (grid) 시스템을 통해서 빠르게 반응형 레이아웃을 만들어 줄 수 있어요!
부트스트랩의 그리드 시스템은 row안에 칼럼을 배치시켜서 레이아웃을 만들어 주는 방식입니다.
하나의 row를 총 12개의 칼럼으로 나눕니다.
그리고 이 12개의 칼럼을 필요한 만큼 나눠서 사용하면 되는 거예요.
자세한 내용은 아래 영상을 통해서 들어 보세요!
전 세계적으로 가장 많이 사용되는 웹 디자인 툴킷!!
부트스트랩을 통해서 빠르게 반응형 웹 디자인을 할 수 있습니다.
2가지 포트폴리오 웹 사이트를 함께 만들어 보면서 부트스트랩을 보다 체계적으로 배워나갈 수 있는 부트스트랩 5 강좌를 오픈하였습니다.
인프런, 코드덤 홈페이지, 구름edu, 유튜브 멤버십을 통해서 만나실 수 있어요!
[ 부트스트랩 5 ] 빠르고 스마트하게 웹사이트 만들기 | 입문용 - 구름EDU
전세계적으로 가장 많이 사용되고 있는 웹 디자인 툴킷! 부트스트랩5로 웹 사이트 제작부터 배포까지!
edu.goorm.io
'웹 프로그래밍 강좌 > 부트스트랩 5 강의 | bootstrap 5' 카테고리의 다른 글
| 부트스트랩 5 card overlay | 카드 스타일에 배경 이미지 넣기 (0) | 2022.12.01 |
|---|---|
| [부트스트랩 5 무료 강좌] 예제 6 : My Pet 소개 페이지 | 그리드(grid) 시스템 | bootstrap 5 (0) | 2022.11.30 |
| [ 예제로 배우는 부트스트랩 5 ] 프로그래스 바를 활용한 영화 평점 페이지 만들기 (0) | 2022.11.28 |
| [ 부트스트랩 5 무료 강좌 ] 예제 3 : 포트폴리오 갤러리 페이지 | d-flex (0) | 2022.11.26 |
| [부트스트랩5 무료 강좌] 예제 2 : 명언 카드 만들기 | 인용문, 그림자 효과, 배경 불투명도 설정 (0) | 2022.11.25 |