잠시 살펴보는 둘둘의 1주차 타임라인 in WECODE

1일차 : html/css 그리고 js 문제
2일차 : js
3일차 : DOM&event 과제 끝 + 미니터 html 틀짜기
4일차 : 미니터 css 수정(flex!!!) + 이벤트로 고뇌에 빠지기
5-6일차 : DOM구조 및 미니터에 이벤트 넣기

이 순서대로 한지 모르겠어요.. 시간이 넘나 빠르고요??
하루종일 노트북 붙잡고 있느라 일기를 안 썼더니 그날 뭐했는지가 기억이 안나요ㅠ
앞으론 블로깅을 그날그날 쓰도록 노력해보려고요!!

이번 포스팅은 제가 미니 트위터를 어떻게 구현했는지 공개쓰~
지금은 개발자 꿈나무지만 나중에 멋진 개발자가 되고나서 이 글을 다시 읽으면 재밌을거 같아요 ㅋㅋㅋㅋ

image.png
마치 이런 느낌으로..?ㅋㅋㅋㅋㅋㅋ


미니터 html 구조짜기

아무래도 지난번 코드뭐시기에서 트위틀러를 한번 구현해봤기 때문에 html 구조 짜는것까지는 쉬웠다! 이벤트 거는게 문제였지..ㅜㅜ

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Farro&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="./style/common.css" type="text/css" />
  <link rel="stylesheet" href="./style/tweets.css" type="text/css" />
</head>

<body class="doorits_page">
  <div id="dooriter_bar">
    <div class="dooriter_bar_left_1">
      <div class="dooriter_bar_left_2">
        <a class="bar_home" href="https://twitter.com/">Home</a>
      </div>
      <div class="dooriter_bar_left_2">
        <a class="bar_company" href="https://wecode.co.kr/">Company</a>
      </div>
    </div>
    <div class="dooriter_bar_right_1">
      <div class="dooriter_bar_right_2">
        <input class="search" placeholder="검색어를 입력해주세요"></input>
      </div>
      <div class="dooriter_bar_right_2">
        <a i class="fas fa-search" href="https://www.google.com/"></a>
      </div>
      <div class="dooriter_bar_right_2">
        <a class="bar_login" href="./login.html"> Login</a>
      </div>
    </div>
  </div>
  <div id="dooriter_2nd_bar">
    <div class="color_2nd_bar">
      <span class="wecode">>wecode</span>
    </div>
    <div class="white_2nd_bar">
      <div class="profile_line_left">
        <div class="pf_left_title">
          <span class="pf_left_bold">Doorits</span>
          <span class="sum_doorits"></span>
        </div>
        <div class="pf_left_title">
          <span class="pf_left_bold">Followers</span>
          <span class="sum_followers">24K</span>
        </div>
        <div class="pf_left_title">
          <span class="pf_left_bold">Following</span>
          <span class="sum_followings">2</span>
        </div>
      </div>
    </div>
  </div>
  <div id="dooriter_bottom">
    <div id="profile_container">
      <div class="profile_up">
        <img class="pf_pic" src="dooriter_pf.jpg">
      </div>
      <div class="profile_down">
        <span class="pf_name">Doori Kim</span>
        <span class="pf_nickname">@dooreplay</span>
        <span class="pf_introduce">개발자 꿈나무입니다.<br>잘 부탁드립니다.<br>위코드 짱짱 화이팅!</span>
      </div>
    </div>
    <div id="doorits_container">
      <div class="write_doorits">
        <textarea class="write_doorits_input" placeholder="&nbsp&nbsp What's happening? :)" maxlength="300"></textarea>
        <div><span class="min_count">0</span>/<span class="max_count">0</span></div>
        <button class="doorit_btn">Doorit</button>
      </div>
      <div class="doorits_box">
        <!-- <div class="id_and_time">
          <p class="doorits_id">아이디자리</p>
          <p class="time">0000월 00월 00일 00시 00분 00초</p>
        </div>
        <p class="doorits_contents">두리터내용</p>
      </div>
      <div class="doorits_box">
        <div class="id_and_time">
          <p class="doorits_id">아이디자리</p>
          <p class="time">0000월 00월 00일 00시 00분 00초</p>
        </div>
        <p class="doorits_contents">두리터내용</p>
      </div>
      <div class="doorits_box">
        <div class="id_and_time">
          <p class="doorits_id">아이디자리</p>
          <p class="time">0000월 00월 00일 00시 00분 00초</p>
        </div>
        <p class="doorits_contents">두리터내용</p>
      </div>
      <div class="doorits_box">
        <div class="id_and_time">
          <p class="doorits_id">아이디자리</p>
          <p class="time">0000월 00월 00일 00시 00분 00초</p>
        </div>
        <p class="doorits_contents">두리터내용</p>
      </div>
      <div class="doorits_box">
        <div class="id_and_time">
          <p class="doorits_id">아이디자리</p>
          <p class="time">0000월 00월 00일 00시 00분 00초</p>
        </div>
        <p class="doorits_contents">두리터내용</p>
      </div>
      <div class="doorits_box">
        <div class="id_and_time">
          <p class="doorits_id">아이디자리</p>
          <p class="time">0000월 00월 00일 00시 00분 00초</p>
        </div>
        <p class="doorits_contents">두리터내용</p> -->
      </div>
    </div>
  </div>
  <!-- 이 위는 두리터 컨테이너 닫히는 태그-->
  <!-- <script src="signup.js"></script> -->
  <script src="https://kit.fontawesome.com/d6b1895c38.js"></script>
  <script src="./js/tweets.js"></script>
</body>

</html>

중간에 주석처리한 부분은 CSS 때문에 일단 하드코딩 해놓은 것!
div를 잘 쪼개서 묶어주는게 정말 중요한데, 중간에 새로운 div를 계속 추가하다 보니 내가 예상했던 것처럼 안 묶을 때가 많았다

그럴때의 꿀팁!! 다들 알고 있겠지만 저는 이번에 처음 알게되서 신기해서 올려봐유~
(아래의 캡쳐화면은 미니터 로그인 페이지를 만든 것!)

image.png
그림속의 화살표가 가리키는 곳을 클릭해보세요.
그런 다음에 마우스를 이리저리 움직여 보면 각각의 class나 id값, 가로길이는 또 얼마나 되는지 등등을 알 수 있어요!
image.png
image.png

음음... 힘들었던 점이 있다면 디자인에 대한 고뇌...?!
트위터 화면을 완전히 따라할 것이냐, 그냥 심플하게 갈것이냐, 나만의 독자적인 화면을 만들 것이냐....
항상 이런 고민하는데 시간 많이 쏟는 것 같아요 저는 ㅠㅠ 이게 바로 진성 프론트엔더??ㅎ
여튼... 결국 로그인, 회원가입 페이지는 심플하게 가고, 미니터 페이지는 심플하지만 독자적인 화면으로 갔습니다! 나름 프사도 넣어주고 ㅎ

다음번 포스팅에서 CSS 부분을 살펴볼게요~

Reference

위코드