TIL#3 | Kokoa clone_1

html

!はhtmlのデフォルトフォーマットをすばやく入力するためのショートカットキー

BEM(Block Element Modifier)
:よく使われるid、class名はよく使われ、부모요소__자식요소と命名されます.
🤔 cssの方がわかりやすくなりますが、欠点があるとクラス名の長さが長すぎるかもしれません!この点に注意して、idとclassを順番に書く人もいるので、私に合った方法を探してください.

block : .btn {}

elements : .btn__price {}

modifiers : .btn--big {}

Icon

直接画像アイコンを追加
:画像の直接作成と抽出

リンクの追加
-Heroicons
-Fontawesome

Font

importではなくlink(推奨)
-importの場所は上部

bodyにfont-familyを追加
💡すべてのフォントを追加すると、サイトは非常に重くなり、子供たちだけがこれらのフォント

を使用できます.
+Google Font!Webサイトのfontを参照
コメント<!-- 내용 -->:ブラウザには表示されず、ユーザーにのみ表示されるコメント
CSS
reset CSS
:ブラウザにデフォルトで適用されるスタイルを初期化します.
:まずブラウザスタイルを削除し、自分で設計するのがより良い方法です.
テキストの整列
:h 1、p tagなどのテキストタグを中央に位置合わせする場合はtext-alignを使用します.
🤔実験結果->flexを用いても中間ソートは可能であるが,長文フォーマットの場合は良好な中間整列ではなく左整列である!

#login-form p {
    text-align: center;
    }

css hack(privity-contentではなく)
レシピは同じで、どこでも使えます.おかしいですが、起動しました.
1.上位ボックス:prevident-content:center;
-セット
2.内箱範囲:width:33%;
-左揃え、左揃え、左揃え
3.真ん中にあるボックス:display:flex;justify-content: center;
-中心位置のみのボックスを中心位置に配置
4.右側に配置するボックス:display: flex; justify-content: flex-end; align-items: center;
-右揃え
例

<div class="status-bar">
        <div class="status-bar__column">
            <span>No service</span>
            <i class="fas fa-wifi"></i>
        </div>
        <div class="status-bar__column">
            <span>18:43</span>
        </div>
        <div class="status-bar__column">
            <span>110%</span>
            <i class="fas fa-battery-three-quarters"></i>
            <i class="fas fa-bolt"></i>
        </div>
    </div>

.status-bar {
     display: flex;
     justify-content: center;
     padding: 5px 3px
 }
 .status-bar__column {
    width: 33%;
}
.status-bar__column:first-child span {
     margin-right: 5px;
 }
 .status-bar__column:nth-child(2) {
     display: flex;
     justify-content: center;
 }
 .status-bar__column:last-child {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}