ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • HTML,CSS,JS(자바스크립트)로 웹 그림판 만들기 1
      일단 만들기 2021. 12. 30. 00:01

       

      만들 결과물 : 웹에서 작동하는 그림판

      만드는 이유 : 결과물을 만드는 과정을 통해 JS,CSS,HTML을 보다 실질적으로 이해하기 위해서.

      (개념을 이해하고 정리하는 것보다 한발짝 더 나아가는 학습과정이라고 생각)

       

      1️⃣ 셋업하기

       

      0 . 명령프롬프트에서 깃헙에 클론, VScode 실행

       

      1. 탐색기에서 index.html  /  app.js  /  styles.css  생성하기 🔻

      (VScode에서 파일 생성시 확장자누르면 아이콘 바뀌는거 늘 짜릿하다.)

       

      2. index.html 에 html document 만들고 타이틀 이름 설정하기

      하고 싶은 타이틀 넣고...

       

      3. index.thml 속 <head>부분에 style.css 설정해주고, <body>부분에 app.js 불러줍니다.

       

      여기까지 셋업 완료입니다.

      우리는 빈 웹 화면을 만들었습니다! WoW! (만든 경로 들어가면 확인 가능)

      2️⃣ 스타일 설정하기

       

      1. 탐색기에서 reset.css 생성, 코드 넣기.

       


      https://meyerweb.com/eric/tools/css/reset/

       

      위의 링크를 타고 들어가서 reset.css에 복붙한다.

      더보기 클릭하면 소스코드 있음.

       

      더보기 
      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;
}

       

      2. 스타일 초기화 후 배경과 폰트 세팅하기

       

      style.css 내에서 아래와 같이 작업합니다.

       1) reset.css import 합니다.

       2) body에 배경색 넣습니다. (원하는 색 넣으세요)

       3) font-family 넣습니다. (원하는거 가능한~)

      @import "reset.css";
body {
    background-color: #eeeeee;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

       

      3. 캔버스 만들기

      index.html에서 <body>부분에 <canvas> 만들어줍니다. (id, class원하는대로)

      <canvas>는 태그에요. 캔버스가 뿅 생성됩니다. 비슷한거로는 <button>을 넣으면 버튼생성 등등 많이 있습니다.

      html 카테고리에 기초문법 포스팅 곧 올라오니 참고하셔도 됩니다.

      <canvas id=jsCanvas" class="canvas"></canvas>

       

      4.캔버스 꾸미기

       

      캔버스를 만들었으니 캔버스를 꾸며야겠죠? 그럼 다시 어디로 간다?

      아까와 마찬가지로 styles.css로 가야겠죠. 거기서 캔버스를 꾸미면 됩니다. 

      오 이제 과정이 어떻게 되는지 느낌이 오죠? 😉

      index>head에서 세팅해주고 >body에서 생성해주고 styles.css에서 꾸며준다.
          display: flex;   /*디스플레이 화면을 유동적(반응형)으로 해주는 flex*/
    flex-direction: column;  /*생성될 아이템 정렬 방향*/
    align-items: center;  /*가운데 정렬하겠다*/
    padding-top: 50px;  /*엘리먼트의 상단 여백을 지정*/

      쉽게 이해되라고 주석을 넣어놨습니다. CSS 기초문법도 포스팅 해야 할텐데..말입니다... 할 게 너무 많ㄱ.. (먼산)

      body 아래에 캔버스 스타일을 상세하게 꾸며봅니다.

      아래는 그냥 제가 하고픈대로 한거기 때문에 바꿔도 무관합니다.

      width와 height로 사이즈 설정해주고, 캔버스 배경색, 그림자 등등 설정해줍니다.

      .canvas{
    width: 700px ;
    height: 700px ;
    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.068);
}

       

      현재까지 전체 styles.css 코드를 확인하려면 더보기

      더보기 
      @import "reset.css";
body {
    background-color: #f1f4f8;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 
    Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;
}

.canvas{
    width: 700px ;
    height: 700px ;
    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.068);

}

      지금까지 우리는 이렇게 생긴 걸 만들었습니다. 와우.

       

      5. 컬러팔레트 만들기

      index.html>body에 controls라는 컬러팔레트 생성해주고

      <div class="controls__color" style="background-color: black;"></div>

      위의 코드를 복붙해서 컬러를 9가지 설정해줍니다. (저는 보기 편하게 흰,검,무지개색으로 했어요)

       

      6. 팔레트를 위치시켜줍니다.

      style.css에 아래와 같은 태그를 추가해줍니다.

      .controls {
    margin-top: 80px;
}

