부트스트랩-1일차

학습한 내용

부트스트랩 개발 환경 구축과 이해
부트스트랩 : 웹 페이지를 쉽게 만들 수 있도록 해주는 도구.

https://getbootstrap.com/
여기서 다운을 받거나 cdn을 통해 불러온다.
1) CDN을 통해 불러오기
홈 페이지에 있는 코드를 복사하여 실행

2) 다운로드
홈 페이지에서 다운을 받고 링크를 통해 불러온다.

적용시켜 한 예를 보면, 불러온 bootstrap.min.css가 특정 스타일을 저장하고 있다. 스타일이 없는 것과 차이를 보면 다음과 같다.

부트스트랩을 적용하면 지정해 놓은 스타일 시트가 있는 것을 알 수 있다.

부트스트랩 페이지에서 많은 메뉴들 중 containers를 보면


위와 같이 기본 class=container이고 너비가 고정되어 있다. 즉 max-width가 있다. 위 사진에서 브레이크포인트에 따라 달라지는 것을 표로 확인이 가능하다. 해상도에 따라 컨테이너 가로 크기를 정의해주고, 전체화면을 다 쓰고 싶을 때는 class이름을 container-fluid로 바꿔주기만 하면 된다.
원하는 비율에 100%를 어떻게 할지 정해줄 수 있다.

gird 부분도 보면

다음과 같이 원하는 기능이 있다면 복사하여 간편하게 사용할 수 있다.
또 홈 페이지에 없더라고 colums과 row를 추가할 수도 있다.
12칸으로 정의되어 있어서 원하는 만큼 열과 행을 통해 레이아웃을 작성하면 된다.

gutter width는 열과 열 사이 공간
컨테이너와 그리드만 잘 이해해도 html에서 뼈대를 쉽게 잡을 수 있다.
핵심은 row안에 몇 개의 col을 넣고 그 크기를 해상도에 따라 여러개의 class로 표현할 수 있다.
크기와 배열, 정렬 등 다양하게 홈 페이지를 참고하여 구성하거나, 특정 많이 쓰는 class이름을 알고 있다면 보다 편리하게 사용이 가능하다.

examples 사용하기
https://getbootstrap.com/docs/5.2/examples/
위 사이트에서, header나 heroes 등등 많은 영역의 예시가 있는데

페이지 소스보기를 통해

원하는 부분의 코드를 복사하여 그대로 붙여넣기만 해도 뼈대를 쉽고 빠르게 구성할 수 있다.

이렇게 부트스트랩 개발 환경 구축을 알아 보았다.
또한, 커스터마이즈도 할 수 있는데 정해져 있는 색이나 크기 등 스타일이 아닌 내가 원하는 스타일로 변경도 가능하다.
다만 여러 링크의 부투스트랩을 불러올 경우, 불러오는 마지막 부트스트랩 파일에 적용을 해줘야 덮어쓰기가 된다.
즉, 잘 짜여진 틀을 제공도하고 커스터마이즈도 가능하다!

학습한 내용 중 어려웠던 점 또는 해결못한 것들

해결방법 작성

학습 소감

이제 껏 배운 내용들을 통해 실습을 하거나 과제를 통해 페이지 하나 만드는 것에 부담감이 조금 없지 않아 있었다. 하지만, 오늘 배운 부트스트랩을 통해 다양한 기능을 알게 되었고, 뼈대 잡는 부분에서 엄청 빠르게 만드는 것에 놀랍고 신기했다. 각 기능에 대해 class를 정의한 것도 대단하고, 그 class만 안다면 보다 쉽게 만들 수 있을 것 같다.