[Section1] twittler 목업 페이지 구현하기
반응형
https://codesandbox.io/s/twittler-forked-9mrd4k?file=/script.js
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">
<img src="twitter.png" height="60" id="tw">
twittler
</div>
<div id="searching">
<input id="search" type="text" placeholder="search">
<button id="click">🔎</button>
</div>
<div id="searchingMenu">
<span class="item"><b>About</b></span>
<span class="item"><b>Service</b></span>
<span class="item"><b>Portfolio</b></span>
<span class="item"><b>Contact</b></span>
</div>
</div>
<div class="main">
<span class="userInfo">
<b>😊Username</b>
</span>
<input id="usernameInput" class="Info" type="text" placeholder="username">
<span id = "massage" class="userInfo" >
<b>💌Massage</b>
</span>
<textarea id="messageInput" class="Info" placeholder="input massage"></textarea>
<br>
<div id="twiterButton">
<button id="tweetButton" class="button"> ❤️ Tweet!</button>
<button id="randomButton" class="button">🔄Refresh!</button>
</div>
</div>
<!-- Tweet lists -->
<section id="tweetlist" class="white"></section>
<script src="script.js"></script>
</body>
</html>
입력하세요CSS코드
코드를 입력#greeting {
font-size: 45px;
font-style: oblique;
font-family: sans-serif;
font-weight: bold;
border: 2px solid #ccc;
border-radius: 15px;
color: white;
background-color: #eee;
text-shadow: 0 0 5px #333;
text-align: center;
margin: 10px;
padding: 5px;
display: flex;
}
#tw{
margin-right: 5px;
}
.main {
background-color: skyblue;
border: 2px solid white(192, 192, 192);
padding: 10px;
border-radius: 20px;
margin: 10px;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.button {
width: 200px;
height: 60px;
border-radius: 20px;
outline: none;
border: 2px solid rgb(37, 0, 139);
font-size: 35px;
font-family: fantasy;
text-shadow: 0 0 10px lightblue;
background-color: #f479ff;
}
#greeting {
display: flex;
justify-content: center;
}
#usernameInput {
border: 0;
border-radius: 20px;
margin: 10px 0;
width: 150px;
height: 25px;
outline: none;
font-size: 15px;
padding: 10px;
}
input::placeholder{
text-align: center;
font-size: 18px;
}
textarea::placeholder{
text-align: start;
font-size: 18px;
}
#massage{
margin-top: 2px;
}
#messageInput {
width: 400px;
height: 100px;
border: 0;
border-radius: 15px;
outline: none;
font-size: 15px;
padding-left: 10px;
padding-top: 5px;
margin-top: 10px;
}
.userInfo {
margin-top: -10px;
font-size: 30px;
font-family: cursive;
}
#tweetlist {
border: 0;
border-radius: 20px;
margin: 10px;
background-color: whitesmoke;
padding-top: 5px;
padding-right: 10px;
padding-left: 0;
}
.white {
margin-bottom: 10px;
list-style: square;
border-bottom: 2px dotted #adabab;
font-size: 15px;
}
#searching{
display: flex;
flex-direction: row;
justify-content: center;
}
#search{
border: 1px solid gray;
justify-content: flex-end;
width: 350px;
height: 30px;
}
#click{
width: 30px;
height: 35px;
}
#searchingMenu{
display: flex;
justify-content: space-around;
border: 2px solid gray;
border-radius: 10px;
margin: 15px;
margin-left: 400px;
}
.item{
font-size: 15px;
margin-left: 15px;
}하세요구현 화면
페어 프로그래밍 진행 후기
Pair분과 각자 프로그래밍 진행하면서 모르는 부분 서로 알려주고
화면공유를 통해 서로의 코드를 공유하면서 괜찮은 코드는 서로 갖다쓰는 방식으로 진행하였다.
둘이서 코드를 공유하여 같이 코딩하는 것도 괜찮았겠지만, html과 css는 배운 내용을 직접 사용해보고
서로의 코드를 비교해보는 것이 괜찮을 것이라 생각되었다.
반응형
'[Section1]' 카테고리의 다른 글
| [Section1] 사용권한, 환경변수 (0) | 2022.06.30 |
|---|---|
| [Section1] Linux 기본 명령어 (0) | 2022.06.30 |
| [Section1] 페이지 레이아웃(Page Layout), 웹, 앱 화면 설계하기 (0) | 2022.06.30 |
| [Section1] HTML, CSS (0) | 2022.06.30 |
| [Section1]InteliJ 유용한 단축키 (0) | 2022.06.30 |
댓글