인스타그램 클론 코딩 리뷰 (2)

hyounglee·2020년 8월 24일
1

Project

목록 보기
7/7
post-thumbnail

메인 페이지

메인페이지에서는 댓글의 input 창에서 enter키를 치거나 "게시" 버튼을 누르면 댓글이 추가되도록 만드는 과제가 주어졌다. createElement로 요소를 생성하여 input에 입력한 값이 추가되는 함수를 구현하는 조건이다.

Github : https://github.com/MiaJLee/westagram
Page Link : https://miajlee.github.io/westagram/main

main.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Instagram</title>
    <link href="style/common.css" rel="stylesheet" type="text/css" />
    <link href="style/main.css" rel="stylesheet" type="text/css" />
    <!-- favicon -->
    <link rel="icon" href="img/favicon.png">
    <link rel="instagram-icon" href="img/favicon.png">
  </head>
  <body>
    <!-- navigation -->
    <nav>
      <div class="nav-container">
        <div class="nav-1">
            <!-- <img src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/logo.png" alt="logo_img">
            <div class="vl"></div> -->
            <img class="logo_instagram_txt" src="img/logo_text.png" alt="logo_text">
        </div>
        <input id="searchInput" type="search" class="input-search" placeholder="검색">
        <div class="nav-2">
          <img src="img/home.png" alt="">
          <img src="img/dm.png" alt="DM">
          <img src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/explore.png" alt="탐색">
          <img src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/heart.png" alt="하트">
          <img class="pic" src="https://scontent-gmp1-1.cdninstagram.com/v/t51.2885-19/s150x150/71022783_513111249480681_2188078115513696256_n.jpg?_nc_ht=scontent-gmp1-1.cdninstagram.com&_nc_ohc=7Rl_bMO8TN4AX9C-AKS&oh=64741fc0f2635ebb63f94d5285798e08&oe=5F6A0524" alt="마이페이지">
        </div>
      </div>
    </nav>
    <!-- main -->
    <main>
      <div class="feeds">
        <!-- article -->
        <article>
          <header>
            <div class="profile-of-article">
              <img class="img-profile pic" src="https://scontent-gmp1-1.cdninstagram.com/v/t51.2885-19/s320x320/28434316_190831908314778_1954023563480530944_n.jpg?_nc_ht=scontent-gmp1-1.cdninstagram.com&_nc_ohc=srwTEwYMC28AX8gftqw&oh=98c7bf39e441e622c9723ae487cd26a0&oe=5F68C630" alt="dlwlrma님의 프로필 사진">
              <span class="userID main-id point-span">dlwlrma</span>
            </div>
            <img class="icon-react icon-more" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/more.png" alt="more">
          </header>
          <div class="main-image">
            <img src="https://scontent-gmp1-1.cdninstagram.com/v/t51.2885-15/sh0.08/e35/s640x640/90088726_197080594911885_9097741115940523483_n.jpg?_nc_ht=scontent-gmp1-1.cdninstagram.com&_nc_cat=109&_nc_ohc=GoaP3WqLbWoAX-aF6Sb&oh=417a759b780627bd9f2ee22a5590d99d&oe=5F6B3319" alt="dlwlrma님의 피드 사진" class="mainPic">
          </div>
          <div class="icons-react">
            <div class="icons-left">
              <img class="icon-react" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/heart.png" alt="하트">
              <img class="icon-react" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/comment.png" alt="말풍선">
              <img class="icon-react" src="img/dm.png" alt="DM">  
            </div>
            <img class="icon-react" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/bookmark.png" alt="북마크">
          </div>
          <!-- article text data -->
          <div class="reaction">
            <div class="liked-people">
              <img class="pic" src="https://scontent-gmp1-1.cdninstagram.com/v/t51.2885-19/s150x150/89296253_1521373131359783_504744616755462144_n.jpg?_nc_ht=scontent-gmp1-1.cdninstagram.com&_nc_ohc=_9raiaB11CAAX_u7RhK&oh=c162d17b1570f31f94a1a28e19167609&oe=5F6C7A90" alt="johnnyjsuh님의 프로필 사진">
              <p><span class="point-span">johnnyjsuh</span><span class="point-span">외 2,412,751명</span>이 좋아합니다</p>
            </div>
            <div class="description">
              <p><span class="point-span userID">dlwlrma</span><span class="at-tag">@wkorea @gucci</span> 🌱</p>
            </div>
            <div class="comment-section">
              <ul class="comments">
                <li>
                  <span><span class="point-span userID">postmalone</span>내가 입으면 더 잘어울릴 것 같아</span>
                  <img class="comment-heart" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/heart.png" alt="하트">
                </li>
                <!-- input 값 여기에 추가 -->
              </ul>
              <div class="time-log">
                <span>32분 전</span>
              </div>
            </div>
          </div>
          <div class="hl"></div>
          <div class="comment">
            <input id="input-comment" class="input-comment" type="text" placeholder="댓글 달기..." >
            <button type="submit" class="submit-comment" disabled>게시</button>
          </div>
        </article>
        <article>
          <header>
            <div class="profile-of-article">
              <img class="img-profile pic" src="https://scontent-gmp1-1.cdninstagram.com/v/t51.2885-19/s150x150/71022783_513111249480681_2188078115513696256_n.jpg?_nc_ht=scontent-gmp1-1.cdninstagram.com&_nc_ohc=7Rl_bMO8TN4AX9C-AKS&oh=64741fc0f2635ebb63f94d5285798e08&oe=5F6A0524" alt="thisisyourhyung님의 프로필 사진">
              <span class="userID main-id point-span">thisisyourhyung</span>
            </div>
            <img class="icon-react icon-more" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/more.png" alt="more">
          </header>
          <div class="main-image">
            <img src="https://scontent-gmp1-1.cdninstagram.com/v/t51.2885-15/e35/s1080x1080/79434917_534650640475337_2021528862608628648_n.jpg?_nc_ht=scontent-gmp1-1.cdninstagram.com&_nc_cat=105&_nc_ohc=o9KdUxfdCisAX8rVvat&oh=bf1dab8ef73aca5ca6ad22b637d9b670&oe=5F6D5ABB" alt="thisisyourhyung님의 피드 사진" class="mainPic">
          </div>
          <div class="icons-react">
            <div class="icons-left">
              <img class="icon-react" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/heart.png" alt="하트">
              <img class="icon-react" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/comment.png" alt="말풍선">
              <img class="icon-react" src="img/dm.png" alt="DM">  
            </div>
            <img class="icon-react" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/bookmark.png" alt="북마크">
          </div>
          <!-- article text data -->
          <div class="reaction">
            <div class="liked-people">
              <img class="pic" src="https://scontent-gmp1-1.cdninstagram.com/v/t51.2885-19/s320x320/88655311_532875984007590_3393720833305214976_n.jpg?_nc_ht=scontent-gmp1-1.cdninstagram.com&_nc_ohc=QsdbsVQx8IsAX9_Fftk&oh=a6515b76d63f7ca3609c211624c1cd60&oe=5F6A4263" alt="_jeongjaehyun님의 프로필 사진">
              <p><span class="point-span">_jeongjaehyun</span><span class="point-span">외 4,612,203명</span>이 좋아합니다</p>
            </div>
            <div class="description">
              <p><span class="point-span userID">thisisyourhyung</span>코로나 언제 사라지나 ㅠㅠ 여행 가고 싶다~~</p>
            </div>
            <div class="comment-section">
              <ul class="comments">
                <li>
                  <span><span class="point-span userID">williamhammington</span>나도 호주 가고 싶다!</span>
                  <img class="comment-heart" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/heart.png" alt="하트">
                </li>
                <!-- input 값 여기에 추가 -->
              </ul>
              <div class="time-log">
                <span>1시간 전</span>
              </div>
            </div>
          </div>
          <div class="hl"></div>
          <div class="comment">
            <input id="input-comment2" class="input-comment" type="text" placeholder="댓글 달기..." >
            <button type="submit" class="submit-comment" disabled>게시</button>
          </div>
        </article>

      </div>
      <!-- main-right -->
      <div class="main-right">
        <div class="myProfile">
          <img class="pic" src="https://scontent-gmp1-1.cdninstagram.com/v/t51.2885-19/s150x150/71022783_513111249480681_2188078115513696256_n.jpg?_nc_ht=scontent-gmp1-1.cdninstagram.com&_nc_ohc=7Rl_bMO8TN4AX9C-AKS&oh=64741fc0f2635ebb63f94d5285798e08&oe=5F6A0524" alt="thisisyourhyung님의 프로필 사진">
          <div>
            <span class="userID point-span">thisisyourhyung</span>
            <span class="sub-span">JIHYUNG LEE</span>  
          </div>
        </div>
        <!-- story section -->
        <div class="section-story">
          <div class="menu-title">
            <span class="sub-title">스토리</span>
            <span class="find-more">모두 보기</span>
          </div>
          <ul class="story-list">
            <li>
              <div class="gradient-wrap">
                <img class="img-profile story" src="https://scontent-gmp1-1.cdninstagram.com/v/t51.2885-19/s320x320/64219646_866712363683753_7365878438877462528_n.jpg?_nc_ht=scontent-gmp1-1.cdninstagram.com&_nc_ohc=nBT2Cnh5x6kAX9FNW46&oh=63c4eae00baaeef86eedc8ca79499511&oe=5F6B31A0" alt="wecode_bootcamp님의 프로필 사진">
              </div>
              <div class="profile-text">
                <span class="userID point-span">wecode_bootcamp</span>
                <span class="sub-span">12분 전</span>  
              </div>
            </li>
            <li>
              <div class="gradient-wrap">
                <img class="img-profile story" src="https://scontent-gmp1-1.cdninstagram.com/v/t51.2885-19/s320x320/47581322_331313240788424_7580673034705436672_n.jpg?_nc_ht=scontent-gmp1-1.cdninstagram.com&_nc_ohc=fkWaVb4rpLMAX_mkCR5&oh=822f6068b6e28481ccd3fd7820061df1&oe=5F6A82C6" alt="han_ye_seul님의 프로필 사진">
              </div>
              <div class="profile-text">
                <span class="userID point-span">han_ye_seul</span>
                <span class="sub-span">28분 전</span>  
              </div>
            </li>
            <li>
              <div class="gradient-wrap">
                <img class="img-profile story" src="https://scontent-gmp1-1.cdninstagram.com/v/t51.2885-19/s320x320/83054317_174958120526515_9120446663184351232_n.jpg?_nc_ht=scontent-gmp1-1.cdninstagram.com&_nc_ohc=tYlvJUCoTKEAX_gZZa2&oh=a65657b48898f84fd25762a9a51a70d7&oe=5F6A8C65" alt="dntlrdl님의 프로필 사진">
              </div>
              <div class="profile-text">
                <span class="userID point-span">dntlrdl</span>
                <span class="sub-span">40분 전</span>  
              </div>
            </li>
            <li>
              <div class="gradient-wrap">
                <img class="img-profile story" src="https://scontent-gmp1-1.cdninstagram.com/v/t51.2885-19/s320x320/104003354_716384015830603_8920819290329712932_n.jpg?_nc_ht=scontent-gmp1-1.cdninstagram.com&_nc_ohc=98qm88VYcqoAX_OFQ6W&oh=0000cab3adec26de3231e7dcfd4022b2&oe=5F6BC859" alt="i_icaruswalks님의 프로필 사진">
              </div>
              <div class="profile-text">
                <span class="userID point-span">i_icaruswalks</span>
                <span class="sub-span">56분 전</span>  
              </div>
            </li>
          </ul>
        </div>
        <!-- recommendation section -->
        <div class="section-recommend">
          <div class="menu-title">
            <span class="sub-title">회원님을 위한 추천</span>
            <span class="find-more">모두 보기</span>
          </div>
          <ul class="recommend-list">
            <li>
              <div class="recommend-friend-profile">
                <img class="img-profile" src="https://scontent-gmp1-1.cdninstagram.com/v/t51.2885-19/s320x320/69067759_957976681207922_446652332218777600_n.jpg?_nc_ht=scontent-gmp1-1.cdninstagram.com&_nc_ohc=pFcXhsPcINYAX-G9HiY&oh=4c1ac17f73340c512ae70d383c468b5a&oe=5F6A4AF8" alt="renebaebae님의 프로필 사진">
                <div class="profile-text">
                  <span class="userID point-span">renebaebae</span>
                  <span class="sub-span">hi_sseulgi님 외 2명이 팔로우합니다</span>
                </div>
              </div>
              <span class="btn-follow">팔로우</span>
            </li>
            <li>
              <div class="recommend-friend-profile">
                <img class="img-profile" src="https://scontent-gmp1-1.cdninstagram.com/v/t51.2885-19/s320x320/88655311_532875984007590_3393720833305214976_n.jpg?_nc_ht=scontent-gmp1-1.cdninstagram.com&_nc_ohc=QsdbsVQx8IsAX9_Fftk&oh=a6515b76d63f7ca3609c211624c1cd60&oe=5F6A4263" alt="_jeongjaehyun님의 프로필 사진">
                <div class="profile-text">
                  <span class="userID point-span">_jeongjaehyun</span>
                  <span class="sub-span">johnnyjsuh님이 팔로우합니다</span>  
                </div>
              </div>
              <span class="btn-follow">팔로우</span>
            </li>
            <li>
              <div class="recommend-friend-profile">
                <img class="img-profile" src="https://scontent-gmp1-1.cdninstagram.com/v/t51.2885-19/s320x320/111281038_926213341219564_1940619922197712205_n.jpg?_nc_ht=scontent-gmp1-1.cdninstagram.com&_nc_ohc=ITcRMERk0UYAX8KwJyW&oh=54d4847a6cb863301315313b83cf1551&oe=5F6BC0E9" alt="leehi_hi님의 프로필 사진">
                <div class="profile-text">
                  <span class="userID point-span">leehi_hi</span>
                  <span class="sub-span">jennierubyjane님 외 5명이 팔로우합...</span>  
                </div>
              </div>
              <span class="btn-follow">팔로우</span>
            </li>
          </ul>
        </div>
        <footer>
          <p class="insta-sccript">
            소개 ∙ 도움말 ∙ 홍보 센터 ∙ API ∙ 채용 정보 ∙ 개인정보처리방침 ∙ <br>약관 ∙ 위치 ∙ 인기계정 ∙ 해시태그 ∙ 언어
            <br><br>
            © 2020 INSTAGRAM FROM FACEBOOK
          </p>
        </footer>
      </div>
    </main>
    <script src="js/main.js"></script>
  </body>
