[HTML&CSS] 반쯤 걸친 input 만들기

뭘 만들까?

input이 반쯤 걸친 header 만들기

 

 

 

내가 한 실수

    <header>
        <i class="fas fa-bars"></i>
        <span>library</span>
        <i class="fas fa-shopping-basket"></i>

              <div class="search-bar">
        <input type="text" placeholder="Search books..." />
        <i class="fas fa-search"></i>
      </div>
    </header>

input을 header에 포함시켜 버린 것!
때문에 head의 margin이 input을 움직일때마다 변동되었다.

 

 

올바른 방법

   <header>
        <i class="fas fa-bars"></i>
        <span>library</span>
        <i class="fas fa-shopping-basket"></i>
    </header>

      <div class="search-bar">
        <input type="text" placeholder="Search books..." />
        <i class="fas fa-search"></i>
      </div>

• header와 input은 따로 작성할 것
• search-bar는 relative로 움직이고, 안에 돋보기 아이콘을 absolute로 설정한 뒤 움직인다