html 과 sass를 사용해서 레이아웃을 구성한다.
index.html에서 body 내부에 레이아웃을 작성한다.
<body>
<div class="container" id="container">
<div class="toolbar" id="toolber">
<div class="tool brush" id="brush">
<i class="fas fa-paint-brush"></i>
</div>
<div class="tool eraser" id="eraser">
<i class="fas fa-eraser"></i>
</div>
<div class="tool nav" id="navigator">
<i class="fas fa-map"></i>
</div>
<div class="tool undo" id="undo">
<i class="fas fa-undo"></i>
</div>
<div class="tool clear" id="clear">
<i class="fas fa-trash-alt"></i>
</div>
<div class="tool dl">
<a id="download"><i class="fas fa-download"></i></a>
</div>
<input class="tool colorSelector" id="colorPicker" type="color" value="#e53935">
</div>
<canvas class="canvas" id="canvas" width="900" height="800"></canvas>
<div class="burshPanel hide" id="brushPanel">
<label for="brushSize" class="brushSizelabel">Size</label>
<input type="ramge" class="brushSize" id="brushSize" value="10" min="1" max="80">
<div class="brushSizePreviewContainer">
<label for="brushSize" class="brushSizePreview" id="brushSizePreview"></label>
</div>
</div>
</div>
<div class="imgNav hide" id="imgNav">
<img id="canvasImg" class="navImg">
</div>
<scipt src="src/js/index.js"></scipt>
</body>body 내부에는 container 와 imgNav hide div가 있으며 container는 그림을 그리는 여러 도구와 다운로드를 할수 있는 링크, 그리고 색상을 선택하는 도구까지 내재되어있는 toolbar, 그림을 그리는 도화지인 canvas 그림을 그리는 붓의 크기를 조절할수 있는 항목인 brushPanel이 있다.
imgNav hide는 canvs에서 그려진 그림을 조그마한 화면에 담아서 보여주는 역할을 맡고 있다.
scss의 경우, 아이콘을 사용하기 위해서 fontawesome을 설치해서 사용한다.
npm install --save @fortawesome/fontawesome-free이전에 만들었던 scss 폴더에 생성한 style.scss에 레이아웃의 스타일을 작성한다.
src/scss/style.scss
$fa-font-path: "../../node_modules/@fortawesome/fontawesome-free/webfonts";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/solid";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/brands";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
* {
margin: 0;
padding: 0;
border: 0;
user-select: none;
// !
box-sizing: border-box;
}
.container {
display: flex;
width: 955px;
margin: auto;
flex-wrap: wrap;
top: 100px;
position: relative;
.canvas {
border: 2px solid black;
}
.toolbar {
width: 50px;
height: 804px;
background: #535353;
.tool {
height: 45px;
width: 50px;
border: 1px solid transparent;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
background: #535353;
color: #dcdcdc;
border-radius: 5px;
transition: 0.2s;
&:hover {
border-radius: 5px;
background-color: #383838;
border-color: #636363;
transition: 0.2s;
}
&.active {
background-color: #383838;
border-color: #636363;
}
.fas {
font-size: 25px;
}
}
}
.brushPanel {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #535353;
left: 50px;
height: 100px;
width: 350px;
position: relative;
}
.imgNav {
height: 180px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
background: #535353;
top: 15px;
right: 15px;
margin-left: auto;
border-radius: 3px;
}
}
.brushPanel.hide,
.imgNav.hide {
display: none;
}
.container {
.toolbar .dl a#download {
color: #dcdcdc;
}
.brushPanel {
label {
color: #dcdcdc;
font-size: 11px;
font-weight: 700;
}
.brushSizeLabel {
position: relative;
left: -40px;
}
}
.toolbar input.tool[type="color"] {
height: 45px;
width: 50px;
margin: auto;
}
.brushPanel {
input.brushSize[type="range"] {
width: 200px;
position: relative;
left: -40px;
}
.brushSizePreviewContainer {
label.brushSizePreview {
width: 10px;
height: 10px;
// !
border-radius: 50%;
background: #e53935;
}
position: absolute;
right: 0;
background: inherit;
width: 100px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
.imgNav .navImg {
width: 180px;
height: 160px;
background-color: white;
}
}
빌드 후 실행해보면
위와 같이 나타나게 된다. 붓의 크기를 설정하는 brushSizePriviewContainer와 그린 그림을 추가적으로 작은 화면을 통해 보여주는 navImg는 hide 클래스를 추가했기 때문에 현재 보이지 않지만 콘솔에서 클래스를 제거하면
이렇게 숨겨진 요소들도 확인 할수 있다.
개발자 꿈나무