</html>

하드코딩에 가까운 HTML. 정말 열심히 작업했다.

common.css

* {
    box-sizing: border-box;
    font-family: 'helvetica neue', 'Apple SD Gothic Neo', Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: #fafafa;
    padding: 0;
    margin: 0;
}
p, span {
    font-size: 14px;
}

main.css

/* general */
ul,li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-position: inside;
}
footer p {
    margin-top: 18px;
    font-size: 11px;
    color: #c7c7c7;
    line-height: 18px;
}
.pic {
    border-radius: 100%;
}
span.userID {
    margin-right: 5px;
}
span.sub-span {
    font-size: 12px;
    color: #8e8e8e;
}
span.point-span {
    font-weight: 500;
    font-size: 14px;
    color: #262626;
}
/* nav */
nav {
    width: 100%;
    height: 54px;
    position: fixed;
    display: flex;
    justify-content: center;
    background-color: white;
    border-bottom: 1px solid #DBDBDB;
}
.nav-container {
    max-width: 1000px;
    padding: 0 20px;
    display: flex;
    align-items: center;
}
nav div.nav-1, nav div.nav-2 {
    width: 370px;
    display: flex;
    align-items: center;
}
div.nav-2 {
    justify-content: flex-end;
}
nav img {
    height: 22px;
}
.vl {
    height: 22px;
    margin: 0 10px;
    border-left: 1px solid #262626;
}
.logo_instagram_txt {
    height: 30px;
}
.nav-2 img {
    margin-left: 20px;
}
.input-search {
    width: 200px;
    height: 12px;
    padding: 7px;
    box-sizing: content-box;
    background-color: #fafafa;
    border: 1px solid #DBDBDB;
    border-radius: 3px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAACI0lEQVRIie2Uv2sTcRjGP+/lKqZNLUVrp2wq/mhBJxddWnF0SOsVEhpwKEUCgv9A5zgLocGtUq+cQZCMWg/r5FAQWkFXaatEEfxRhFzu+zqkwZL2rqeufZY7eO95Pt/vA/fCoQ6QRA08z0sHoc4IMqlwDugHNgVZVqPVQsFZ/WeA69YuG8xjIBvhU5DKz+9f787OzgZxACsi3AeyCq8Vcq2mfWJwIHNU1BpRpQz8Ai31Hxt8pKqRLey5QbsW3gNZFa0esaTkOE7YbVpc9C5i8Rw4LiqlfP5mJdENglBnOiePCgcoFJw3onoLQEXnfN+3EwEEmdx5vRcV3lE+P1VHWAOGtxqNq4kACucBwqa9Ehf+xyArO88LiQBAH4Ax37YT5av+ABDIJAVsAaTS6VNJACKcaYPYTAYQfQFgGatwULjneUPAdcCEKV4mA4QyD6gId1y3dinKpKoShNynXU296DgfEgHav79UgF6DefbQ9W7sd/LFpdoSMAWgYspR4bDPqqhWqz2ZgUEXZWLnizVUVkTMNiqntV1L3y7L2zCwx4rFXCMRANoVuG7ttorOAcNdYwPUVUzZUuuBwkgcJHaP+L5vb3z6ciWljKqYXsTaCC191el8YeHJSbuntawwIrDeCuzxbkgsIIk8zxsKDMsoo8A700qNTU9PfOzM92zTv5XjOJ/Dpn1NYB04a9nh093z/wYAFIu5RiuwxxFWgdgddqg9+g0TJuLzCuoJngAAAABJRU5ErkJggg==");
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: 38% center;
    text-indent: 10%;
    font-size: 14px;
}
.input-search:focus {
    background-position: 4% center;
    outline: none;
    }
