bootstrap5 공부해서 웹페이지 만들기 2

모바일 화면이 더 작기 때문에 bootstrap5는 모바일 화면을 우선으로 한다.

bootstrap5는 class 속성으로 이미 만들어 놓은 CSS들을 사용할 수 있다.

 

1. wrap

container : 고정 너비의 wrap

container-fluid : 꽉찬 너비의 wrap

-sm, -md, -lg, xl, xxl 같은 옵션으로 wrap을 사용자에 맞게 쓸 수 있다.

 

2. flexbox

한 페이지는 총 12개의 칼럼으로 나눠져 있다.

row : 행

col : 칼럼

-sm-, -md-, -lg-, -xl-, -xxl- wrap과 같은 옵션

-2, -3, -4, ... -12 한 칼럼이 많은 자리를 차지할 수 있다.

 

3. Typography

h1, h2, ... h6 : html5의 <h1>에서 <h6> 태그를 대신한다.

display-1, display-2, ... display-6 : h 속성보다 더 눈에 띈다.

태그 small, 태그 mark, 태그 abbr, 태그 blockquote, 태그 <dl> (dl, dt, dd)

태그 code, 태그 kbd, 태그 pre

 

4. Colors

text-muted, text-primary, text-success, text-info, text-warning, text-danger, text-secondary, text-white

text-dark, text-body, text-light

bg-muted, ...

text-bg-color 배경색에 맞는 적절한 글자색을 넣어준다.

-0 to -100 opacity option