バニラJSを使用したボードの作成👨‍🎨 1

1. reset.css

各ブラウザに既定のスタイルが設定されているため、スタイルをリセットしてスタイルを初期化します.cssを使用します.直接リセットします.cssファイルを作成して好きなcssコードをコピーする方法もありますが、www.jsdelivr.com/reset-cssサイトからHTMLにファイルをコピーしました.

2. display: flex;

コンテナはFlexの影響を受ける空間全体であり、各項目は設定された属性に従って配置されます.Flexのプロパティは、コンテナに適用されるプロパティと、プロジェクトに適用されるプロパティに分けられます.

Flex Container

displayをblockではなくflexに設定すると、flexプロジェクトは水平方向に配置され、width単位で配置されます.高さは自動的にコンテナの高さに増加します.

.container{
	display:flex;
}

flex-direction

配置方向の設定は、項目を配置する軸の方向を設定するプロパティです.rowの場合は左から右、columnの場合は下から下に主軸を設定します.このほかrow-reverseとcolumn-reverseもあります.

justify-content

アイテムを主軸に位置合わせするプロパティ.属性はflex-start、flex-end、center、space-tween、space-sweaveralなどがあり、これまでcenterを使った回数が最も多かった.

align-items

これは垂直軸方向に項目を並べたプロパティです.プロパティにはstretch、flex-start、flex-end、center、baseが含まれます.この例ではcenterを使用してソートします.
それ以外にもflexプロパティがたくさんあります...この例の属性のみを整理し、他の部分は後で勉強します!だから私たちがしなければならないのは下の画板です

canvasにはwidthプロパティとheightプロパティがあり、HTMLファイルに追加できます.幅と高さのプロパティが指定されていないため、結果はありません.

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

body{ /*FLEX-CONTAINER*/
    background-color: #F6F9FC;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 0px; 
}
 .canvas{ /*FLEX-ITEM*/
    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.08);
} 

CSSファイルで以下の操作を行うことで、上記の結果が表示されます.キャンバスのデザインが完了すると、色とボタンを追加する次のステップに進みます.

3. div class="controls"

HTML要素の構成は大体次の通りです.Controls rangeセクションでは、ブラシの厚さを調整したり、ボタンで線や塗装をしたり、画像保存機能を実行したりします.コントロールカラーは、ブラシの色を変更するには、クリックします.

<div class="controls">
  <div class="controls__range"></div>
  <div class="controls__btns"></div>
  <div class="controls__colors" id="jsColors">
</div>

4. div class="controls__colors"

各色は要素であり、CSSデザインではなくstyle="(CSS 요소)"ダイレクトスタイルがHTMLに適用されます.(コードの簡潔性のために?)

<div class="controls__colors" id="jsColors">
  <div class="controls__color jsColor" style="background-color: #2c2c2c;"></div>
  <div class="controls__color jsColor" style="background-color: #FFFFFF;"></div>
  <div class="controls__color jsColor" style="background-color: #FF3B30;"></div>
  <div class="controls__color jsColor" style="background-color: #FF9500;"></div>
  <div class="controls__color jsColor" style="background-color: #FFcc00;"></div>
  <div class="controls__color jsColor" style="background-color: #4CD963;"></div>
  <div class="controls__color jsColor" style="background-color: #5AC8FA;"></div>
  <div class="controls__color jsColor" style="background-color: #0579FF;"></div>
  <div class="controls__color jsColor" style="background-color: #5856D6;"></div>
</div>

今回はこの図を参考にしてCSSの観点から理解します.

.controls{
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.controls .controls__range{
    margin-bottom: 30px;
}
.controls .controls__btns{
    margin-bottom: 30px;
}

.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);
}

今CSS要素の中で理解しなければならない部分はボタンの設計で、私はいくつかの私のよく知らない属性を整理したいです(ほほほ).

.controls button{
    all: unset;
    text-transform: uppercase;
    /* 생략 */
}

[MDN all] allショートカット属性は、要素のUnicode-Bidi、direction、CSSカスタム属性以外のすべての属性を初期化します.
text-transformは、大文字または小文字で置き換えられるプロパティです.

.controls__btns button:active{
    transform: scale(0.98);
}

[MDN active] a:アクティブCSSは、ユーザがアクティブにする要素(ボタンなど)を表す.マウスを使用する場合、[アクティブ](Active)は通常、マウスボタンを押すからマウスボタンを離すまでの時間を指します.
ここでは、すべてのHTMLとCSSセクションを見て、次の章ではJavaScriptを中心に学習とまとめを行います.
Niko Samの<バニラJSで画板を作る>を聞いて整理したメモです.個人的には復習の観点から、HTML、CSS、JSファイルの各コードを分解して整理したいと思います.