reset css
| reset css |
https://meyerweb.com/eric/tools/css/reset/
- 사이트에 접속하여 소스를 복사
- reset.css 파일을 만들고 붙여넣기
- 메인 css 파일에 import
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
기본 스타일 세팅
- html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name ="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="styles.css" />
<title>PaintJS</title>
</head>
<body>
<canvas id="jsCanvas" class="canvas"></canvas>
<div class="controls">
<div class="controls__range">
<input type="range" id="jsRange" min="0.1" max="5.0" value="2.5" step="0.1" />
</div>
<div class="controls__btns">
<button id="#jsMode">Fill</button>
<button id="#jsSave">Save</button>
</div>
<div class="controls__colors" id="jsColors">
<div class="controls__color" style="background-color:#2c2c2c"></div>
<div class="controls__color" style="background-color:white"></div>
<div class="controls__color" style="background-color:#FF3B30"></div>
<div class="controls__color" style="background-color:#FF9500"></div>
<div class="controls__color" style="background-color:#FFCC00"></div>
<div class="controls__color" style="background-color:#4CD963"></div>
<div class="controls__color" style="background-color:#5AC8FA"></div>
<div class="controls__color" style="background-color:#0579FF"></div>
<div class="controls__color" style="background-color:#5856D6"></div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
- css
@import "reset.css";
body {
background-color: #f6f9fc;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Nene", sans-serif;
display: flex;
flex-direction: column;
align-items: center;
padding: 50px 0px;
}
.canvas {
width: 600px;
height: 600px;
background-color: white;
border-radius: 15px;
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}
.controls {
margin-top: 80px;
display: flex;
flex-direction: column;
align-items: center;
}
.controls .controls__btns {
margin-bottom: 30px;
}
.controls__btns button {
all: unset;
cursor: pointer;
background-color: white;
padding: 5px 0px;
width: 80px;
text-align: center;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
border: 2px solid rgba(0, 0, 0, 0.2);
color: rgba(0, 0, 0, 0.7);
text-transform: uppercase;
font-weight: 800;
font-size: 12px;
}
.controls__btns button:active{
transform: scale(0.98);
}
.controls .controls__colors {
display: flex;
}
.controls__colors .controls__color {
width: 50px;
height: 50px;
border-radius: 25px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}
.controls .controls__range {
margin-bottom: 30px;
}
flex 관련 참고 페이지
'개발 > JavaScript' 카테고리의 다른 글
| [바닐라 JS] PaintJS - color, brush (0) | 2022.04.03 |
|---|---|
| [바닐라 JS] PaintJS - canvas (0) | 2022.04.03 |
| [바닐라 JS] querySelectorAll (0) | 2022.03.31 |
| 테트리스 게임 만들기 (0) | 2021.09.17 |
| 바닐라JS - 앱 만들기 챌린지 끝 (0) | 2021.09.06 |
