0. 🔖 목차
- Bootstrap
1-1. 개념
1-2. 시작하기
1-3. 사용 방법
1. Bootstrap
1-1. 개념
Bootstrap은 HTML, CSS, JS 기반의 프론트엔드 프레임워크다. 반응형 웹 디자인을 쉽게 구현할 수 있도록 다양한 디자인 요소와 자바스크립트 컴포넌트를 제공한다.
Bootstrap을 사용하면 개발자와 디자이너가 시간을 절약하며 일관된 디자인을 적용할 수 있다.
1-2. 시작하기
부트스트랩 CSS 추가하기
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">웹 페이지에 부트스트랩 스타일을 적용하기 위해, 먼저 부트스트랩의 CSS 파일을 HTML 문서에 연결해야 한다.
이를 위해 <link> 태그를 사용하여 문서의 <head> 섹션에 부트스트랩 CDN 링크를 추가.
1-3. 사용 방법
<div class="row row-cols-1 row-cols-md-4 g-4 mx-auto w-75 pb-5">- row: 부트스트랩의 그리드 시스템 내에서 가로 줄(row)을 생성. 이 클래스는 내부에 열(columns)을 포함하는 컨테이너 역할을 함.
- row-cols-1: 모든 브레이크포인트에서 한 줄에 하나의 열(column)만 표시하도록 설정. 기본적으로 모바일 뷰를 의미.
- row-cols-md-4: 중간(Medium) 브레이크포인트(md) 이상의 화면 크기에서는 한 줄에 네 개의 열(column)을 표시하도록 설정. 태블릿이나 데스크탑 같은 더 큰 화면에서의 레이아웃을 조정하는 데 사용.
- g-4: 그리드 항목 간의 간격(gutter)을 설정. 여기서 4는 부트스트랩의 스페이싱 규모를 나타내며, 각 항목 사이의 공간을 조정.
- mx-auto: 수평 마진을 자동으로 설정하여, 요소를 수평 중앙에 배치.
- w-75: 요소의 너비를 부모 컨테이너의 75%로 설정.
- pb-5: 요소의 하단(padding-bottom)에 스페이싱 값을 5로 설정. 이 역시 부트스트랩의 스페이싱 규모에 따라 결정되며, 요소와 그 아래 요소 사이의 간격을 조정.
이 외에도 부트스트랩 홈페이지에서 더 자세한 사용 방법을 알 수 있음
틀린_내용이_있다면_말해주세요.