오늘의 목표

1. HTML로 구조를 만들기
2. CSS로 진짜 트위터처럼 꾸미기
3. 자바스크립트로 기능 보완하기

---

내용

이번주에 배웠던 내용들을 전체적으로 복습하는 느낌으로 진행하였습니다. 그리고 페어프로그래밍이라는 형식으로 진행하였는데 두사람이 짝을 지어 번갈아 가며 네비게이터와 드라이버역할을 맡아 개발을 진행하였습니다.

네비게이터 : 개발을 안내하고 알려주고 자신의 생각을 주고받음
드라이버 : 네비게이터의 질문, 안내에 따라 코딩하고 자신의 생각을 주고받음

흔히 네비게이터가 지시자고 드라이버가 수행자라고 생각하기도 쉽고 또 처음하면 무의식적으로 비슷하게 행동하게 됩니다. 하지만 엄연히 수평적이고 잠깐잠깐 역할이 충분히 바뀔 수 있습니다.
이번에 처음하는 프로그래밍 방법이라 많이 어색하고 또 처음 뵙는 분과 할려니 굉장히 조심스러웠습니다.

목업

완성

목업에서 완성으로 만들기 위한 과정입니다.

---

HTML

	<meta name="viewport" content="width=device-width, initial-scale=1" />

메타 태그입니다. 메타태그는 여러종류가 있으며 name속성으로 어느 설정을 할건지 결정합니다.
name=viewport는 뷰포트를 설정하며 어떻게 보일지를 지정합니다. 지정은 content속성으로 세부사항을 결정합니다.
width=device-width : 기기의 너비만큼 넓이를 가집니다.
initial-scale=1 : 초기 배율을 1로 원본입니다.

	<!-- 여기에 HTML 구조를 작성하세요. 아래 코드는 예제이며, 얼마든지 바꿀 수 있습니다 -->
	<div id="greeting">twittler</div>

div 태그입니다. id=greeting으로 지정하여 해당 부분만 따로 수정합니다.

 	<!-- username, message, tweet!(button) 생성-->
	<div id="input">
      <div class="text">Username</div>
      <input type="text" id="usernameInput"> </input>
      <div class="text"> Message</div>
      <textarea id="messageInput"></textarea> <br>
      <button id="tweetButton"> Tweet!</button>
    </div>

하늘색 박스가 id=input div태그입니다. 아래에서 부터 순서대로 name, message, 버튼이 옵니다.

	<!--check new tweets button-->
	<div id="refresh">
        <button id="randomButton">
          <img width=10em height=10em src="https://cdn3.vectorstock.com/i/1000x1000/00/72/refresh-icon-vector-13490072.jpg"
          </img>
          check new tweets
        </button>
    </div>

보라색 박스 부분이 id=refresh div태그입니다. 버튼이 하나 있는 부분입니다.
버튼에는 <img>이미지 태그를 삽입하여 refresh를 강조하였습니다.

	<!-- Tweet lists -->
    <section id="tweetlist" class="white"></section>

    <script src="script.js"></script>

트위트 리스트입니다. 따로 건들일 필요 없었습니다.

---

CSS

#greeting {
  font-size: 2em;
  font-family: sans-serif;
  font-weight: bold;
  /* border: 2px solid #ccc; */
  border-radius: 1em;
  color: white;
  /* background-color: #eee; */
  text-shadow: 0 0 5px #333;
  text-align: center;
  margin: 0.5em;
  padding: 0.5em;
}

최상단의 박스를 에서 테두리를 없애고 배경을 흰색으로 바꾸기 위해 해당 CSS속성들을 주석처리 하였습니다.

#input {
  background-color: #46ccff;
  padding: 0.5em;
  margin-bottom: 0.5em;
}

.text {
  margin-bottom: 0.5em;
  color: white;
}

#usernameInput {
  height: 2em;
  margin-bottom: 0.5em;
}

#messageInput {
  width: 80%;
  height: 3em;
  margin-bottom: 0.5em;
}

#tweetButton {
  height: 3em;
  width: 5em;
}

#input : 여러 아이템들을 담는 컨테이너 입니다. 하늘색 배경, 내외부 여백을 수정하였습니다.
.text : 텍스트 부분입니다. 색과 margin 수정하였습니다.
#usernameInput : username을 입력받는 입력창입니다. 높이와 여백을 수정하였습니다.
#messageInput : messgage를 입력받는 입력창입니다. 높이,너비, 여백을 수정하였습니다.
#tweetButton : 트윗버튼입니다. 높이와 너비를 수정했습니다.

