12시간

헤더를 만드는 시간이 12시간이나 걸렸다!

처음에는 잘 했으나, 인풋 박스를 구현하는 과정에서 너무 많은 시간을 잡아 먹었다!ㅠ

위 검색에서 포커싱 되었을때 돋보기를 없애고 플레이스홀더가 앞으로 나오는 효과 이다.

 <div id="serch_input" class="serch_input col-4 d-flex align-items-center">
            <div class="mag"><i class="fa-solid fa-magnifying-glass"></i></div>
            <input class="rounded serch_text" type="text" placeholder="검색">
        </div>

해당 mag 클래스를 display none 해주고 placeholder 의 left padding 을 당겨준다.. 아주 간단하지만 생각을 못한 나로써는 반성하게 된다.

input:focus::placeholder{
    padding-left: 0px;
}

포커싱 되었을떄 플레이스홀더의 패딩 값을 조정하는건 아주 간단했다.

근데 이것또한 js에서는 안된다는게 ...내가 못하는 거겠지.....

.mag{
    position: absolute;
    left: 30px;
    padding-right: 20px;
}

돋보기 모양은 position absolute 를 주어서 인풋박스 위에 그려 주었다.

input div는 relative를 주어서 absolute가 부모 요소에서 놀수 있게 해주었다.

완성된 클론 페이지 이다..

아이콘을 찾기 힘들어서 대충 넣어 줬다.

흐흐흐..역시 인스타그램 페이지는 반응형으로 만들기가 너무 어려워ㅠ