TIL_38_with Wecode 028 html, css, javascript 인스타그램 클론-2

JIEUN·2021년 3월 3일
0
post-thumbnail

인스타그램 클론 두 번째. 메인페이지에 대한 기록을 해보겠다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Westagram main page</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
    <link rel="stylesheet" type="text/css" href="main.css">
    <link rel="stylesheet" type="text/css" href="reset.css">
    <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
</head>
<body>
    <nav class="header">
        <div class="header_container">
            <h1 class="logo">Westagram</h1>
            <div class="header_bar">
                <input class="search_bar" type="text" />
                <i class="fas fa-search"></i>
            </div>
            <div class ="icons">
                <i class="fas fa-home"></i>
                <i class="far fa-comments"></i>
                <i class="far fa-compass"></i>
                <i class="far fa-heart"></i>
                <img class="profile_img" src="https://media.vlpt.us/images/poohv7/post/d60edb23-650d-4c2b-8880-b5b6aa66d320/my%20profile.jpg">
            </div>
        </div>
    </nav>
    <main class="main_container">
        <section class="whole_section">
            <div class="feeds">
                <section class="feeds_header">
                    <div class="account_info">
                        <img class="profile" src="https://media.vlpt.us/images/poohv7/post/d60edb23-650d-4c2b-8880-b5b6aa66d320/my%20profile.jpg">
                        <div class="account_id">yang_ji_eun</div>
                        <div class="more_info">•••</div>
                    </div>
                    <div class="wrap_location">
                        <div class="location">Brisbane Australia</div>
                    </div>
                </section>
                <section class="section_main">
                    <img class="main_photo" src="https://media.vlpt.us/images/poohv7/post/ab43d22f-6e37-4150-be54-3e425a973086/main%20photo.jpg">
                </section>
                <section class="section_footer">
                    <div class="icons2">
                        <i class="fas fa-grin-hearts" onclick="change_color()"></i>
                        <i class="far fa-comment-dots"></i>
                        <i class="far fa-paper-plane"></i>
                    </div>
                    <i class="far fa-bookmark"></i>
                </section>
                <section class="section_input">
                    <div class="like_number">좋아요 20,549개</div>
                    <div class="section_description">
                        <div class="wrap_description">
                        <div class="nickname">yang_ji_eun</div>
                        <div class="description">조명맛집들</div>
                    </div>
                    </div>
                    <div class="time">5시간 전</div>
                </section>
                <section class="section_comment">
                    <div class="comment_box">
                        <i class="far fa-smile"></i>
                        <input class="input_comment" type="text" placeholder="댓글 달기..." />
                    </div>
                    <div class="enter">게시</div>
                </section>
            </div>
            <section class="wrap_sideright">
            <div class="side_right">
                <div class="about_me">
                    <img class="me" src="https://media.vlpt.us/images/poohv7/post/d60edb23-650d-4c2b-8880-b5b6aa66d320/my%20profile.jpg">
                    <div class="yang">yang_ji_eun</div>
                </div>
                    <div class="first">
                    <div class="id">지은</div>
                    <div class="change">전환</div>
                </div>
                <div class="second">
                <div class="recommend">회원님을 위한 추천</div>
                <div class="recommend_side">모두 보기</div>
            </div>
            <div class="about_me">
                <img class="me" src="https://media.vlpt.us/images/poohv7/post/8011c9a2-97ac-4f26-9a59-4226809b10fa/KakaoTalk_20210225_133013188.jpg">
                <div class="yang">wombat</div>
            </div>
                <div class="first">
                <div class="their_description">안녕하세요 웜뱃입니다.</div>
                <div class="change">팔로우</div>
            </div>
            <div class="about_me">
                <img class="me" src="https://media.vlpt.us/images/poohv7/post/821a116f-1508-4417-b100-905ffa4e473d/KakaoTalk_20210225_132834557.jpg">
                <div class="yang">cat</div>
            </div>
                <div class="first">
                <div class="their_description">My favorite food is cake! F4F</div>
                <div class="change">팔로우</div>
            </div>
            <div class="about_me">
                <img class="me" src="https://media.vlpt.us/images/poohv7/post/34d9f7e2-0921-46bc-aacc-6a33a85781c5/KakaoTalk_20210225_133012878.jpg">
                <div class="yang">platypus</div>
            </div>
                <div class="first">
                <div class="their_description">92년생, 주로 물가에 서식</div>
                <div class="change">팔로우</div>
            </div>
            <div class="about_me">
                <img class="me" src="https://media.vlpt.us/images/poohv7/post/2b4246cc-4cb9-46ee-a9d8-fb938612384f/KakaoTalk_20210225_133011781.jpg">
                <div class="yang">i_am_a_dog</div>
            </div>
                <div class="first">
                <div class="their_description">강아지(30)</div>
                <div class="change">팔로우</div>
            </div>
            <div class="about_me">
                <img class="me" src="https://media.vlpt.us/images/poohv7/post/be1b1e79-b823-4aae-9cfb-096281eda8e4/1.jpg">
                <div class="yang">quokka</div>
            </div>
                <div class="first">
                <div class="their_description">이런 귀한 곳에 누추한 분이...</div>
                <div class="change">팔로우</div>
            </div>
        </div>
            </section>
            </section>
        </main>
        <script type="text/javascript" src="main.js"></script>    
    </body>
