on
Bootstrap & Grid box
Bootstrap & Grid box
Bootstrap
Bootstrap
트위터에서 시작된 오픈 소스 프론트엔드 라이브러리
웹 페이지에서 많이 쓰이는 요소 거의 전부를 내장
별도의 디자인을 할 시간이 크게 줄어들고, 크로스 브라우징(여러 웹 브라우저를 지원하기 위한 것)
시작?!
bootstrap 사이트에서 파일 다운로드
필요한 css 및 js파일 working directory 로 가져오기
,
CDN
Content Delivery(Distribution) Network
컨텐츠(CSS, JS, Image, Text 등)를 효율적으로 전달하기 위해 여러 노드를 가진 네트워크에 데이터를 제공하는 시스템
서버와 사용자 사이의 물리적 거리를 줄여 컨텐츠 로드 지연을 최소화
분산된 서버로 이루어진 플랫폼
bootstrap 을 이용하기 위해, 및 해당하는 부분에 코드 작성
... ...
js 코드는 태그의 끝 부분에 작성해준다.
spacing
mt
.mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; }
mx
.mx-0 { margin-right: 0; margin-left: 0; }
mx-auto 수평중앙정렬
py
.py-0 { padding-top: 0; padding-bottem: 0; }
이 외에도 mb , ms(left) , me(right) 와 같아 사용 가능
.ms-auto{ # 오른쪽 정렬을 의미함 }
Color
bg-colorName
text-colorName
이건 파란색 이건 빨간색
Text
정렬 text-start text-center text-end
text-decoration-non text 의 underline 제거
font-weight fw-bold fw-normal fw-light
font-style fst-italic
Display
d-inline
d-block
box
예시
example top bottom
Flexbox in Bootstrap
flexbox 를 bootstrap 에서 사용하기
d-flex
예시
content
components
화면을 구성하는 구성 요소
bootstrap doc 에 각 구성 요소를 구현하기 위한 코드 뭉치가 있음
Responsive Web Design
다양한 화면 크기를 가진 디바이스를 지원하기 위해 등장한 개념
반응형 웹은 별도의 기술 이름이 아닌 웹 디자인에 대한 접근 방식, 반응형 레이아웃 작성에 도움이 되는 사례들의 모음 등을 기술하는데 사용되는 용어
예시 Media Queries, Flexbox, Bootstrap Grid System, The viewport meta tag
Bootstrap Grid System
Grid system
Bootstrap Grid system은 flexbox 로 제작됨
로 제작됨 container , rows , column 으로 컨텐츠를 배치하고 정렬
, , 으로 컨텐츠를 배치하고 정렬 중요 point 12개의 column 6개의 grid breakpoints
/* 크기 설정 */
Grid system breakpoints
반응형 레이아웃을 위한
xs sm md lg xl xxl <576px >=576px >=768px >=992px >=1200px >=1400px
예시
1 2 3
offset 앞 공간에 얼마만큼의 여유를 둘 것인지?
.col-md-4 .offset-4 .col-md-4 .offset-md-4 .offset-lg-2
class
row-cols-number 하나의 행에 몇 개의 column 을 표시할 것인지 지정
# 768px 이상으로 화면 너비가 커지면 행당 2개의 column 을, # 1200px 이상으로 화면 너비가 커지면 행당 1개의 column 을 표시 1 2 3 4
d-none
d-inline
d-flex 등등.. 다음의 예시와 같이, 화면 너비에 따라 반응하도록 display 설정 가능
등등..
# 768px 이상으로 넓어지만 2, 3번째 열은 표시되지 않도록 지정 1 2 3
gutters grid 시스템에서 반응적으로 공간을 확보하고 컨텐츠를 정렬하는 데 사용되는 column 사이의 padding
col, col-* column class는 row당 가능한 12개 중 사용하려는 columns 수를 나타냄 column 너비는 백분율로 설정되므로, 항상 부모 요소를 기준으로 유동적으로 크기가 조정됨 grid layout에서 내용은 반드시 columns 안에 있어야 하며 오직
offset 지정한 만큼의 공간 뒤에 column을 위치시킨다. margin-left 와 유사하다고 생각하면 됨!
from http://ggreen01.tistory.com/63 by ccl(A) rewrite - 2021-08-30 22:26:17