인스타그램 따라하기 7

.nav_container{
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 4rem;
    border-bottom: 1px solid #efefef;
}

nav bar를 고정시키기 위해 fixed시키고 z-index를 통해 앞으로 튀어나오게 했다.

그리고 이전에 있떤 margin값과 padding 값 등은 재조정하다보니 없애고, width를 100%로 주었다.

그 결과

background-color와 main div의 위치 조정이 필요할 것 같다.

white로 주고,  main div는 padding-top 값을 준다. 

그 결과

허술하지만 nav bar는 어느 정도 완성되었다.

 

이제 main right를 fixed로 하여 left main만 스크롤이 되도록 하겠다.

<div class="main_right">
  <div class="right_nav">
    <div id="fixed_nav">
      dadf
    </div>
  </div>
</div>

민석이가 보내준 사진

1번 방법을 통해서 fixed를 구현했다. 그래서 fixed_nav라는 div를 하나 만들었다.

.main_left{
    margin: 1rem;
    overflow: auto;
}
 
.main_right #fixed_nav{
    position: fixed;
    z-index: 1;
}

main left는 스크롤을 위해서 overflow를 주었고, right는 고정을 위해 fixed와 z-index를 주었다.

overflow를 주니까 스크롤바가 생겨서 예쁘지 않다. 

검색결과 아래의 코드를 넣으면 스크롤바가 없어진다고 해서 넣어보았다.

::-webkit-scrollbar { 
    display: none; 
}

그 결과

스크롤바 없이 fixed가 잘 적용되었다.

right main에 필요한 div 들은 left의 card를 만들듯이 하면 된다. 그리고 검색 input 태그에 text-align 속성을 통해 가운데에 위치하도록 했다.

그 결과

이제는 django를 이용하여 로그인, 댓글 등의 기능을 추가하고, ajax를 통해서 좋아요 기능을 추가하며 마무리하도록 하겠다.