[HTML,CSS,JavaScript] 그림판만들기[3]

하루만에 그림판을 모두 완성하고 싶었지만 코로나를 또 걸려 이제야 완성할것 같습니다.

오늘은 CSS를 입혀 보잘것없는 그림판을 멋있게 만들어 보려고합니다!

현재 그림판의 모습입니다. 멋있게 만들어 볼까요!

우선 도구가 옆으로 갔으면 좋겠다라는 생각이 들었습니다.

또 각각 제대로 구분을 줘야 할것 같다고 생각이 들었어요.

저번에 브러쉬를 버튼으로 조절했었는데 그걸 슬라이더로 바꿔줬으니 버튼은 삭제 하겠습니다.

또 선굵기의 사이즈와 불투명도의 숫자가 잘 보일수 있게 옆으로 나란히 배치해주겠습니다.

<!document html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>
            그림판 만들어보기
        </title>
        <link href="./assets/images/title-icon.png" rel="shortcut icon" type="image/x-icon">
        <link type="text/css" rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div>
            <canvas id="canvas" width="500" height="500"></canvas>
        </div>
        <div>
            <article>
                <section>
                    <h4>선 굵기</h4>
                    <input type="range" min="1" max="100" value="10" id="brushSizeSlider" oninput="lineWidthReSizeForSlider()">
                    <label for="brushSizeSlider" id="brushSizeSliderValue">10</label>
                </section>
                <section>
                    <h4>불투명도</h4>
                    <input type="range" min="0.0" max="1.0" step="0.1" value="1" id="opacitySlider" oninput="opacitySetForSlider()">
                    <label for="opacitySlider" id="opacitySliderValue">1</label>
                </section>
            </article>
            <div>
                <h4>브러쉬 모양</h4>
                <button type="button" name="brushType" onclick="brushTypeChange('line')"> / </button>
                <button type="button" name="brushType" onclick="brushTypeChange('circle')"> O </button>
                <button type="button" name="brushType" onclick="brushTypeChange('square')">☐</button>
                <button type="button" name="brushType" onclick="brushTypeChange('painting')">페인팅</button>
                <button type="button" name="brushType" onclick="brushTypeChange('eraser')">지우개</button>
                <button type="button" name="reset" onclick="canvasReset()">초기화</button>
            </div>
            <div>
                <h4>브러쉬 색상</h4>
                <label>
                    <input type="color" id="colorPicker" oninput="colorPicker()" >
                </label>
                <button type="button" name="brushColor" onclick="randomColor()">무작위 색상</button>
                <div>
                    <h4>최근 사용 색상</h4>
                    <div id="colorPalette">
                    </div>
                </div>
            </div>
            <a href="" download="myPainting.png" id="aEvent">다운로드</a>
        </div>
        <script type="text/javascript" src="js/canvas.js"></script>
    </body>
</html>

body{
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}
body > div {
    align-self: center;
}
canvas{
    border: 1px black solid;
}

각각 브라우저마다 화면이 다르니 통일 시켜주도록 하겠습니다.

/*input range 초기화*/
input[type='range']{
    -webkit-appearance: none;
    background: transparent;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
}
input[type=range]:focus {
    outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
input[type=range]::-ms-track {
    width: 100%;
    cursor: pointer;
    /* Hides the slider so custom styles can be added */
    background: transparent;
    border-color: transparent;
    color: transparent;
}


/*input range thumb custom*/
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 1px solid var(--border-color);
    height: 16px;
    width: 16px;
    border-radius: 3px;
    background: #ffffff;
    cursor: pointer;
    margin-top: -3.5px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
}
/*firefox*/
input[type=range]::-moz-range-thumb {
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    border: 1px solid var(--border-color);
    height: 16px;
    width: 16px;
    border-radius: 3px;
    background: #ffffff;
    cursor: pointer;
}
input[type=range]::-ms-thumb {
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    border: 1px solid var(--border-color);
    height: 16px;
    width: 16px;
    border-radius: 3px;
    background: #ffffff;
    cursor: pointer;
}


/*input range track custom*/
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    background: var(--border-color);
    border-radius: 1.3px;
    border: 0.2px solid #010101;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: var( --focus-background-color );
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    background: var(--background-color);
    border-radius: 1.3px;
    border: 0.2px solid #010101;
}
input[type=range]:focus::-moz-range-track{
    background: var( --focus-background-color );
}

input[type=range]::-ms-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    border-width: 16px 0;
    color: transparent;
}

input[type=range]::-ms-fill-lower {
    background: var( --focus-background-color );
    border: 0.2px solid #010101;
    border-radius: 2.6px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-lower {
    background: var( --focus-background-color );
}
input[type=range]::-ms-fill-upper {
    background:var( --focus-background-color );
    border: 0.2px solid #010101;
    border-radius: 2.6px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-upper {
    background: var( --focus-background-color );
}

https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

Styling Cross-Browser Compatible Range Inputs with CSS | CSS-Tricks

Styling for range inputs has improved dramatically since the release of IE 10. It is now possible to generate cross-browser compatible range inputs (sliders)

css-tricks.com

를 참고해서 만들었습니다.

모든 브라우저가 똑같은 디자인으로 보이기 시작했습니다.

이제 버튼과 하이퍼링크 전반적인 디자인을 바꿔주겠습니다.

:root{
    --border-color : #6b9cff;
    --background-color : #b8cfff;
    --focus-background-color : #959dff
}

html body{
    height: 100%;
    padding: 0;
    margin: 0;
}
body{
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    font-family: 'Spoqa Han Sans', serif;
}
body > div {
    align-self: center;
}
.brushTool{
    padding-right: 19px;
}
canvas{
    border: 1px black solid;
}
button{
    min-width: 50px;
    min-height: 30px;
    padding: 5px;
    border-radius: 8px;
    border: 1px solid;
    background: white;
}
button:active{
    background: #b8cfff;
}
#randomBrushColor{
    position: relative;
    bottom: 10px;
}
a{
    width: 50px;
    height: 100px;
    padding: 5px;
    margin: 5px;
    border-radius: 8px;
    border:1px solid;
    text-decoration: none;
    color: black;
}
a:active{
    background:  #b8cfff;
}
#colorPalette{
    display: flex;
    margin-bottom: 10px;
}

글씨가 통일되지 않아서 글씨도 추가해줬습니다.

그렇게 오래걸릴것도 없었지만 너무 오래 걸린것 같네요..! 내일부터는 노마드코더에 강의인 크롬클론하기를 해볼 예정입니다.

또한 그림판은 이대로 끝이아니고 계속해서 업데이트를 할 예정이에요!

전체 코드가 궁금하신분은 아래 깃허브 주소를 참고해주세요!

https://github.com/juhyejin/painting-board

GitHub - juhyejin/painting-board

Contribute to juhyejin/painting-board development by creating an account on GitHub.

github.com

저작자표시 비영리 변경금지 (새창열림)

'Toy Project' 카테고리의 다른 글

[드로잉윗유] 드로잉 윗유 제작기 기획부터! (0)	2023.04.07
node.js, socket.io를 사용해서 그림판 업그레이드 하기 (0)	2022.12.22
[HTML, CSS, JS] 크롭앱 만들기 (0)	2022.12.01
[HTML, CSS, JavaScript]그림판 만들기[2] (0)	2022.11.17
[HTML, CSS, JavaScript] 그림판 만들어 보기[1] (0)	2022.11.15

'Toy Project' 카테고리의 다른 글

티스토리툴바