ついていく意味がないので、何度かついていくと、
その後、最初からこのプロジェクトを開始したら、どのように段階的にアクセスするかをよく整理し、既存のコードを全く見ずに、直接再作成することにしました.
なぜなら、なぜこれらのステップが必要なのか、なぜこれらのコードを書くのか、自分ではっきり知ってこそ、他の方法、より効果的な方法を考えることができ、私のものになるからです.

HTMLを使用したスケルトンの作成

作成ボタン-バッジ、画像、テキスト

全部で3種類のボタンを作ります.

ロゴボタン

*シンボルラベルの使用

      <div class="logobtn"></div>
    //이전에는 이렇게 썼지만,

      <button class="logobtn"></button>
   //이제는 의도와 용도를 명확히 알 수 있도록 시멘틱 태그를 사용하기로 했다.

コード作成の簡略化

button.class명*반복 생성하고 싶은 횟수
//를 쓰면 한번에 같은 태그가 여러 개 생성된다.

テキスト、画像ボタン

 <!-- 로고 -->

 <button class="logobtn"><img src="img/logo.png" /></button>

 <!-- 이미지,텍스트 버튼 -->
 <!-- 한 줄에 들어가야 하기 때문에, 한 영역에 함께 만든다. -->
 <button class="imgbtn"><img src="img/blue_p.png" /></button>
 <button class="imgbtn"><img src="img/blue_t.png" /></button>
 <button class="imgbtn"><img src="img/blue_s.png" /></button>

 <!-- 텍스트 버튼 -->
 <button class="txtbtn">blue</button>
 <button class="txtbtn">pink</button>
 <button class="txtbtn">yellow</button>

整列した横並び出力.

CSSにはめ込む

各要素を必要に応じて配置

上にマークし、画像ボタンとテキストボタンを2行目に水平に揃えます。

1行に並べ替えたいコンテンツを1つのセクションにグループ化し、個別のクラスを付与するだけです.(アイテムを入れるコンテナを作成)

    <!-- 이미지,텍스트 버튼 -->
    <!-- 한 줄에 들어가야 하기 때문에, flexbox로 정렬해도 묶이도록 섹션으로 묶은 뒤 별도의 클래스를 부여한다. -->
    <section class="btns">
      <button class="imgbtn"><img src="img/blue_p.png" /></button>
      <button class="imgbtn"><img src="img/blue_t.png" /></button>
      <button class="imgbtn"><img src="img/blue_s.png" /></button>

      <!-- 텍스트 버튼 -->
      <button class="txtbtn">blue</button>
      <button class="txtbtn">pink</button>
      <button class="txtbtn">yellow</button>
    </section>

中央揃え

なぜ以下にリストされるアイテム領域が表示されますか:flex;justify-content:center;使っても真ん中に並べられないと思います.
開発者ツールカーソルを上げると、右側のダウンジャケットに40 pxが適用されています.

フーバー/クリック時の効果周期

クリック領域に入るとカーソルが置換されます

.logobtn {
  background-color: transparent;
  border-color: transparent;
  cursor: pointer;
}

マウスを大きくする

.txtbtnb {
  background-color: skyblue;
  border: none;
  border-radius: var(--border-radius);
  margin: var(--btn-margin);
  cursor: pointer;
  transition: transform var(--duration) ease;
}
.txtbtnp {
  background-color: pink;
  border: none;
  border-radius: var(--border-radius);
  margin: var(--btn-margin);
  cursor: pointer;
  transition: transform var(--duration) ease;
}
.txtbtny {
  background-color: rgb(255, 255, 115);
  border: none;
  border-radius: var(--border-radius);
  margin: var(--btn-margin);
  cursor: pointer;
  transition: transform var(--duration) ease;
}
.txtbtnb:hover,
.txtbtnp:hover,
.txtbtny:hover,
.logobtn:hover {
  transform: scale(1.1);
}

気になるのは、buttonタグで画像ボタンを作るとサイズ指定できないのではないでしょうか.

Jsonデータの準備

)

ブラウザ動作関数の作成

JSONデータの読み込み

fetch()
https://www.daleseo.com/js-window-fetch/
関数は、1番目のパラメータURL、2番目のパラメータでオプションオブジェクトを受信し、Promiseタイプのオブジェクトを返します.返されたオブジェクトは、API呼び出しが成功したときの応答オブジェクトを解析し、失敗したときの例外オブジェクトを拒否します.

// json 데이터를 가져온다.
function loaditems() {
 return (
   fetch("data/data.json")
     // load items라는 함수를 실행하면,fetch()로 데이터 폴더의 json데이터를 가져온다.
     //   .then((response) => response.json())//테스트
     .then((response) => console.log(response))
   //   fetch()로 받은 응답을 json형태로 만드다.
   //   .then((json) => json.items)
   //   json형태의 데이터인 items를 가져온다.
 );

データのロードに成功したことを確認できます.(できないからどれだけ迷ってるのかわからないけどウウウウウウウウウウウウウウウウウウウウウウウウウウウウウウウウウウウウウウウウウウウウウウウウウウウウウウウウウ

function loaditems() {
 return (
   fetch("data/data.json")
     // load items라는 함수를 실행하면,fetch()로 데이터 폴더의 json데이터를 가져온다.
     .then((response) => response.json())
     // json이라는 API를 사용해, response 오브젝트의 바디를 json형태로 변환한다.
     //   .then((response) => console.log(response)) //테스트
     .then((json) => console.log(json))

join()