</html>

div 태그를 남발하고 싶지 않았는데 묶어줄 건 묶어줘야 정렬을 해줄 수가 있어서.. 일단 이게 나의 최선이다ㅠ 레이아웃 잡는건 조금 귀찮고 번거로울 순 있지만 그래도 시간만 주어진다면 어떻게든 해낼 수 있어서 레이아웃에 대한 두려움은 확실히 없어진 것 같다. 네이밍은 아직도 좀 어렵다. 메인페이지 역시 코드 리뷰 후 수정 내용도 포스팅 하겠다.

body {
  width: 100%;
}
.header {
  position: fixed;
  width: 100%;
  z-index: 5;
  background-color: white;
  border: 1px solid lightgray;
}
.header_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}
.logo {
  margin-left: 150px;
  font-family: "Lobster", cursive;
  font-size: 25px;
}
.header_bar {
  display: flex;
  justify-content: center;
  align-items: center;
}
.search_bar {
  width: 170px;
  height: 20px;
  border: 0.5px solid lightgray;
  border-radius: 3px;
}
.fa-search {
  order: -1;
}
.icons {
  display: flex;
  margin-right: 170px;
}
.fa-home,
.fa-comments,
.fa-compass,
.fa-heart {
  font-size: 23px;
  margin-right: 17px;
}
.profile_img {
  width: 22px;
  height: 22px;
  border-radius: 70%;
  margin-right: 17px;
}
.main_container {
  position: relative;
  width: 900px;
  height: 1600px;
}
.whole_section {
  position: relative;
}
.feeds {
  position: absolute;
  width: 600px;
  left: 17%;
  margin-top: 100px;
  border: 0.5px solid lightgray;
}
.feeds_header {
  margin-top: 15px;
  margin-left: 10px;
  margin-bottom: 15px;
}
.account_info {
  display: flex;
  justify-content: space-between;
}
.profile {
  width: 35px;
  height: 35px;
  border-radius: 70%;
}
.account_id {
  font-size: 13px;
  font-weight: bold;
  margin-top: 4px;
  margin-right: 430px;
}
.more_info {
  margin-top: 10px;
  margin-right: 10px;
}
.wrap_location {
  display: flex;
  flex-direction: row;
}
.location {
  font-size: 13px;
  margin-left: 48px;
  margin-top: -13px;
}
.main_photo {
  width: 600px;
  height: 750px;
}
.section_footer {
  display: flex;
  justify-content: space-around;
}
.fa-grin-hearts,
.fa-comment-dots,
.fa-paper-plane,
.fa-bookmark {
  font-size: 25px;
  margin-top: 5px;
  margin-left: 7px;
}
.fa-bookmark {
  margin-right: 10px;
}
.fa-grin-hearts {
  cursor: pointer;
}
.icons2 {
  margin-right: 450px;
}
.like_number {
  font-size: 15px;
  font-weight: bold;
  margin-top: 10px;
  margin-left: 10px;
}
.wrap_description {
  display: flex;
}
.section_description {
  margin-top: 8px;
  margin-left: 11px;
}
.nickname {
  font-weight: bold;
}
.description {
  font-size: 13px;
  margin-top: 4px;
  margin-left: 6px;
}
.time {
  font-size: 10px;
  margin-top: 20px;
  margin-left: 10px;
  color: gray;
}
.section_comment {
  display: flex;
  justify-content: space-around;
  width: 600px;
  margin-top: 10px;
  border-top: 0.5px solid lightgray;
}
.comment_box {
  margin-top: 10px;
}
.fa-smile {
  font-size: 23px;
  padding-top: 10px;
}
.input_comment {
  width: 500px;
  height: 40px;
  font-size: 14px;
  margin-left: 5px;
  border: 0;
}
.enter {
  color: lightskyblue;
  font-size: 15px;
  font-weight: bold;
  margin-top: 25px;
}
.side_right {
  position: fixed;
  z-index: 6;
  width: 300px;
  top: 100px;
  right: 180px;
}
.about_me {
  display: flex;
  justify-content: row;
  margin: 10px;
}
.me {
  width: 50px;
  height: 50px;
  border-radius: 70%;
}
.yang {
  margin-top: 12px;
  margin-left: 13px;
  font-size: 14px;
  font-weight: bold;
}
.first {
  display: flex;
  justify-content: space-between;
}
.id {
  color: grey;
  margin-top: -30px;
  margin-left: 72px;
  font-size: 14px;
}
.change {
  color: rgb(40, 169, 250);
  margin-top: -40px;
  margin-right: 10px;
  font-size: 12px;
  font-weight: bold;
}
.second {
  display: flex;
  justify-content: space-between;
}
.recommend {
  color: rgb(125, 139, 153);
  margin-top: 13px;
  margin-left: 13px;
  font-size: 14px;
  font-weight: bold;
}
.recommend_side {
  margin-top: 13px;
  margin-right: 10px;
  font-size: 13px;
  font-weight: bold;
}
.their_description {
  color: grey;
  margin-top: -30px;
  margin-left: 73px;
  font-size: 12px;
}

