o 자바스크립트 오픈소스
D3.js - Data-Driven Documents
D3 is a JavaScript library for visualizing data with HTML, SVG, and CSS.
d3js.org
https://www.chartjs.org/docs/latest/
Chart.js | Chart.js
Chart.js Welcome to Chart.js! Why Chart.js Among many charting libraries (opens new window) for JavaScript application developers, Chart.js is currently the most popular one according to GitHub stars (opens new window) (~60,000) and npm downloads (opens ne
www.chartjs.org
o [Bootstrap 사용법]
1) 직접링크 (CDN)
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<!-- Latest compiled JavaScript -->
2) 라이브러리 다운
[Bootstrap]
- HTML, CSS, JavaScript framework(완성된 템플릿)
- Bootstrap 3, 4, 5가 있다
- 웹페이지 개발시 frontend(UI, View)단을 구현하기 위한 무료 오픈소스
- 주로 CSS, 레이아웃, 반응형 웹 구현시 많이 사용한다
- 완성된 형태로 제공되는 .css나 .js
o 미디어쿼리
참조 https://www.w3schools.com/css/css3_mediaqueries.asp-->
<div>
<h3>미디어쿼리</h3>
- 화면크기마다 각각 다르게 CSS를 적용하는 것이다.
- 화면 사이즈를 인식해 서로 다른 CSS를 적용시켜준다.
- 보통은 스마트폰, 태블릿 , PC 화면 3개 정도를 구분해준다.
- 화면 크기가 변할때 스타일을 바뀌도록 해서 반응형 웹을 구현할 수 있다
<hr>
<h3>반응형 웹 디자인(Responsive Web Design, RWD)</h3>
- 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라
화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다
- 디바이스 별로 각각 레이아웃(grid)이 달라지는 웹
*2) used for computer screens, tablets, smart-fhones etc*/
@media screen {
div {
width: 100%;
height: 200px;
font-size: 12px;
border: 2px solid red;
}
@media print {
div {
width: 100%;
height: 200px;
font-size: 12px;
border: 2px solid yellow;
}
}
}
o 반응형 웹을 위한 12그리드 레이아웃css
@charset "UTF-8";
/*layout.css*/
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
o meta태그
1) HTML문서에서 사용하는 문자셋을 인코딩(필수)
<meta charset="UTF-8">
2) HTML문서에 대한 다양한 정보(선택)
<meta name="description" content="Free Web tutorials">
<meta name="author" content="John Doe">
3) 검색 엔진에서 서칭되게 하는 키워드(선택)
<meta name="keywords" content="HTML, CSS, JavaScript">
4) 모든 장치에서 HTML문서를 잘 보이게 하기 위해 뷰포트 설정(필수)-반응형 웹
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5) 30초마다 주기적으로 현재 HTML문서 새로고침
<meta http-equiv="refresh" content="30">
<!--content값에 0을 주면 한 번만 새로고침-->