#refresh {
  background-color: #3c467d;
  height: 3em;
  padding: 0.5em;
  display: flex;
  flex-direction: row;
  align-items: center;
}

#randomButton {
  height: 3em;
}

#refresh : refresh버튼을 담는 컨테이너 입니다. 버튼을 세로로 중앙 정렬하기 위해 display:flex, flex-direction:row, align-items:center를 이용하였습니다.
display:flex : 부모를 flex 컨테이너로 사용합니다.
flex-direction:row : 자식 요소를 좌에서 우로 정렬합니다.
align-items:center : 자식 요소들을 수직으로 중앙에 배치 시킵니다.
#randomButton : refresh버튼입니다.

#tweetlist {
  background-color: #eeeeee;
  padding-top: 1em;
  overflow: auto;
}

.white {
  border-bottom: 1px solid black;
}

#tweetWrapper {
  list-style-type: none;
}

.tweet__username {
  font-size: 1.2em;
  font-weight: bold;
}

.tweet__createdAt {
  float: right;
  font-size: 0.8em;
}

.tweet__message {
  font-size: 0.8em;
  margin-top: 0.2em;
  margin-bottom: 0.5em;
}

#tweetlist : 트윗들을 담는 컨테이너 입니다. 배경색, 여백, 그리고 트윗들이 무한정 늘어나면 아래로 계속 추가될수 있도록 overflow:auto;를 추가하였습니다.
.white : <li>태그입니다. 아래에 밑줄 효과를 내기 위해 아래쪽 경계선만 검은줄을 그었습니다.
#tweetWrapper : <ul>태그입니다.

• 효과를 없애기 위해 list-style-type:none 를 입력하였습니다.

tweet__username, .tweet__createdAt, tweet__message는 순서대로 name, 시간, message입니다.
float:right는 다소 생소할 수 있는데 block요소 여백에 inline요소를 위치시키는 태그입니다. right속성은 block을 오른쪽에 배치시키고 inline요소를 왼쪽 여백에 채워 넣습니다.

---

JavaScript

사실 아직 부트캠프에선 배우지 않은 내용이지만, 이전에 잠깐 배웠던 기억과 페어분의 지식으로 채워넣었습니다.

tweetButton.onclick = function () {
  if (usernameInput.value && messageInput.value) {
    var today = new Date();
    var year = today.getFullYear();
    var month = ("0" + (today.getMonth() + 1)).slice(-2);
    var day = ("0" + today.getDate()).slice(-2);
    var dateString = year + "-" + month + "-" + day;
    var hours = ("0" + today.getHours()).slice(-2);
    var minutes = ("0" + today.getMinutes()).slice(-2);
    var seconds = ("0" + today.getSeconds()).slice(-2);
    var timeString = hours + ":" + minutes + ":" + seconds;
    var now = dateString + " " + timeString;
    const tweetObject = {};
    tweetObject.user = usernameInput.value;
    tweetObject.message = messageInput.value;
    tweetObject.created_at = now;
	...
  }
};

이미 있던 트윗과 함께 새로 넣은 트윗들을 넣을 때 마다 시간도 함께 저장하고 싶다면 시간 정보도 그때그때마다 추가해서 넘겨 주어야 합니다.

var today = new Date();

시간 정보를 생성하고

var year = today.getFullYear();
var month = ("0" + (today.getMonth() + 1)).slice(-2);
var day = ("0" + today.getDate()).slice(-2);
var dateString = year + "-" + month + "-" + day;
var hours = ("0" + today.getHours()).slice(-2);
var minutes = ("0" + today.getMinutes()).slice(-2);
var seconds = ("0" + today.getSeconds()).slice(-2);
var timeString = hours + ":" + minutes + ":" + seconds;
var now = dateString + " " + timeString;

생성한 시간정보를 포맷에 맞추어야 합니다. month는 0달부터 시작하므로 +1을 하여 양력 달에 맞춥니다.
최종적으로 now에는 포맷에 맞춘 시간정보가 들어있습니다.

tweetObject.created_at = now;

시간정보를 객체에 함께 넣습니다. created_at은 시간정보를 담는 변수입니다.

---

GitHub

https://github.com/ds02168/twittler

---

후기

HTML, CSS도 결코 쉬운건 아니지만 너무 어렵다고 생각하지말고 외우기 보단 익숙하고 그때그때 필요한것을 잘 검색할수 있도록 연습하는것이 중요한것 같습니다.