728x90
트위틀러(Twittler) 목업 구현하기
1. 유튜브 댓글 UI를 본뜬 트윗튜브(Twitube) 와이어프레임 제작
https://ovenapp.io/view/Bl9WzQtUUrXw6n4ujxxcSeVbBywGhyM1/
2. 목업 페이지 HTML, CSS 코드 작성
- 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" />
<script src="data.js"></script>
</head>
<body>
<!-- logo & title -->
<section id="headlineBox">
<img id="logo" src="Twitube_logo.png" />
<span id="title">Twitube</span>
</section>
<!-- Input message -->
<section id="inputMyMessageBox">
<img id="profile" src="profile.png">
<div>
<input type="text" id="usernameInput" placeholder="Username"></input>
<br>
<div class="around">
<input type="text" id="messageInput" placeholder="댓글 추가..."></input>
<button id="tweetButton">Tweet!</button>
</div>
</div>
</section>
<!-- Check new tweets button & tweet lists -->
<section>
<button id="randomButton">Check new tweets</button>
<section id="tweetlist" class="white"></section>
<script src="script.js"></script>
</section>
</body>
</html>
- main.css
* {
box-sizing: border-box;
}
input {
margin-top: 1em;
color: darygray;
border-style: none;
border-bottom-style: solid;
}
button {
margin-top: 1em;
margin-left: 1em;
}
#headlineBox {
display: flex;
margin-left: 1em;
margin-bottom: 1em;
}
#logo {
width: 3.5em;
height: 3em;
padding-top: 0.5em;
}
#title {
font-size: 2.5em;
font-weight: bold;
margin-left: 0.2em;
}
#inputMyMessageBox {
height: 5em;
background-color: #f0f0f0;
display: flex;
}
#profile {
width: 4em;
height: 4em;
margin: 0.5em;
}
#usernameInput {
height: 1.5em;
}
#messageInput {
height: 2em;
}
#tweetButton {
width: 6em;
height: 2em;
position: absolute;
right: 20px;
}
#randomButton {
width: 10em;
height: 3em;
}
3. 주어진 Javascript 파일을 적용해 랜덤 트윗 생성, 트윗 입력 기능 구현
728x90
'백엔드 개발자 공부 > 프론트엔드 기초' 카테고리의 다른 글
| [프론트엔드 기초][실습] 와이어프레임 만들기 - 풋몹(fotmob.com) (0) | 2022.08.24 |
|---|---|
| [프론트엔드 기초] 웹 앱 화면 설계하기 (0) | 2022.08.24 |
| [프론트엔드 기초] 페이지 레이아웃 (0) | 2022.08.24 |
| [프론트엔드 기초] CSS (0) | 2022.08.23 |
| [프론트엔드 기초] HTML (0) | 2022.08.23 |