node.js 웹서버 프로젝트 실시간 데이터 dashboard 만들기 1(Bootstrap4)

Bootstrap4

 

 웹 페이지의 개발이 진행 될 때 트위터에서 사용하는 각종 레이아웃, 버튼 , 입력창 등의 디자인을 css와 javascript를 통해 만들어 놓은 것입니다. 웹 디자이너나 개발자 사이에서는 웹 디자인의 혁명이라고 불릴 정도로 반응이 좋은 프레임워크입니다. 

 BootStrap을 간혹 어떤 언어 혹은, 프로임워크 등으로 오해하는 경우들이 있는데 간단하게 설명하자면 우리가 파워포인트 발표 차료를 만들 때 ppt를 물론 자신이 직접 디자인해서 사용하는 경우도 있지만, 남이 만들어 놓은 템플릿을 가져다 ppt 제작시간을 줄이고 원하는 디자인을 적용하듯 일종의 WEB 템플릿이라고 생각하면 됩니다.

 글자, 인용문, 목록, 표, 입력폼, 버튼, 이미지 등의 자잘한 것 뿐만이 아니라 드롭다운, 메뉴, 버튼 페이지 이동 바, 알림 메시지 , 썸네일, 진행 등의 요소를 전부 내장하고 있고 입맛에 따라 쓰고 싶은 곳에만 사용, 재사용 할 수 있습니다. css클래스나 javascript 함수만 불러오면 디자인이 뚝딱 만들어 지기 때문에 빠르게 웹 개발을 하기 위해서는 효과적으로 사용할 수 있습니다 또한 웹페이지를 데스크탑 , 테블릿, 스마트폰 모두에서 무리없게 볼 수 있도록 만들 수 있기 때문에 반응형 웹 디자인을 지원한다 

w3school 

https://www.w3schools.com/

W3Schools Online Web Tutorials

 

 

부트스트랩은 위에 명시가 되어 있듯 글자, 인용문, 목록, 표, 입력폼, 버튼, 이미지 등의 자잘한 것 뿐만이 아니라 드롭다운, 메뉴, 버튼 페이지 이동 바, 알림 메시지 , 썸네일, 진행 등의 요소를 전부 내장하고 있고 이 이외에도 카드 carousel, modal 등등 여러가지 기능들을 내장하고 있다 하지만 이런 것들을 모두 직접 개발하고 디자인하기에는 무리가 있습니다  w3school 에서는 이러한 상황을 위해 여러가지 디자인을 제공하는데 해당 사이트에서 소스코드를 미리 run 해보고 소스코드가 공개가 되어 있기 때문에 이를 활용하여 여러가지 디자인들을 입맛에 맞게 골라 사용할 수 있다 

 

image & 아이콘 참고 사이트

아래 사이트는 일러스트와 아이콘 이미지 등등을 무료로 찾아보고 사용할 수 있는 유용한 사이트들 입니다.

https://thenounproject.com/

Noun Project

 

https://unsplash.com/

Beautiful Free Images & Pictures | Unsplash

 

프로젝트 페이지 디자인 하기 

 해당 프로젝트는 css/html/js등 프로트 관련 요소들을 boostrap4를 통해 디자인한 내용입니다.

login page

register (회원가입) 페이지

 

main dashboard 페이지