📄 학습내용
- 트위터가 아닌 약간(?) 다른 트위터를 목업해서 구현해보았다. 아직 반응형 웹을 배우지 않았지만 능력은 되지 않지만 웹 페이지 크기에 따라서 최대한 비율이 비슷하게 만들려고 많이 노력했다. 자바 스크립트나 다른 코드들은 내가 작성한 코드가 아니어서 공개는 못하지만 나의 pair와 같이 작성한 html과 css를 올린다. 아래는 코드들과 실행 결과이다.
- html 코드
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>twitcher</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="title">
<img
src="https://m.media-amazon.com/images/G/01/AdProductsWebsite/long-term-assets/ad-specs/TwitchGlitchPurple._TTW_.png"
width="60em"
height="70em"
/>
twitcher
</div>
<!-- Tweet lists -->
<section id="tweetlist" class="white"></section>
<script src="script.js"></script>
<div id="inputform">
<div>
<div id="username">Username</div>
<input id="usernameInput" type="text" placeholder="nickname" />
</div>
<div id="message">
<div>Message</div>
<textarea id="messageInput" rows="3"></textarea>
</div>
</div>
<div id="buttonform">
<button id="randomButton">새로고침</button>
<button id="tweetButton">채팅 보내기</button>
</div>
</body>
</html>- css 코드
더보기
body {
background-color: black;
}
#title {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0.4em;
font-size: 2em;
font-family: sans-serif;
font-weight: bold;
color: blueviolet;
}
#inputform {
border: 2px solid whitesmoke;
border-radius: 1em;
padding: 0.5em;
margin-bottom: 0.5em;
display: flex;
color: white;
}
#usernameInput {
margin-right: 1.5em;
margin-top: 0.4em;
}
#messageInput {
margin-top: 0.4em;
width: 90%;
}
#buttonform {
padding: 0.4em;
}
#tweetWrapper {
border: 2px solid white;
color: white;
border-radius: 1em;
list-style: none;
width: 100%;
padding: 1em;
margin: 0em;
}
.white {
width: 100%;
padding: 0em 0em 1em 0em;
display: flex;
}
.tweet__createdAt {
/* width: 25%; */
flex-grow: 0;
flex-basis: 170px;
}
.tweet__username {
/* width: 10%; */
color: blueviolet;
font-weight: bold;
flex-grow: 0;
flex-basis: 80px;
}
.tweet__message {
/* width:65%; */
flex-grow: 1;
flex-basis: 60%;
}
#randomButton {
color: white;
background-color: blueviolet;
font-size: 1.5em;
border-radius: 10px;
}
#tweetButton {
color: blueviolet;
background-color: white;
font-size: 1.5em;
border-radius: 10px;
}
#message {
width: 90%;
}
https://codesandbox.io/s/twittler-forked-c85bqn?file=/main.css
https://github.com/kung036/BackEnd_Section1_Unit03
🎡 페어리뷰
⭐ 공부 난이도
트위틀러 목업 구현 페어프로그래밍 ☆☆☆☆★
🌕 느낀점
첫 페어 프로그래밍이어서 걱정이 많았는데 다행히 큰 문제 없이 무난히 페어프로그래밍을 마쳤다. 크게 어려운 부분이 없어서 쉽게 진도가 나갔다. 같이 프로그래밍을 한 페어님도 좋으신 분이어서 너무 다행이었다. 같이 페어 프로그래밍을 할 때 내가 코드를 거의 작성한 것 같아서 페어분께 너무 미안했다. 좀 더 설명을 많이 하고 의견을 많이 물어봐야겠다고 느꼈다. 항상 혼자 작업을 하다가 같이 코딩을 해서 그런지... 정말... 페어 프로그래밍은 쉽지 않는 일인 것 같다.
페어 피드백을 받았는데 생각보다 좋은 말이 많아서 놀랐다... 생각보다 일찍 끝나서 종료한게 부족한 점인거같다. 내가 너무 혼자 다해서 정말 미안했는데, 이 부분은 고쳐야할 것 같다. 마치고 급해서 피드백을 제대로 못해준 것이 아쉽다. 혹시 다음에 다시 만난다면 더 상세하게 피드백을 해줘야겠다.
'코드스테이츠 - 3회차 백엔드 부트캠프 > Section 1' 카테고리의 다른 글
| 2022.08.29 월 - Git (0) | 2022.08.29 |
|---|---|
| 2022.08.26 금 - 리눅스 (0) | 2022.08.26 |
| 2022.08.24 수 - Flexbox, 와이어프레임 (0) | 2022.08.24 |
| 2022.08.23 화 - HTML, CSS (0) | 2022.08.23 |
| 2022.08.22 월 - CS 기초 (0) | 2022.08.22 |