Chapter06. 반응형 웹사이트 Bootstrap

부트스트랩 주소: https://getbootstrap.com/docs/5.1/layout/grid/

부트스트랩 Grid12

웹사이트를 격자무늬로 나누어서 보고 요소를 배치하는 기술

화면 사이즈에 따라 격자구조를 바꿀 수 있다

Grid는 한줄을 12개의 컬럼으로 나눈다.

줄을 나타내는 스타일은 row 이고 컬럼을 나타내는 스타일은 col 이다

따라서 항상 row 안에 col 이 들어있어야 한다

<div class="row">

	<div class="col">

	</div>

	<div class="col">

	</div>

</div>

col-6 와 같이 col뒤에 숫자를 둠으로써 해당컬럼의 사이즈를 조절 할 수 있다 (단 row안에있는 모든 col의 합이 12를 넘으면 다음줄로 넘어가버림)

col-sm-12와 같이 화면사이즈마다 다른 사이즈를 컬럼에 줄 수 있다.

부트스트랩 Container 🎁

화면의 요소를 가운데로 모아주고 싶을때 쓴다.

화면사이즈에 맞춰서 적당히 왼쪽 오른쪽에 여백을 주고 요소들을 가운데 배치시킨다.

사용법은 row를 container로 감싸주면 된다.

<div class="container">

	<div class="row">

		<div class="col">
	
		</div>

		<div class="col">

		</div>

	</div>

</div>