CSS

전체 컨테이너 Container
헤더 영역 header
콘텐츠 영역 Content
푸터 영역 footer

• {
  box-sizing: border-box;
  }

margin: auto; (justify-content: center;)
border: none; (border : 0;)
outline: 0; (outline: none;)
outline : input 태그에 포커스가 맞춰졌을때 이를 표현하기 위한 바깥선
cursor: pointer; 마우스 올리면 손모양으로 변경
background-color: transparent; (투명)
flex: 0 1 150px; (팽창, 수축, 기본값)
list-style: none; (ul태그의 점 제거)

/* nav */
.nav {
    height: 50px;
    border-bottom: 2px solid black;
    background-color: white;
    position: sticky;
    /* sticky: 스크롤이 임계점(최상단에 도달 했을때
    스티커처럼 붙임
    - static (기본 position 상태)
    임계점 도달 시 fixed(화면 특정 위치에 고정)

    * top, bottom, left, right 속성이 필수로 작성
    ->임계점 도달 시 어느 위치에 부작할지 지정
    */
    top: 0;
}

<div>
	<!-- 검색창 -->
  <div class="search-area">
      <!-- form 내부 input 태그 값을 서버 또는 페이지로 전달 -->
      <form action="#" name="search-form">

      <!-- fieldset : form 내부에서 input을 종류별로 묶는 용도로 많이 사용 -->
              <fieldset>

              <!-- autocomplete="off" : HTML 기본 자동완성 사용 X -->
              <input type="search" id="quary" name="quary"
              autocomplete="off" placeholder="검색어를 입력해주세요.">
              <!-- 검색버튼 -->
              <button id="search-btn" class="fa-solid fa-magnifying-glass">		  	 </button>
          </fieldset>
      </form>
  </div>
</div>