잠시 살펴보는 둘둘의 1주차 타임라인 in WECODE
1일차 : html/css 그리고 js 문제 2일차 : js 3일차 : DOM&event 과제 끝 + 미니터 html 틀짜기 4일차 : 미니터 css 수정(flex!!!) + 이벤트로 고뇌에 빠지기 5-6일차 : DOM구조 및 미니터에 이벤트 넣기
포스팅에서의 날짜는 저의 진도랑 상관 있을수도 있고 없을 수도 있습니다~ 제가 그날 무엇을 정리했느냐에 따라 달라서 그냥 써놔서~
근데 이 순서대로 한지 모르겠어요.. 시간이 넘나 빠르고요?? 하루종일 노트북 붙잡고 있느라 일기를 안 썼더니 그날 뭐했는지가 기억이 안나요ㅠ 앞으론 블로깅을 그날그날 쓰도록 노력해보려고요!!
이번 포스팅은 제가 미니 트위터를 어떻게 구현했는지 공개쓰~ 지금은 개발자 꿈나무지만 나중에 멋진 개발자가 되고나서 이 글을 다시 읽으면 재밌을거 같아요 ㅋㅋㅋㅋ 와 진짜 못했다~ 하고 웃을 날이 오겠죠?!
마치 이런 느낌으로..?ㅋㅋㅋㅋㅋㅋ
미니터 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="   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를 계속 추가하다 보니 내가 예상했던 것처럼 안 묶을 때가 많았다
그럴때의 꿀팁!! 다들 알고 있겠지만 저는 이번에 처음 알게되서 신기해서 올려봐유~ (아래의 캡쳐화면은 미니터 로그인 페이지를 만든 것!)
그림속의 화살표가 가리키는 곳을 클릭해보세요.
그런 다음에 마우스를 이리저리 움직여 보면 각각의 class나 id값, 가로길이는 또 얼마나 되는지 등등을 알 수 있어요!
음음… 힘들었던 점이 있다면 디자인에 대한 고뇌…?! 트위터 화면을 완전히 따라할 것이냐, 그냥 심플하게 갈것이냐, 나만의 독자적인 화면을 만들 것이냐… 항상 이런 고민하는데 시간 많이 쏟는 것 같아요 저는 ㅠㅠ 이게 바로 진성 프론트엔더??ㅎ 여튼… 결국 로그인, 회원가입 페이지는 심플하게 가고, 미니터 페이지는 심플하지만 독자적인 화면으로 갔습니다! 나름 프사도 넣어주고 ㅎ
다음번 포스팅에서 CSS 부분을 살펴볼게요~
Reference
- 위코드