.controls .controls__colors {
    display: flex;
}

.controls__colors .controls__color {
    width: 50px;
    height: 50px;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.068);
}

      그림자는 이전과 똑같이 넣었고,

      위치와 반응형 디스플레이, 팔레트 크기 등을 설정합니다....

      (다르게 해도 상관없음~)

      타단~ 실행해보니 아래와 같이 그림판이 꽤 그럴싸하게 보입니다.

       

       

      현재까지의 style.css 전체 코드를 보려면 더보기

      더보기 
      @import "reset.css";
body {
    background-color: #f1f4f8;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 
    Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;
}

.canvas {
    width: 700px ;
    height: 700px ;
    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.068);
}

.controls {
    margin-top: 80px;
}

.controls .controls__colors {
    display: flex;
}

.controls__colors .controls__color {
    width: 50px;
    height: 50px;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.068);
}

       

      그런데 말입니다.  😎

      컬러 팔레트가 네모인데, 원형으로 바꾸고 싶다면 어떻게 할까요?

       

      border-radius: 25px;

      이거 한 줄만 추가해주면 됩니다.

      네모 사이즈가 50px * 50px 이었다면 radius 를 25px 주면 원이 되고,

      100*100px 이었다면? 50px을 주면 되겠죠. 가장자리를 절반 깎아줘야? 동그란 원이 되니까요.

      저는 원으로 만들어보겠습니다.

       

      저장 후 실행하니 이렇게 됩니다. 훨 예쁘네요.

       

      그리고 팔레트에서 컬러를 선택할때의 커서 모양을 바꿔줍니다. 

       

      컬러 팔레트 부분에서만 커서를 변경하려면 

      controls__colors .controls__color{ 이곳에 태그 위치시키기 }

      사이에 넣으면 되겠죠?

      모양은 아래와 같습니다. 저는 Pointer로 바꿀게요. 

       

      각각에 알맞는 태그를 확인하려면 더보기 

      더보기 
      <p style="cursor:auto">Auto</p>
<p style="cursor:crosshair">Crosshair</p>
<p style="cursor:default">Default</p>
<p style="cursor:pointer">Pointer</p>
<p style="cursor:move">Move</p>
<p style="cursor:e-resize">e-resize</p>
<p style="cursor:ne-resize">ne-resize</p>
<p style="cursor:nw-resize">nw-resize</p>
<p style="cursor:n-resize">n-resize</p>
<p style="cursor:se-resize">se-resize</p>
<p style="cursor:sw-resize">sw-resize</p>
<p style="cursor:s-resize">s-resize</p>
<p style="cursor:w-resize">w-resize</p>
<p style="cursor:text">text</p>
<p style="cursor:wait">wait</p>
<p style="cursor:help">help</p>

      출처 : http://www.homejjang.com/09/cursor.php

       

      오늘은 여기까지 만들어봤습니다.

       

       

      2편을 만들려면 아래 포스팅 클릭~

      https://babodocoding.tistory.com/56

       

      HTML,CSS,JS(자바스크립트)로 웹 그림판 만들기 2

      1편 보러가기!  CLICK 🖱! 1편에 이어서 자바스크립트,HTML,CSS로 웹 그림판 만들기 2탄을 가겠습니다. 자, 안전벨트 단단히 매시고 출바알🎈~ 1️⃣ 채우기/그리기, 저장버튼 만들기 좌측과 같이 컬

      babodocoding.tistory.com

       

      사용한 프로그램(소스코드 편집기): Visual Studio Code (a.k.a VScode)

       

      참고 : https://nomadcoders.co/

       

      (위 참고의 노마트코더를 보고 만들었습니다. 영상으로 잘 나와있으니 보시는걸 추천합니다.)

       

       

       

       

       

      저작자표시

      '일단 만들기' 카테고리의 다른 글

      파이썬 DB연결 회원관리 프로그램 (웹X, 콘솔구현)  (0) 2022.02.15
      간단실습) 회원가입 양식 폼 만들기  (0) 2022.01.18
      HTML,CSS,JS로 웹 그림판 만들기 완성 (코드)  (0) 2022.01.04
      HTML,CSS,JS(자바스크립트)로 웹 그림판 만들기 3  (0) 2022.01.03
      HTML,CSS,JS(자바스크립트)로 웹 그림판 만들기 2  (0) 2022.01.01

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바