개발일지08_인스타그램 클론 코딩(完)

저번주 목요일부터 오늘까지 인스타그램 클론 코딩이 진행되었다.

아래 사진을 일단 첨부하겠다.

인스타의 전체적인 외형을 따라서 Html과 Css를 작성하였고 현재 JS로 짠 코드는 거의 없다.

대표적인 기능으로는 3가지 정도가 있다.
1. ...(더보기)를 누르면 신고, 팔로우 취소, 게시물로 이동, 태그된 계정, 공유 대상, 링크 복사, 퍼가기, 취소 등의 옵션을 선택할 수 있는 모달창을 띄운다.
2. 모든 프로필 사진과 id에 href를 이용하여 나중에 개인 페이지를 만들었을때 손 쉽게 해당 아이디의 페이지로 이동할 수 있도록 처리해두었다.
3. 사진을 올린 수만큼 ">" 또는 "<" 버튼을 눌러 다음 사진이나 이전 사진으로 넘어갈 수 있게 carousel 기능을 추가하였다.

3번을 구현하면서 첫번째 게시물에는 적용이 되지만 두번째 게시물 부터는 div에서 같은 id를 사용하게되어 carousel기능이 적용되지 않았다. (아래의 코드와 같이)

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="la.jpg" alt="Los Angeles">
    </div>

    <div class="item">
      <img src="chicago.jpg" alt="Chicago">
    </div>

    <div class="item">
      <img src="ny.jpg" alt="New York">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="la.jpg" alt="Los Angeles">
    </div>

    <div class="item">
      <img src="chicago.jpg" alt="Chicago">
    </div>

    <div class="item">
      <img src="ny.jpg" alt="New York">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

한 html에서 여러개의 carousel을 사용하려면 각 항목들이 data-target으로 잡고있는 div의 id인 "myCarousel"과 data-target의 경로를 바꿔주며 id가 중복되는 오류를 해결할 수 있었다. (아래의 코드와 같이)

<div id="myCarousel_1" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel_1" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel_1" data-slide-to="1"></li>
    <li data-target="#myCarousel_1" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="la.jpg" alt="Los Angeles">
    </div>

    <div class="item">
      <img src="chicago.jpg" alt="Chicago">
    </div>

    <div class="item">
      <img src="ny.jpg" alt="New York">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<div id="myCarousel_2" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel_2" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel_2" data-slide-to="1"></li>
    <li data-target="#myCarousel_2" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="la.jpg" alt="Los Angeles">
    </div>

    <div class="item">
      <img src="chicago.jpg" alt="Chicago">
    </div>

    <div class="item">
      <img src="ny.jpg" alt="New York">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

전체적인 코드는 github 링크를 통해 확인해보시길!
https://github.com/woojin9606/Sparta/tree/master/2_IP