Admin Dashboard 만들기 part 4. 아이템 상태 표시 ( bootstrap card)

Admin Dashboard 만들기 part 4. 아이템 상태 표시 ( bootstrap card) 

 

 

이번 포스팅에서는 bootstrap card 콤포넌트를 통해서 아이템의 상태를 화면에 표시한다. 먼저 card 의 영역을 지정해 준다. 

- 카드는 card-body 와 card-footer 로 구성된다. 

- 첫번째 카드의 디자인과 내용을 채운다. ( Salse : $135000 ) 

 

- 두번째 카드의 디자인과 내용을 채운다. ( expense, $39000 ) 

- 세번째 카드의 디자인과 내용을 채운다. ( Users , $15,000 ) 

- 네번째 카드의 디자인과 내용을 채운다. ( visitors, $45,000 ) 

Card 스타일 만들기 

 

모든 카드에 card-common 를 추가하고 CSS 를 다음과 같이 추가한다. 

style.css

마우스를 옮기면 입체적인 효과를 낼수 있다. 

Responsive View

 

화면의 크기에 따라 카드 영역의 그리드 사이즈를 조절해준다. 

xl  - 10 grid 

lg  - 9 grid

md - 8 grid

 

현재의 화면을 보면, xl 의 경우에도 한줄에 2개의 카드만 배치되고 있다. 카드가 너무 넓게 보여서 부자연스럽다. xl의 경우 한줄에 4개의 카드를 모두 배열해보자. 

 

col-xl-3 : extra large 화면에서 3개의 grid 사용

col-sm-6 : small 화면에서 6개의 grid 사용

 

모든 카드에 적용한다. 

small 화면 사이즈에서 카드 2개씩 보이고, 상단에 padding / margin 이 보인다. 이를 제거해주기 위해서  break point 를 설정해준다. 

적용 전

적용 후

top padding & margin 는 md 이상의 스크린에만 적용한다. 

 

- pt-5 => pt-md-5 

- mt-3 => mt-md-3

 

끝.