개발_TIL | 2022-04-28 (9)

▷ 인스타 클론 코딩 시작![개인 프로젝트]

  오늘부터 다음주 월요일까지 프로젝트! 인스타 클론 코딩을 시작하였다.

  <필수 포함 내용>

  -Github에 레포지토리를 생성 후 깃으로 관리하기!

  -사이트의 헤더에 왼쪽 상단 로고 / 검색창 /우측 상단 아이콘

  -사이트의 본문에 두개의 단으로 나누기

  -게시글 3개 이상! 사진을 carousel을 이용해 여러장 표시!

  -댓글 작성하는 칸과 post 버튼 추가!

 

  아직 HTML / CSS가 익숙치 않아 헤더 부분부터 막혀버렸지만 깃허브를 통해 인스타 클론코딩을 참고해

  하나씩 이해해 나갔다.

완성된 헤더 부분!

  헤더부분을 완성하였는데 검색창에 돋보기를 넣는 법이 아직 이해가 되지않아 못 넣었다.

<header class="header-bar">
    <div class="tool-bar">
        <h1 class ="logo">Instagram</h1>
        <div class="search-bar">
            <input type="search" placeholder="검색"/>
        </div>
        <div class="icons-img">
            <i class="fa-solid fa-house"></i>
            <i class="fa-solid fa-paper-plane"></i>
            <i class="fa-solid fa-square-plus"></i>
            <i class="fa-solid fa-compass"></i>
            <i class="fa-solid fa-heart"></i>
            <i class="fa-solid fa-circle-user"></i>
        </div>
    </div>
</header>

fontawesome 사이트를 통해 우측 아이콘을 가지고 와서 넣어주었다.

첫 깃허브 사용!

   sourcetree를 통해 깃허브에 푸시해주었다.! 아직 자세히 배우지않아 푸시만 해주었지만, 좀더 알아보게되면

   README.md도 작성할 예정이다.