티스토리 뷰
아래의 샘플을 보며 직접 비슷하게 만들어보는 과제를 받았다.
페어와 함께 진행하는 작업이였다.
트윗 년도와날짜를 입력하는 부분에서 오른쪽으로 이동이 안되어 애를 먹었다.
이부분에서 오늘 배운 flexbox응용을 해봤더니 원하는대로 모양이 나와서 무척 기뻤다.
아래는 우리가 만든 트위틀러다.
주어진 시간이 두시간밖에안되서 완성도가 조금 아쉽지만. 그래도 나름 비슷하게 만들었다!
아래는 페어님과 사용해본 코드다
이전에 git 과제를 함께했던 다른 페어님께 요청드려 그분 코드와 우리가 만든 코드를 비교해보니
우리가 작업한 코드는 class,id 설정이 너무 중구난방이였다. 와이어프레임 설계를 했던것에 CSS를 접목해보니 구현되지않아 그자리에서 다시 수정수정수정...하다보니 중구난방이 된 것 같다 ㅠㅠ
와이어프레임에서 <div></div>를 어떻게 나눌것인지 id,class 그룹핑을 어떻게할지 생각보다 세세하게 설계해야됨을 느꼈다!
!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>
<!-- 여기에 HTML 구조를 작성하세요. 아래 코드는 예제이며, 얼마든지 바꿀 수 있습니다 -->
<div id="greeting">twittler</div>
<div id="firstBox">
<div class="getTweet">Username</div>
<input type="text">
<div class="getTweet">Message</div>
<input type="text">
<div>
<button>tweet!</button>
</div>
</div>
<div id="secondBox">
<div id="refreshBtn">
<button>check new tweets</button>
</div>
<ul>
<li>
<div class="box">
<div class="username">ingikim</div>
<div class="date">2019-01-04 18:30:20</div>
</div>
<span class="content">education for real world</span>
</li>
<li>
<div class="box">
<div class="username">ingikim</div>
<div class="date">2019-01-04 18:30:20</div>
</div>
<span class="content">stay hungry, and foolish</span>
</li>
<li>
<div class="box">
<div class="username">ingikim</div>
<div class="date">2019-01-04 18:30:20</div>
</div>
<span class="content">code now ! #work #hard </span>
</li>
<li>
<div class="box">
<div class="username">ingikim</div>
<div class="date">2019-01-04 18:30:20</div>
</div>
<span class="content">this is test message</span>
</li>
<li>
<div class="box">
<div class="username">ingikim</div>
<div class="date">2019-01-04 18:30:20</div>
</div>
<span class="content">wlecome to codestates</span>
</li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
#greeting {
font-size: 2em;
font-family: sans-serif;
font-weight: bold;
border: 2px solid #ccc;
border-radius: 1em;
color: white;
background-color: #eee;
text-shadow: 0 0 5px #333;
text-align: center;
margin: 0.5em;
padding: 0.5em;
}
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
#firstBox{
background-color: skyblue;
height : 100%
}
#secondBox{
background-color: lightgrey;
}
.getTweet{
color: white;
margin : 10px 2px 4px 5px
}
[type]{
margin: 5px
}
#refreshBtn{
background-color: darkblue;
height: 20px;
padding: 10px;
}
li{
border-bottom: 1px solid darkgrey;
}
ul{
list-style: none;
}
.username,.date{
font-size: 25;
}
.box{
display: flex;
flex-direction: row;
/* flex: 2 1 auto; */
width: 100%;
}
.username{
flex-grow: 1;
}
남들이 보기엔 허접할지라도 하루하루 성장해가는 나자신에게 오늘은 좀 칭찬해줘야겠다 !
수고했어! 다음에 더 잘하자!!
'CSS' 카테고리의 다른 글
| [CSS]li속성 정렬, 줄간격 맞추기, 단락의 두 번째 줄부터 들여 쓰기 (0) | 2022.06.22 |
|---|---|
| [CSS]position absolute - position relative (0) | 2022.01.15 |
| [CSS] Grid 레이아웃 공부2 Template areas, auto-fit, min-max (0) | 2022.01.14 |
| [CSS] Grid 레이아웃 공부 (0) | 2022.01.14 |
| css : 기본 문법과 flexbox (0) | 2021.10.21 |