쌍용강북교육센터 국비 학원 Day 57일차 BootStrap (margin, padding, grid, card, modal, Carousel, Navigation Bars)

 

쌍용 강북 교육센터 국비학원 Day 57일차

 

BootStrap

부트스트랩은 웹사이트를 쉽게 만들 수 있게 도와주는 CSS, JS 프레임워크이다. 하나의 코드로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동하게 만들 수 있으며, 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다.

 

Bootstrap은 모바일 우선으로 개발되었으며, 반응형웹을 위해서 아래와 같이 뷰포트 메타 태그 추가해야 한다.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 

- width=device-width

웹 페이지의 크기가 모니터의 실제 크기를 따라가도록 만든 설정으로서 모니터, 스마트폰 등의 화면에 맞는 비율로 화면이 뜨도록 만듭니다.

 

- initial-scale=1

보여지는 화면의 zoom up 정도를 1배율로 한다는 것이다. 이 값을 키우면 보여지는 화면이 줌 되어 크게 보인다.

마치 스마트폰에서 작은 사진을 두 손가락을 이용해 확대시키는 것과 비슷하다. (스마트폰에서만 효과가 있는 코드)

 

- shrink-to-fit=no

애플의 safari(사파리) 브라우저에만 영향을 미치는 속성이다. (사파리 11 이전의 버전과 관련된 것)

사파리는 기본적으로 viewport의 크기보다 보여줘야할 내용이 크면, 보여줘야할 내용을 줄여서 보여준다고 한다. 그것을 방지하기 위해 이 코드를 사용한다.

 

 

여백 (margin 과 padding)

기본적으로, .container 와 .container-fluid 는 상단 및 하단에는 패딩이 0 이고, 우측 및 좌측에는 패딩이 15px 로 되어있다.
     
※ 표기방법 ※
xs 에서 xl까지 모든 중단점에 적용되는 간격 유틸리티에는 별도의 중단점 약어가 없습니다. 이는 이러한 클래스가 min-width : 0 이상에서 적용되므로 미디어 쿼리에 의해 바인딩되지 않기 때문입니다. 그러나 나머지 중단점에는 중단점 약어가 포함됩니다.
     
xs 인 경우에는                         ->   {property} {sides} - {size} 
sm, md, lg, xl 인 경우에는   ->   {property} {sides} - {breakpoint} - {size} 

▷ property 는

     margin 이라면 m,

     padding 이라면 p
     sides 는 top 이라면 t, 
     bottom 이라면 b, 
     left 이라면 l, 
     right 이라면 r, 
     left 및 right 이라면 x, 
     top 및 bottom 이라면 y, 
     left 및 right 및 top 및 bottom 이라면 공백     
     
▷ breakpoint 는 반응형 웹페이지로 만들려고 할때 사용하는 것으로서 sm, md, lg, xl 이 들어옴.
     
breakpoint는 항상 해당 breakpoint 이상에 작용한다는 것을 꼭 기억할 것
예1 -> mb-3    은 xs 이상 부터 margin-bottom 은 1rem 이다. 즉, 모든 디바이스에서 margin-bottom 은 1rem 이라는 것이다. 
예2 -> mb-md-3 은 md 이상 부터 margin-bottom 은 1rem 이다. 즉, width 의 크기가 768px이상 에서는 margin-bottom 은 1rem 이라는 것이다.

 

▷ size 는  0 부터 5 까지 만 가능함.
0 -  margin 또는 padding 을 0 으로 함
1 -  margin 또는 padding 을 0.25rem 으로 함 (만약 font크기가 16px 이라면 4px  즉, font size 의 0.25배)
2 -  margin 또는 padding 을 0.5rem 으로 함   (만약 font크기가 16px 이라면 8px  즉, font size 의 0.5배)

3 -  margin 또는 padding 을 1rem 으로 함      (만약 font크기가 16px 이라면 16px 즉, font size 와 같음)

4 -  margin 또는 padding 을 1.5rem 으로 함   (만약 font크기가 16px 이라면 24px 즉, font size 의 1.5배)

5 -  margin 또는 padding 을 3rem 으로 함      (만약 font크기가 16px 이라면 48px 즉, font size 의 3배)
auto - margin 을  auto 로 설정함.
  

※ 주의 : auto는 margin만 auto 가 된다. padding은 auto가 되지 않는다고 한다. (기본 css문법에서도 그렇다.)
padding은 auto쓰고 싶으면 그냥 0으로 두고 margin만 건드리는 것을 추천한다.

 

▷ size 를 음수로도 할 수 있음. 숫자 앞에 n을 붙이면 됨. 
n1 - margin 을  -0.25rem 으로 함  (만약 font크기가 16px 이라면 -4px)
n2 - margin 을  -0.5rem 으로 함    (만약 font크기가 16px 이라면 -8px)
n3 - margin 을  -1rem 으로 함       (만약 font크기가 16px 이라면 -16px)
n4 - margin 을  -1.5rem 으로 함    (만약 font크기가 16px 이라면 -24px)
n5 - margin 을  -3rem 으로 함       (만약 font크기가 16px 이라면 -48px)

