인스타그램 메인 페이지 클론

To do

미션 인스타 메인 클론코딩 하기
1. flex 속성으로 레이아웃 만들기
2. 상단 nav바 고정하기
3. input, button 테두리 제거 한 박스에 고정시키기

1. flex 속성으로 레이아웃 만들기
   로그인창 클로 할 때 position : absolute, relative를 사용했다가 엄청난 삽질을 했다. 이유는 위의 속성은 모든 박스를 붕 띄워서 이동시키기 때문에 박스들의 가로 정렬을 하느라 굉장히 애를 먹고 있었다. flex라는 속성을 사용하면 엄청 쉽게 사용이 가능하다. 사용 방법은 가로정렬할 박스에 display : flex;를 주고 justify-content: center;를 주면 쉽게 정렬이 가능하다.css flex 속성
   더 많은 속성은 블로그 참고!

2. 상단 nav바 고정하기
   nav바도 스크롤시 같이 사라지는게 아니고 항상 고정을 시켜야 한다.
   처음에 nav태그에 홀로 width를 사이즈를 주니 스크롤이 움직이지 않을 때는 고정이 되어있지만 아래로 내려가면 같이 올라가는 현상이 발생하다. 이럴 땐 position:fixed 를 준다. 하지만 이 속성도 박스를 붕 띄우기 때문에 바로 아래 오는 박스의 margin-top에 header의 값만큼 margin을 주어야 한다.
   비슷한 속성으로 sticky가 있지만 이 속성을 사용하기 위해서는 조건이 까다롭기 때문에 잘 사용 하지는 않는다.

3. input, button 테두리 제거 한 박스에 고정시키기

.writing-input{
  border: none;
  flex: 1;
}
.writing-btn{
  border: none;
  background-color: transparent;
  color: rgb(76, 144, 223);
  padding: 0;
}
.writing-input{
  border: none;
  flex: 1;
}
//한 박스의 차지 할 수 있는 공간의 1배 만큼 자리를 차지(input-box)

방법은 검색을 통해 쉽게 해결 가능하였다.
.writing-input{ border: none; flex: 1; } 이 부분도 자리를 차지 하게 해줄 때 꼭 필요한 부분이니 기억하고 있자!
input, button에 기본으로 주어지는 속성을 제거해줘야한다.

다음 작업에서 해야 할 일
1. 메인피드창 반응형으로 구현하기(미디어쿼리)
2. input에 글 입력 후 enter, 게시 click시 글 올라가게 하기
3. 보더에 그라데이션 주기
4. 글씨 추천 스토리 박스에 클 색 부분