목업(Mock-Up)

Mock-Up이란?

디자인의 평가를 위하여 만들어지는 실물 크기의 정적모형.

Mock-Up으로 제작한 twittle

+버튼들이 작동은 하지 않고, 시각적으로 보이는 것만 html/CSS로 twitter 사이트와 비슷하게 구현하였다.

Twittle의 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" />
  <script src="data.js"></script>
</head>
<body>
  <div id="greeting">twittler</div> 
  <div id="twittler">
    <div class="writting-section">
      <div id="username">Username</div>
      <input type="text" id="usernamebox">
      <div id="message">Message</div>
      <input type="text" id="messagebox">
      <br>
      <button id="tweetbutton">Tweet!</button>
    </div><br>
    <div class="button-section">
      <button id="retweet"><img src="https://image.flaticon.com/icons/png/512/61/61444.png " id="retweeticon">check new tweets</button>
    </div>
    <ul class="tweet-section">
      <li>
        <div class="time">2019-01-04 18:30:20</div>
        <div class="id">ingikim</div>
        <div class="contents">education for real world</div><hr>
      </li>
      <li>
        <div class="time">2015-01-03 12:30:20</div>
        <div class="id">stevejobs</div>
        <div class="contents">Stay hungry, and stay foolish</div><hr>
      </li>
      <li>
        <div class="time">2019-01-05 07:30:20</div>
        <div class="id">ingikim</div>
        <div class="contents">code now! #work #hard</div><hr>
      </li>
      <li>
        <div class="time">2019-01-04 18:30:20</div>
        <div class="id">johnnykoo</div>
        <div class="contents">this is test message #pair #programming</div><hr>
      </li>
      <li>
        <div class="time">2019-01-03 12:30:20</div>
        <div class="id">ingikim</div>
        <div class="contents">Welcome to Code States #codestates</div><hr>
      </li>
    </ul>
  </div>

Twittle의 CSS

* {
  box-sizing: border-box;
}
body {
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 2%;
  margin-bottom: 2%;
}
#greeting { 
  font-size: 2em;
  font-family: papyrus;
  font-weight: bold;
  border: 2px solid rgb(255, 255, 255);
  color: white;
  background-color: rgb(255, 255, 255);
  text-shadow: 0 0 5px rgb(116, 114, 114);
  text-align: center;
  margin: 0.1em;
  padding: 0.1em;
}
#twittler{
  display: flex;
  flex-direction: column;
}
.writting-section{
  border-top-left-radius: 30px 30px;
  border-top-right-radius: 30px 30px;
  background-color: rgb(53, 191, 230);
  padding: 2%;
}
#username{
  color: white;
}
#message{
  margin-top: 2%;
  color: white;
}
#usernamebox{
  margin-top:1%;
  height: 30px;
  width: 20%;
}
#messagebox{
  margin-top: 1%;
  height: 45px;
  width: 80%;
}
#tweetbutton{
  margin-top: 1%;
  height: 40px;
  width: 65px;
}
.button-section{
  background-color: rgb(27, 83, 157);
  padding: 2%;
}
#retweeticon{
  height: 15px;
  width: 15px;
  vertical-align: bottom;
  margin-right: 4%;
}
#retweet{
  white-space: nowrap; 
  height: 40px;
  width: 150px;
}
.tweet-section{
  list-style-type : none;
  background-color: rgb(238, 238, 238);
  margin: 0px;
  padding : 2%;
  border-bottom-left-radius: 30px 30px;
  border-bottom-right-radius: 30px 30px;
}
.time{
  margin: 10px 0px ;
  font-size: 0.8em ;
  float: right;
  color:rgb(54, 53, 53)
}
.id{
  font-weight: bold;
  font-size: 1.1em;
}
.id:hover{
  color:rgb(51, 191, 230);
  cursor: pointer;
}
hr{
  border: 1px solid grey;
}

Author And Source

이 문제에 관하여(목업(Mock-Up)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@heokiro/TIL-11

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

목업(Mock-Up)

Mock-Up이란?

Mock-Up으로 제작한 twittle

Twittle의 html

Twittle의 CSS

Author And Source

좋은 웹페이지 즐겨찾기