헤더 바가 픽스 되어야하는데 자꾸 메인 뒤에 숨는 현상이 발생하여 나에게 한 줄기의 빛이 되었던 z-index ! 알고있던 기능임에도 생각을 못했던 나는 바보.. MDN z-index

function change_color(){
  let clickLike = document.getElementsByClassName('fa-grin-hearts')[0];
  /* 아이콘을 누르면 색깔이 바뀌게 하기 위해 
  html문서에서 class 네임을 불러왔다.*/
  if (clickLike.style.color === "red") {
    clickLike.style.color="black"; 
    //컬러가 레드일 때 클릭하면 블랙으로 바뀌렴
  } else {
    clickLike.style.color="red";
    //컬러가 블랙일 때 클릭하면 레드로.
  } 
}
//위에는 정말 매우 간단하고 조금은 부끄러운 코드..
let clickComment = document.getElementsByClassName('enter')[0];
let commentArea = document.querySelector('.input_comment');
/*인풋 창에 댓글을 쓰고 게시를 하게 될 경우
그 위에 댓글이 올라가게 하기 위해서
일단 게시를 눌러서 올리기 위해 'enter'
댓글을 입력하는 인풋 창에 접근.*/
function addComment(){
  const inputValue = commentArea.value
  //인풋 창의 값
  const wrapNickname = document.createElement('div')
  //닉네임 이름이 들어갈 div 요소 만들어주기
  wrapNickname.innerHTML="yang_ji_eun"
  //닉네임 이름을 위에서 만든 div에 넣어주기
  wrapNickname.classList.add('nickname')
  //위에서 지정한 클래스 값을 추가해준다.
  const wrapDescription = document.createElement('div')
  //댓글 내용이 들어갈 div 요소 만들어주기
  wrapDescription.innerHTML= inputValue
  //인풋창에 쓰여질 글이 들어가야 하므로 'input value'
  wrapDescription.classList.add('description')
  //위에서 지정한 클래스 값을 추가해준다.
  const container = document.createElement('div')
  //닉네임:설명 을 감싸줄 div 요소 만들어주기
  container.classList.add('wrap_description')
  //위에서 지정한 클래스 값 추가해주기
  const textInput = document.querySelector('.section_description');
  /*이렇게 쓰여진 댓글 내용을 댓글이 달린 것처럼
  보이기 위해 위로 올려줘야하므로 html 설명 섹션에 접근.*/
  container.appendChild(wrapNickname)
  //위에서 만들어준 부모 돔 'container' 안에 wrapNickname을 자식으로 만들어주기.
  container.appendChild(wrapDescription)
  //위에서 만들어준 부모 돔 'comtainer' 안에 wrapDescription을 자식으로 만들어주기.
  textInput.appendChild(container)
  //위에서 만들어준 부모 돔 textInput 안에 container를 자식으로 만들어주기.
}
clickComment.addEventListener('click', addComment )
//클릭 이벤트 해주기!

여전히 내겐 너무 어렵고 힘든 자바스크립트..
MDN classList
MDN querySelector
MDN appendChild

구현한 것들 정리.
1. 전체적인 레이아웃 인스타그램과 비슷하게 구조 짜기.
2. 스크롤링 시에도 헤더 고정.
3. 좋아요 버튼 클릭 시 색상 바뀌기.
4. 댓글 기능 구현.
5. 사이드 바 고정.

그리고 문제점이 있다.

사이드바가 메인 옆에 딱 붙어있지 않고 확대 축소 시 자기 맘대로 움직이는 것.
픽스가 되어 스크롤링 할 때는 같이 따라오는건 됐는데, 저 문제는 어떻게 해결해야될지 잘 모르겠다. position 으로 할 수 있는게 아닌 것 같다. 추후에 이 문제에 대해서도 포스팅 하겠다. 일단 필수 기능 구현 외에 추가 기능 구현과 코드 리뷰 등 업데이트가 되는 대로 리뷰 할 예정이다.

0개의 댓글