HTML&CSS

HTML/CSS를 활용하여 Twittler 구조를 제작해 보자

_DoYun 2022. 4. 29. 15:38

CodeStates Html/Css 과정을 통해 아래 화면의 웹 페이지를 pair 동기와 함께 HTML과 CSS를 활용하여 제작하는 프로젝트를 진행했다.

.

https://codesandbox.io/s/twittler-forked-sjwofp?file=/index.html 

 

twittler (forked) - CodeSandbox

twittler (forked) by jungdo8016 using parcel-bundler

codesandbox.io

웹 페이지는 https://codesandbox.io/s/twittler-kbuvb5 라는 웹 페이지 제작 프로그램을 통해 제작되었고 아래 와이어 프레임을 기반으로 크기 및 기능 등을 설정하고 제작되었다.

 

.

​

아래는 완성된 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 class="wrap">
      <div class="inner">
        <div class="username margin">Username</div>
        <input type="text" class="margin" id="usernameInput" />
        <div class="message margin">Message</div>
        <input type="text" class="margin" id="messageInput" />
        <div class="buttonFirst">
          <button id="tweetButton" class="margin">Tweet!</button>
        </div>
      </div>
    </div>

    <div class="middle">
      <button id="randomButton">check new tweets</button>
    </div>
    <!-- Tweet lists -->
    <section id="tweetlist" class="white"></section>

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

크게 글을 작성하고자 하는 User의 이름과 원하는 text message를 작성할 수 있는 기능을 <input> 태그를 통해 구성하였고 아래 Tweet! 버튼을 누르면 작성된 이름과 메시지가 아래 게시판에 전송되는 형태로 구성하였다. 

 

아래는 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;
}
body{
  margin:0;
}
.wrap{
  background-color:rgb(71, 186, 221);
  padding:1px;
  }
.username,.message{
  color:white;
  font-size: 10px;
}

.margin{
  margin:5px;
}
#messageInput{
  display:inline-block;
  width:500px;
  height:30px;
  }
#tweetButton{
  display:inline-block;
  height:35px;
}
.middle{
  background-color: rgb(47, 34, 168);
  height:55px;
  margin-top:8px;
  display:flex;
  align-items:center;
}
#randomButton{
  height:35px;
  margin-left:5px;
}

.white{
  background-color: rgb(171, 170, 173);
  padding:5px;
}

.tweet__username{
  font-weight:bold;
  font-size:17px;
  display:inline-block;
}

.tweet__createdAt,.tweet__message{
  font-size: 13px;
}
.tweet__createdAt{
  display:inline-block;
  float:right;
}
#tweetWrapper{
  list-style: none;
}

과정 중 어려웠던 점은 게시판 속 각각의 글들을 구성해 주는 선, 즉 <hr> 코드를 우리가 공부한 HTML/CSS 파일이 아닌 강사님들이 기능 추가를 위해 작성해 주신 Script.js 파일에 작성 했어야 한다는 점이었다. 그것도 javascript 언어로...

때문에 우리는 최대한 기존 코드는 건드리지 않는 선에서 구글링을 통해 <hr> 태그를 완성시켰다.

const Hr = document.createElement("hr");
  Hr.classList.add("HrClass");
  Hr.setAttribute('color','gray');