.input-search::placeholder, .input-search:not(:focus) {
    text-align: center;
    vertical-align: center;
    font-weight: 300;
    font-size: 14px;
    color: #8e8e8e;
}
.input-search:focus::placeholder {
    text-align: start;
}
.input-search::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 14px;
    width: 14px;
    background-repeat: no-repeat;
    background-size: 13px;
    background-position: center left;
    background-image: url('../img/cancel.png');
  }
/* main */
main {
    width: 960px;
    margin: 0 auto;
    padding-top: 94px;
    padding-bottom: 40px;
}
.main-right {
    width: 310px;
    display: inline-block;
    position: fixed;
    top: 94px;
}
.feeds {
    width: 614px;
    margin-right: 34px;
    display: inline-block;
}
article, .section-story, .section-recommend {
    background-color: #fff;
    border-radius: 3px;
    border: 1px solid #DBDBDB;
}
article {
    margin-bottom: 60px;
}
.section-story, .section-recommend {
    width: 310px;
    padding: 14px 16px;
    overflow-y: hidden;
}
.section-story {
    height: 212px;
    margin-bottom: 20px;
}
.section-recommend {
    height: 180px;
}
/* article */
header {
    height: 60px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.profile-of-article {
    display: flex;
    align-items: center;
}
.img-profile {
    width: 32px;
    height: 32px;
    border: 1px solid #fafafa;
    border-radius: 100%;
}
.main-image img {
    width: 612px;
}
.main-id {
    margin-left: 14px;
}
.icon-more {
    justify-self: end;
}
.icons-react {
    height: 40px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.icon-react {
    width: 24px;
    height: 24px;
}
.icons-left {
    display: flex;
    align-items: center;
}
.icons-left .icon-react {
    margin-right: 12px;
}
/* article text data */
.reaction {
    padding: 0 16px;
}
.liked-people {
    display: flex;
    align-items: center;
    height: 18px;
    margin: 2px 0 8px 0;
}
.liked-people img {
    display: inline-block;
    margin-right: 4px;
    width: 20px;
    height: 20px;
    border: 1px solid #fafafa;
}
.liked-people p {
    display: inline-block;
    color: #262626;
    font-size: 14px;
}
.description {
    display: flex;
    align-items: center;
    height: 18px;
}
span.at-tag {
    color: #00376B;
}
ul.comments {
    margin-top: 5px;
}
ul.comments li {
    height: 21px;
    display: flex;
    justify-content: space-between;
    color: #262626;
    font-size: 14px;
}
img.comment-heart {
    width: 12px;
    height: 12px;
}
div.time-log {
    margin-bottom: 8px;
}
div.time-log span {
    height: 18px;
    font-size: 12px;
    color: #8e8e8e;
}
.hl {
    border-top: 1px solid #DBDBDB;
    width: 612px;
}
/* comment input */
.input-comment {
    font-size: 14px;
    width: 560px;
    height: 18px;
    padding: 28px 16px;
    border-style: none;
    box-sizing: border-box;
    color: #262626;
}
.input-comment:focus {
	outline: none;
}
.input-comment::placeholder {
    color: #8e8e8e;
}
button.submit-comment {
    color: #0095f6;
    background-color: #fff;
    border-style: none;
    height: 40px;
    width: 40px;
    padding: 4px;
    font-size: 14px;
    font-weight: 600;
}
.submit-comment:disabled {
    color: #B9DFFC;
}
button.submit-comment:focus {
    outline: none;
}
/* main-right */
.myProfile {
    height: 56px;
    margin-top: 10px;
    margin-bottom: 25px;
    padding-left: 12px;
    display: flex;
    align-items: center;
}
.myProfile img {
    width: 56px;
    height: 56px;
}
.myProfile div {
    display: inline-block;
    margin-left: 14px;
}
.myProfile div span {
    display: block;
}
.myProfile div span.userID {
    margin-bottom: 4px;
}
/* story & recommendation */
.menu-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.sub-title {
    font-size: 14px;
    color: #8e8e8e;
    font-weight: 600;
}
.find-more {
    font-size: 12px;
    font-weight: 600;
    color: #262626;
}
.story-list li, .recommend-list li {
    display: flex;
    align-items: flex-start;
}
ul.story-list img.story {
    box-sizing: content-box;
    border: 2px solid #fff;
}
div.gradient-wrap {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    background: radial-gradient(circle at bottom left, #F58529 20%, #C42D91);
}
ul.story-list .profile-text {
    margin-top: 3px;
}
.profile-text {
    display: inline-block;
    margin: 0 0 10px 8px;
}
.profile-text span {
    display: block;
}
.profile-text span.userID {
    margin-bottom: 2px;
}
.recommend-list li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.btn-follow {
    padding-top: 7px;
    color: #0095f6;
    font-weight: 600;
    font-size: 12px;
}
.recommend-friend-profile {
    display: flex;
    align-items: flex-start;
}

CSS 주요 이슈들

**CSS 이슈 💥 **
css에서 이미지파일과 같이 다른 폴더에 있는 소스를 가져오기 위해서는 url('../img/파일명.png')와 같은 방식으로 작성해야 한다. 터미널에서 상위 디렉토리에 접근하기 위해 사용되는 더블닷이 동일하게 사용된다. HTML을 작성하듯이 url('img/파일명.png') 라고 작성하면 소스 경로를 'style/img/파일명.png'로 찾게 된다.

.input-search::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 14px;
    width: 14px;
    background-repeat: no-repeat;
    background-size: 13px;
    background-position: center left;
    background-image: url('../img/cancel.png');
  } 

**CSS 이슈 💥 **
인스타그램의 스토리 (프로필 원형 사진 외곽의 그라디언트가 적용된 border )를 만들기 위해서 border-radius 값이 100%img 자체에 padding값과 그라디언트가 적용된 border값을 적용했으나 자꾸 원이 사각형이 되는 오류가 발생했다.
구글링해보니 radius 값이 주어진 border에는 그라디언트 적용을 하지 못한다는 글을 봤는데, 아직 확신은 없다. 아무튼, 문제 해결을 위해 imgdiv로 감싸고, divbackground-color에 그라디에이션을 주는 방식을 택했다. img 외곽에는 padding없이 흰 border를 주는 방식으로 마치 뒤 divborder처럼 보이게 만들었다.

ul.story-list img.story {
    box-sizing: content-box;
    border: 2px solid #fff;
}
div.gradient-wrap {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    background: radial-gradient(circle at bottom left, #F58529 20%, #C42D91);
}

**CSS 이슈 💥 **
실제 인스타그램 메인페이지의 경우 우측 섹션은 스크롤이 내려가도 위치가 고정되어있는 것을 알 수 있다. 이를 구현하고 싶어서 div.feedsarticle을 하나 더 추가하고 display: flex, justify-content: center로 구성되었던 메인을 margin: 0 auto로 가운데 정렬 하는 방식으로 수정하였다. 이 메인을 기준으로 div.main-rightfixed 되게 만들어서 스크롤시에도 우측 메인 섹션은 위치가 유지될 수 있는 화면을 만들었다.
(구글링해보니 position과 display: flex를 한 클래스에 부여하면 안된다고 한다.)

main {
    width: 960px;
    margin: 0 auto;
    padding-top: 94px;
    padding-bottom: 40px;
}
.main-right {
    width: 310px;
    display: inline-block;
    position: fixed;
    top: 94px;
}
.feeds {
    width: 614px;
    margin-right: 34px;
    display: inline-block;
}

main.js

const commentInput = document.getElementById('input-comment');
const commentBtn = document.getElementsByClassName('submit-comment')[0];
const commentList = document.getElementsByClassName('comments')[0];

commentInput.addEventListener('keypress', function(e){
    if (commentInput.value) {
        if (e.which === 13) {
            var newComment = document.createElement('li')
            newComment.innerHTML = `<span><span class="point-span userID">thisisyourhyung</span>` + this.value + `</span><img class="comment-heart" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/heart.png" alt="하트">`;
            commentList.appendChild(newComment);
            this.value = "";
        }
    }
})

commentBtn.addEventListener('click', function(){
    if (commentInput.value) {
        var newComment = document.createElement('li')
        newComment.innerHTML = `<span><span class="point-span userID">thisisyourhyung</span>` + commentInput.value + `</span><img class="comment-heart" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/heart.png" alt="하트">`;
        commentList.appendChild(newComment);
        commentInput.value = "";
    }
})

commentInput.addEventListener('keyup', function(event) {
    if (commentInput.value) {
        commentBtn.disabled = false;
    }
    else {
        commentBtn.disabled = true;
    }
})

자바스크립트 간단 리뷰 💥 !

"게시" 버튼을 누르거나 엔터키를 쳤을때(event) 댓글 인풋에 값이 있는 경우에만 createElement로 값이 담긴 <li>를 생성하고, 이를 댓글 리스트에 innerHTML로 추가하는 함수를 만들었다. 함수가 실행되고 나서는 댓글 인풋에 남아있는 value 값이 사라진다. 추가로 인풋창에 'keyup' 이벤트가 발생하고 value가 생길 경우, "게시" 버튼이 활성화되는 함수를 만들었다.

profile
(~˘▾˘)~♫❝ 쉽게만 살아가면 재미없어 빙고 .ᐟ ❞•*¨*•.¸¸♪

0개의 댓글