WEB/Bootstrap

[bootstrap] 기본 사용법 ( 부트스트랩의 class 선택자 )

bay07 2024. 3. 10. 19:27

class 선택자

부트스트랩은 모든 스타일이 class의 형태로 지정되어 있다.

<p class="mt-5"> Hello, world!</p>

 

margin top - 5

 

 

부트스트랩은 왼쪽 오른쪽 개념이 아니라 start, end의 개념으로 바라본다. 

top부터 bottom까지 한번에 선택할 수 있는 건 y (y축이니까)

left부터 right까지 한번에 선택할 수 있는 건 x이다.

 

mx-5 : margin 좌우로 5

 

rem : root em / 16px을 가지고 상대적인 비율의 크기를 구하는 것 

0.25rem = 0.25 * 16 = 4px

 

더 세부적인 크기는 우리가 따로 정해줘야한다. 

자기네들이 만들어놓은 클래스 이름 쓰지말라고 

!important를 썼음 

우리가 custom할 때는 최대한 다른 이름을 쓰도록 하기 


 

결론적으로,

부트스트랩에는 특정한 규칙이 있는 클래스 이름으로 

스타일 및 레이아웃이 미리 작성되어 있다.

 


* 공식 문서에서 더 자세한 내용들을 확인할 수 있다. 

https://getbootstrap.com/docs/5.3/utilities/spacing/#margin-and-padding

 

Spacing

Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.

getbootstrap.com