class="ml-auto" 는  css 의  margin-left: auto; 이다.
class="mr-auto" 는  css 의  margin-right: auto; 이다.
class="mt-auto" 는  css 의  margin-top: auto; 이다.
class="mb-auto" 는  css 의  margin-bottom: auto; 이다.
class="mx-auto" 는  css 의  margin-left: auto; margin-right: auto; 이다.
class="my-auto" 는  css 의  margin-top: auto; margin-bottom: auto; 이다.

left 와 right 에서 auto 의 뜻은 사용한 레이아웃 모드에 따라 가로축 미사용 공간 너비를 바깥 여백에 할당한다는 의미이다. margin-left 와  margin-right의 값이 모두 auto라면 너비를 양 여백에 동일하게 배정한다. 

margin 0 auto; 에서 0 이 의미하는 것은 위쪽과, 아래쪽의 여백을 0으로 주고 auto는 좌우의 여백을 똑같이 배분한 것이다. 그래서 화면 가운데에 위치하게 된다.

 

Grid

Responsive Columns (반응형 Columns) 그리드 옵션들 다양한 기기들을 넘나드는 부트스트랩 그리드 시스템

 

화면 가로px	Extra small	Small	Medium	Large	Extra large
	576px미만	576px이상 768px미만	768px이상 992px미만	992px이상 1200px미만	1200px이상
width	100%	540px	720px	960px	1140px
클래스 접두어	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-

 

1개행에 들어올 수 있는 컬럼의 최대개수  12
Nestable (중첩가능)    ->    Yes
Column ordering       ->    Yes

 

 

Card

유연하고 확장 가능한 내용을 담을 수 있는 공간으로 card는 내용 주위에 padding이 있는 테두리가 있는 상자이다. 여기에는 머리글, 바닥글, 콘텐츠, 색상 등에 대한 옵션이 포함된다.

 

 

 

Card Columns

 

.card-columns 클래스는 벽돌과 같은 카드 그리드를 만듭니다. 더 많은 카드를 삽입하면 레이아웃이 자동으로 조정됩니다. card의 개수를 달리 하면서 실행해 보면 이해할 수 있다.

 

 

 

Card Deck

 

.card-deck 클래스는 높이와 너비가 같은 카드 그리드를 만듭니다. 더 많은 카드를 삽입하면 레이아웃이 자동으로 조정됩니다. 카드는 작은 화면 (576px 미만)에서도 가로로 표시되지 않고 세로로 표시됩니다.

 

 

 

Card Group

 

.card-group 클래스는 .card-deck과 ​​유사합니다. 유일한 차이점은 .card-group 클래스가 각 카드 사이의 왼쪽 및 오른쪽 바깥여백을 제거한다는 것입니다. 카드는 위쪽 바깥여백 및 아래쪽 바깥여백이 있는 작은 화면(576px 미만)에서도 가로로 표시되지 않고 세로로 표시됩니다.

 

 

 

 

Carousel

이미지를 여러장 나타내는 것으로 화살표를 이용해 이전과 다음이미지로 넘겨 볼 수 있는 시스템이다. 웹 사이트에서 흔히 볼 수 있다. Crossfade와 같이 넘기는 animation은 지정할 수 있다.

 

 

 

 

Modal

JS의 alert와 비슷한 개념이며 기존의 브라우저 페이지 위에 새로운 윈도우 창이 아닌 레이어를 까는 것을 말한다.

모달창은 제거를 하지 않고도 페이지를 이동하면 자연히 사라진다. Modal 구성 요소는 현재 페이지 상단에 표시되는 대화 상자/팝업 창이다.

 

 

 

 

Navigation Bars

Navigation Bars (탐색 모음)은 페이지 상단에 배치되는 탐색 헤더로 Bootstrap을 사용하면 화면 크기에 따라 탐색 모음이 확장되거나 축소될 수 있다.

 

표준 탐색 모음은 .navbar 클래스를 사용하여 생성되고 반응형 축소 클래스(.navbar-expand-xl|lg|md|sm) 가 뒤따른다. navbar 내부에 링크를 추가하려면 class="navbar-nav"와 함께 <ul> 요소를 사용하면 된다. 그런 다음 .nav-item 클래스가 있는 <li> 요소를 추가하고 .nav-link 클래스가 있는 <a> 요소를 추가하여 사용한다.

 

 

화면 크기가 클 때 (노트북, 데스크탑)

화면이 축소되었을 때 (핸드폰)

 

화면이 축소되었을 때 (핸드폰) 2

 

 

 

 

 

 

---

더 다양하고 자세한 예제들을 참고하려면 밑에 첨부파일 이용.

새 폴더 (2).zip

1.16MB