バニラJSを使って画板を作る2


👉 コードレスパネルリンク
今日はCSSを全部やり終えました!
昨日は慣れないので時間がかかりましたが、
今日はビデオを見て直接フォローして、各コードが何を意味するかを理解することができます.
ううう💪😊

🎨 html & CSS

  • divを生成し、カラーパレットを生成します.全部で9色あります.classとidを比較するには、classは汎用オブジェクト、idは特定のオブジェクトに使用されます.したがって、idは1つの要素にしか適用できません.
  • パレットのスタイルが指定されています.パレート形状を四角形から円形に変えるためにborder−radiusの値をwidthとheightの半分と入力した.
  • FillとSaveボタン、およびInput rangeスライダオブジェクトが作成されました.
  • コントロールの要素を中央に並べ、fill&saveボタン設計を指定します.実行後、ボタンの下にmarginが適用されていないことが判明し、確認後にエラーが発生しました.行28.controls .controls.btns > .controls .コントロールbtnsに変更します.
  • スライダオブジェクトにgrify-bottom 30 pxが設定されていて、きれいに見えます.
  • スライダオブジェクトのmin、max、value、step値が設定されています.
  • <input type='range' id='' min='최솟값' max='최댓값' value='기본값' step='이동단위'>
  • bodyのpadding値を変更しました.上下50 px右左0 px
  • //참고로, padding은 컨텐츠와 margin 사이 여백이다.
    
    //위 오른쪽 아래 왼쪽
    padding : 1px 2px 3px 4px
    //모두 같을 때
    padding : 1px
    //위 오른쪽/왼쪽 아래
    padding : 1px 2px 3px
    //위/아래 오른쪽/왼쪽
    padding : 1px 2px

    🤩今日の成果🤩