私の最初のコードの授業

この授業の目標はHTML、CSSの基礎知識を理解して、ホームページの中で地図のサービスに参加して、自分のホームページに属することを完成します.
*HTMLは主にheadと(ページの属性情報)bodyで構成されています.
-headの代表的な要素に入ります:meta、script、link、titleなど
-bodyの代表的な要素に入る:コード断片(-HTMLの基礎以外にもたくさんありますが、グーグルが必要です!/★ソートの重要性:ctrl+K+F自動ソート)
*CSSベース
▶~中にスペースを作る.

のラベルを指す装飾

.
h1 {
color: red;
}

ラベルと装飾

1)divパーティションの使用
最初の領域
2番目の領域
2)目に見えない「エリア」に色を塗る
.box {
background-color: green;
color: white;
}

他のcss

の練習
1)縦横寸法
.box {
background-color: green;
color: white;

  width: 800px;
  height: 800px;

}
.first {
background-color: red;

  width: 300px;
  height: 200px;

}
.second {
background-color: blue;
width: 200px;
height: 200px;
}
2)レイアウトの置き換え(display:flex)
.box {
background-color: green;
color: white;

width: 800px;
height: 800px;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

}
3)余白への間隔
.first {
background-color: red;

width: 300px;
height: 200px;

margin-bottom: 20px;

}
*作成を開始するには、どのように作成するかを計画することが重要です.(★区分「エリア」)

まず

div構造をキャプチャする

構造の詳細を間隔でスナップ
(上、右、下、左)*時計回り
margin-top: 40px;
margin-right: auto;
margin-left: auto;
->
margin: 40px auto 0px auto;

ストーリー

を読み込みます

ラベルを貼り付けてimgラベル

を飾る

.img {
    width: 450px;
    height: 300px;

    background-image: url('image.jpg');
    background-position: center;
    background-size: cover;

    border-radius: 24px;
}

<div class="box">
    <div class="map"></div>
    <div class="story">
        <div class="img"></div>
        <h2>장소명</h2>
        <h3>주소 자리</h3>
        <p>
            내용이 들어가는 곳
        </p>
    </div>
</div>

-h 2、h 3、pタグの装飾

.story > h2 {
    color: green;
    margin: 20px 0px 0px 0px;
}

.story > h3 {
    color: gray;
    margin-top: 5px;
    font-weight: normal;
    font-size: 16px;
}

.story > p {
    line-height: 24px;
}

地図

を入れる

KACA地図コード(サンプルコード貼り付け)

を入れる

地図位置に「id=map」周期

を追加する.

  ★상식
  
  API키는 왜 사용 하는 걸까?
  
  지금 우리가 이용하는 지도는 카카오의 서버를 통해 전달되고 있어요.
  너무 많이 요청을 하면 서버가 부담되기 때문에
  각자 정해둔 만큼만 사용할 수 있게 API키를 발급 받아 쓰라고 하는 것.
  

フォント(Google)

フォントを選択->[+Selectthis style]をクリック->右上のコレクションアイコン
linkはhead~head間、CSSはstyle~style間

応答移動画面

クロム開発者ツールの使用
右クリック->チェック->移動ボタンをクリックします.

Responsive、横長360 pxに設定し、ネットサイズの携帯電話でもOKです.

移動応答CSS

を使用する.
次のコードにCSSを入力するとwidthが640未満の場合のみ適用されます!
1)移動CSS入力の準備
@media screen and (max-width: 640px) {
}
2)h 1を保存する
h1 {
font-size: 26px;
}
3)box-垂直の使用
.box {
flex-direction: column;
width: 100%;
}
4)地図サイズの調整
.map {
width: 100%;
height: 200px;

margin: 0;

}
5)写真とストーリーサイズの調整
.story {
width: 100%;
height: auto;

margin-top: 10px;
margin-bottom: 10px;

}
.img {
width: 100%;
height: 200px;
}