와이어프레임 설계 및 목업 구현
와이어프레임(Wireframe)
- 웹 또는 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계
- 아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도
- 가장 큰 목적은, 화면의 영역을 구분하는 일
- 각 영역에서 사용할 주요 태그를 메모하는 형식으로 와이어프레임을 작성 할 것
이용 사이트 : https://ovenapp.io/
OvenApp.io
Oven(오븐)은 HTML5 기반의 무료 웹/앱 프로토타이핑 툴입니다. (카카오 제공)
ovenapp.io
Twittler 목업 구현
허접하긴 하지만 나름 페어와 열심히 한 결과물..
<!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="top">
<div class="login">Username</div>
<input id="usernameInput">
<div class="login">Message</div>
<input id="messageInput" style="width: 700px;height: 40px">
<div class="twittbutton"></div>
<button id="tweetButton">Tweet!</button>
</div>
<div class="refresh">
<button id="randomButton">check new tweets</button>
</div>
<!-- Tweet lists -->
<section id="tweetlist" class="white"></section>
<script src="script.js"></script>
</body>
</html>
#greeting {
font-size: 20px;
font-family: sans-serif;
font-weight: bold;
border: 0px solid white;
border-radius: 1em;
color: white;
background-color: white;
text-shadow: 0 0 5px #333;
text-align: center;
margin: 0.5em;
padding: 0.5em;
}
#top {
background-color: aqua;
padding: 10px;
}
.login {
font-size: 15px;
padding: 5px;
}
.twittbutton {
padding: 5px;
}
.refresh {
background-color: rgb(49, 4, 172);
padding: 10px;
}
#tweetWrapper {
padding: 10px;
}
.tweetusername{
font-weight: bold;
}
.tweet__createdAt{
text-align: right;
}
.tweet__message{
border-bottom: 1px solid black;
}'HTML&CSS' 카테고리의 다른 글
| CSS - Flexbox 레이아웃 (0) | 2022.06.28 |
|---|---|
| CSS 기초 (0) | 2022.06.28 |
| HTML 텍스트 기본 (0) | 2022.06.27 |
| HTML 시작하기 (0) | 2022.06.27 |