[20강] 헤더 틀잡기

• nav 태그 채우기
  nav: 로고, 검색 창, 아이콘들로 구성!

⭐ nav 틀 잡기

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

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

➰ display: flex로 배열을 자유롭게 만들었다.

➰ 배경을 다시 흰색으로 만들었다.

➰ align-items: center로 nav 전체를 세로로 가운데 정렬!

➰ padding을 위아래는 0, 왼쪽 오른쪽은 20px를 줬다.

➰ 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는 인스타그램 페이지에서 가져옴! 왜 https://www.instagram.com을 덧붙여야만 이미지가 뜨는지는 모르겠지만... 그렇다고 한다.

➰ href="/"는 로고를 눌렀을 때 현재 페이지로 다시 새로고침 됨!

⭐ 검색창

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

➰ placeholder: 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; /* 검색창에 커서가 있을 때 글씨는 왼쪽 정렬  */
}

➰ input 창을 눌렀을 때 생기는 검은색 테두리를 outline: none으로 없앴다.

➰ 기본적인 테두리는 회색의 직선으로 두께는 2px로 두었다.

➰ input의 padding을 위, 우, 아래, 좌의 시계 방향 순서대로 주었다.

➰ input의 placeholder에도 스타일을 주었는데, 그 안에 있는 텍스트가 가운데 정렬되게 스타일을 주었다.

➰ input에 focus 되었을 때의 placeholder에 있는 글씨에도 왼쪽 정렬이 되게 스타일을 주었다. 즉, input창에 포커싱, 커서가 있을 때 그 안에 있는 placeholder 글씨가 왼쪽 정렬이 된다.

⭐ 아이콘

<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 태그에 넣자고 하셨다.

➰ a 태그에 아이콘 하나씩 넣었다. 이 div의 class 이름은 icons로 설정했다.

➰ 아이콘들은 svg 형태로 되어있어 이것 또한 인스타그램 웹 페이지에서 가져왔다!

➰ 일단 홈, 다이렉트 메세지, 사람 찾기, 활동 피드 아이콘 4개만 가져왔다.

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

➰ display: flex로 바꿔 배열에 쉽게 만들었다.

➰ justify-content: space-evenly를 이용해 아이콘끼리 여백을 똑같이 만들었다.

➰ 완성된 모습! 아래 노란색, 파란색 색깔 때문에 그렇지 제법 인스타그램 웹 페이지같다 ㅎㅅㅎ

🍒 정리

오늘 헤더 부분 만들었다! 진짜 뚝딱뚝딱 만드셔서 깜짝놀랐다. 약 7분 만에 저만큼을 만드신 것이다. 진짜 대단하다... 나도 얼른 그런 실력이 되고 싶다ㅠ 나는 하나 만드는 데에 며칠이 걸리는데... 간격 안 맞아서 이것 저것 바꾸고, 기능 맘에 안 들고 색깔도 별로여서 다시 바꾸고 하느라 오래 걸린다. 처음부터 완벽하게 만들고 싶다!!! 빨리 다 배워서 여러 개를 만들어보고 싶다~~