Admin Dashboard 만들기 part 8. 태스크 만들기(bootstrap tasks)

Admin Dashboard 만들기 part 8. 태스크 만들기(bootstrap tasks)

 

 

태스크를 위한 섹션 만들기 

태스크는 이전에 만든 막대진행바 섹션에 구현하도록 한다.  xl 화면에서 막대진행바와 태스크가 함께 보여주고, 그보다 작은 화면에서는 새로운 줄에 표시하도록 설정한다. 

두 그래프가 세로로 표시될때, 사이에 간격(margin)을 추가한다. 

 

Javascript 만들기 

javascript를 이용해서 간단하게 텍스트를 변경하는 기능을 추가할 수 있다. 하지만 여기서는 기본 화면에 대한 처리만 한다. 자세한 기능 구현은 javascript 쪽을 검색해서 구현. 

태스크 디자인 변경하기 

- edit 아이콘 디자인 변경 

변경 전 => 후

- delete 아이콘 추가 

 

태스크 아이템 디자인 

 

먼저 body 의 배경색을 변경한다. ( style.css ) - 전체 배경색을 약간 어두운 색으로 변경 

 

- 태스크 아이템 디자인 변경 ( task-border ) 

style.css

- 태스크 아이템을 중간에 배치하기 위해서 align-items-center 를 추가한다. 

새로운 아이템을 추가한다. 

 

 

끝.