[20強]タイトルボックスをつかむ

navラベルを入力
nav:ロゴ、検索ウィンドウ、アイコンで構成されています.

つかみ取る

nav {
    display: flex;
    height: 54px;
    background-color: white;
    align-items: center; /* 가운데 정렬 */
    padding: 0 20px;
}

nav > div {
    flex: 1; /* nav 안에 있는 친자식 div들끼리 같은 간격을 가지게 한다. */
}

➰display:flexを使用して自由配列を作成します.
背景を白に変え直しました.
整列-items:nav全体を垂直に中央に整列!
padding上下0,左右20 px.
➰flex:1,navにおける実div間の間隔は同じである.

バッジ

 <div> <!-- 로고 -->
      <a href="/">
         <img src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png">
      </a>
</div>

➰imgはInstagramページから持ってきました!なぜかhttps://www.instagram.com乙、乙を付けてイメージを表示することができます...そうだそうです.
logoを押すとhref="/"が現在のページにリフレッシュされます!

検索

<div> <!-- 검색 -->
     <input placeholder="검색">
</div>

➰プレースホルダ:inputウィンドウに文字を入力する前に書かれたテキスト.

nav input {
    outline: none; /* input 창이 눌렸을 때 테두리 */
    border: solid 2px gray;
    padding: 3px 10px 3px 26px; /* 위쪽 오른쪽 아래 왼쪽 순서 */
}

nav input::placeholder {
    text-align: center; /* 검색창 안에 있는 글씨는 가운데 정렬 */
}

nav input:focus::placeholder {
    text-align: left; /* 검색창에 커서가 있을 때 글씨는 왼쪽 정렬  */
}

outline:noneを使用して、「入力」ウィンドウをクリックしたときに発生した黒い枠線を除去します.
➰基本フレームは灰色の直線で、厚さは2 pxです.
➰inputのpaddingは、上、右、下、左の時計回りの順序で与えられる.
➰inputのプレースホルダにもスタイルが用意されており、テキストが中央に揃えられています.
フォーカスがインputに集中すると、プレースホルダの字も左揃えのスタイルになります.つまり、入力ウィンドウにフォーカス、カーソルがある場合、プレースホルダフォントが左揃えになります.

オブジェクト向けアイコン

<div class="icons"> <!-- 아이콘들 -->
    <a>
       <svg aria-label="홈" class="_8-yf5 " fill="#262626" height="22" role="img" viewBox="0 0 48 48" width="22"><path d="M45.5 48H30.1c-.8 0-1.5-.7-1.5-1.5V34.2c0-2.6-2.1-4.6-4.6-4.6s-4.6 2.1-4.6 4.6v12.3c0 .8-.7 1.5-1.5 1.5H2.5c-.8 0-1.5-.7-1.5-1.5V23c0-.4.2-.8.4-1.1L22.9.4c.6-.6 1.6-.6 2.1 0l21.5 21.5c.3.3.4.7.4 1.1v23.5c.1.8-.6 1.5-1.4 1.5z"></path></svg>
    </a>
    <a>
       <svg aria-label="Direct" class="_8-yf5 " fill="#262626" height="22" role="img" viewBox="0 0 48 48" width="22"><path d="M47.8 3.8c-.3-.5-.8-.8-1.3-.8h-45C.9 3.1.3 3.5.1 4S0 5.2.4 5.7l15.9 15.6 5.5 22.6c.1.6.6 1 1.2 1.1h.2c.5 0 1-.3 1.3-.7l23.2-39c.4-.4.4-1 .1-1.5zM5.2 6.1h35.5L18 18.7 5.2 6.1zm18.7 33.6l-4.4-18.4L42.4 8.6 23.9 39.7z"></path></svg>
    </a>
    <a>
       <svg aria-label="사람 찾기" class="_8-yf5 " fill="#262626" height="22" role="img" viewBox="0 0 48 48" width="22"><path clip-rule="evenodd" d="M24 0C10.8 0 0 10.8 0 24s10.8 24 24 24 24-10.8 24-24S37.2 0 24 0zm0 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm10.2-33.2l-14.8 7c-.3.1-.6.4-.7.7l-7 14.8c-.3.6-.2 1.3.3 1.7.3.3.7.4 1.1.4.2 0 .4 0 .6-.1l14.8-7c.3-.1.6-.4.7-.7l7-14.8c.3-.6.2-1.3-.3-1.7-.4-.5-1.1-.6-1.7-.3zm-7.4 15l-5.5-5.5 10.5-5-5 10.5z" fill-rule="evenodd"></path></svg>
    </a>
    <a>
       <svg aria-label="활동 피드" class="_8-yf5 " fill="#262626" height="22" role="img" viewBox="0 0 48 48" width="22"><path d="M34.6 6.1c5.7 0 10.4 5.2 10.4 11.5 0 6.8-5.9 11-11.5 16S25 41.3 24 41.9c-1.1-.7-4.7-4-9.5-8.3-5.7-5-11.5-9.2-11.5-16C3 11.3 7.7 6.1 13.4 6.1c4.2 0 6.5 2 8.1 4.3 1.9 2.6 2.2 3.9 2.5 3.9.3 0 .6-1.3 2.5-3.9 1.6-2.3 3.9-4.3 8.1-4.3m0-3c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5.6 0 1.1-.2 1.6-.5 1-.6 2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z"></path></svg>
    </a>
</div>

➰なぜaタグなのか分かりませんが、aタグに入れると言います.
ラベルにアイコンが1つずつ置かれています.このdivのクラス名はiconsに設定されています.
➰アイコンはsvgの形で出てきますが、これもInstagramのページから持ってきたものです!
➰まずホームページ、直接情報、人探し、アクティブシードアイコンの4つしか持ってこなかった.

.icons {
    display: flex;
    justify-content: space-evenly;
}

➰display:flexに変更し、並べ替えを容易にします.
➰vide-content:space-アイラインペン間のマージンを同じにするために均一な方法を使用します.
完成した様子!下の黄色、青がそうなのでインスタグラムページのように、ㅄㅄㅄ

🍒 整理する

今日はタイトル部分を作りました!本当に早すぎてびっくりしました約7分でこんなにたくさん作りました.本当にすごいですね.私も早くその実力になりたいです間隔が合わないので、これを交換してあれを交換すると、機能が満足せず、色もあまりよくないので、交換するのに時間がかかります.最初から完璧にやりたい!!早く勉強していくつか作りたいなぁ~~