벌써 1주의 중간을 지난목요일!
출근했을때는 목요일이 그렇게 좋을 수가 없다
금요일이 코앞이기 때문에 ㅎㅎ
오늘은 페어 프로그래밍의 진행날이다
이번주에 학습한 HTML,CSS를 적용해 작은
목업화면을 만들어 보는 것이 목표이다.

image

오늘 페어분과 처음 만났다.
사람 상대하는 것에 어색해하지 않는편이라
얘기가 술술 잘 나왔던 것 같다.

궁극적인 목표인 twittler라는 화면의 레이아웃과
목업화면을 만들어보자고 상의를 했고
와이어프레임부터 오븐에서 만들어보기로 했다. 우선 우리가 만들 와이어프레임을 대략 이런식으로 그렸다.
부모태그들고 자식 태그를 알아볼기 쉽게 표현해두었고
각각 class와 id로 스타일이 가능하도록 변수를 지정했다.

image

위에 와이어프레임의 태그대로
순서대로 html 뼈대를 작성하기 시작했다.

<index.html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>twittler</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  </head>
  <body>
    <!-- 여기에 HTML 구조를 작성하세요. 아래 코드는 예제이며, 얼마든지 바꿀 수 있습니다 -->
    <div id="greeting">twittler</div>
    <div id="writeInput">
      <div>Username</div>
      <input id="usernameInput" placeholder="사용자를 입력하세요"></input>
      <div>Message</div>
      <input id="messageInput" placeholder="메세지를 입력하세요"></input>
    </div>
    <div id="clickButton">
      <button id="tweetButton">Tweet!</button>
      <button id="randomButton">🔄 check new tweets</button>
    </div>
    <!-- Tweet lists -->
    <section id="tweetlist" class="white"></section>

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

여러 박스들과 버튼 그리고 Input태그를 이용해 구성완료.
아무런 css없이 적용하니 대략적인 뼈대가 완성되었다.
아래의 list들은 코드스테이츠에서 script.js파일에 내용을 append시켜 두도록
사전에 준비해주셨다. 그래서 크게 어려움없이 작업할 수 있었던 것 같다.

image

이제 상세한 css적용의 시간!
사실 뼈대만드는 것 보다 훨씬 오래걸렸고
디자인적 감각이 없는 나로써는…. 힘들 따름이었다.

<main.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;
}
#writeInput {
  border-radius: 0.2em;
  padding: 20px 10px 20px 40px;
  background-color: #3fd5ff;
  margin: 0px 0px 10px 0px;
}
#usernameInput {
  width: 30%;
  height: 20px;
  border-radius: 0.3em;
  margin-bottom: 10px;
}
#messageInput {
  width: 85%;
  height: 40px;
  border-radius: 0.3em;
  margin-bottom: 10px;
}

#clickButton {
  border-radius: 0.2em;
  padding: 10px;
  background-color: #223fff;

  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
#tweetButton {
  width: 44%;
  height: 40px;
  border-radius: 0.3em;
  overflow: hidden;
}
#randomButton {
  width: 44%;
  height: 40px;
  border-radius: 0.3em;
  overflow: hidden;
}

#tweetWrapper {
}
.white {
  border-radius: 0.2em;
  background-color: gainsboro;
  padding: 0px 20px 0px 0px;
  display: flex;
  flex-direction: column;
}
.tweet__username {
  width: 75%;
  font-size: 20px;
  font-weight: bold;
}
.tweet__createdAt {
  width: 25%;
  font-size: 15px;
  color: darkgrey;
  margin-top: -20px;
  margin-left: auto;
  position: static;
}
.tweet__message {
  margin-bottom: 15px;
  color: grey;
  border-bottom: solid 1px;
}

image

최종적으로 완성하고나니까 이러한 모습으로 표현 되었다. 여기서 새로히 알게된 것은
border-radius: 는 네모난 테두리의 모따기를하는 기능을 해준다는 것과
overflow로 반응형으로 화면을 줄일때 text들이 벗어나는걸 가려주는 기능을 추가한 것 등.
flexbox,padding,margin,font-size,weight 등 여러가지 기능을 이용해

css를 적용할 수 있었다.

오늘의 과정은 이번주에 배운
아~~~주 기본적인 HTML,CSS를 다뤄보는 시간을 가졌다
자세히 알면 좋지만, 백엔드 엔지니어로서
프론트엔드에서 어떤일이 일어나고 있는지를 조금?이라도
이해해보게 된 것 같다.


오늘의 커피량: ☕️ ☕️ ☕️️️️
오늘의 점심: 야채계란부침,만두,공기밥