시작하며
오늘은 CSS의 레이아웃을 나누는 방법을 만들고 flex를 활용하여 목업 페이지를 작성하는 과제를 수행하였다. 이전과 다르게 html부터 css까지 처음부터 제작하는 과제를 통해 놓치고 있던 부분들을 알 수 있는 좋은 기회였다.
CSS
목업이란 단어는 '목업폰'처럼 실제 기능이 구현되지 않는 모형을 말하는데 이번 과제는 twittler 목업페이지를 제작하는 것이다. 실제로 글을 작성해서 제출되지는 않지만 웹페이지의 레이아웃을 정해서 보여지는 화면을 제작해보면서 CSS에 대한 이해가 쉽게 되었다.
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>
<!-- 여기에 HTML 구조를 작성하세요. 아래 코드는 예제이며, 얼마든지 바꿀 수 있습니다 -->
<div id="greeting">twittler</div>
<div id ="write">
<div class="inputname"><input type="text" style='width:150px;height:40px;' placeholder="username"></div>
<div class="inputname"><input type="password" style='width:150px;height:40px;' value="password"></div>
<div class="inputname"><textarea style='font-size: x-large;'' placeholder="write here"></textarea></div>
<div class="inputname"><button>tweet</button></div>
</div>
<ul>
<li class="comment">
<div class="username">aaaa</div>
<div class="content">hello</div>
<span class="createAt">2021.06.23</span>
</li>
<li class="comment">
<div class="username">bbbbb</div>
<div class="content">seeyou</div>
<span class="createAt">2021.06.23</span>
</li>
<li class="comment">
<div class="username">ccccc</div>
<div class="content">again</div>
<span class="createAt">2021.06.23</span>
</li>
</ul>
<script src="script.js"></script>
</body>
</html>**CSS**
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Pacifico&family=Shadows+Into+Light&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: #e0e0e0;
}
#greeting {
font-size: 2em;
font-family: 'Pacifico', cursive;
font-weight: bold;
border: 2px solid #ccc;
border-radius: 1em;
color: white;
background-color: #34515e;
text-shadow: 0 0 5px #333;
text-align: center;
margin: 0.5em;
padding: 0.5em;
width : 70%;
margin: 10px auto;
}
#write {
display: flex;
flex-direction: column;
width : 70%;
padding: 10px;
border-radius: 20px;
background-color: #afc2cb;
margin: 10px auto;
border: 3px solid #34515e;
}
input::placeholder {
text-align: center;
font-family: 'Bebas Neue', cursive;
font-size: x-large;
}
textarea::placeholder {
font-family: 'Bebas Neue', cursive;
font-weight: bold;
}
.inputname{
margin: 10px;
}
textarea {
height: 100px;
width : 100%;
}
.username{
flex: 1 0 auto;
font-weight: bold;
}
.content{
flex: 1 0 auto;
font-family: 'Shadows Into Light', cursive;
font-size: x-large;
}
.createAt{
flex: 1 0 auto;
color : gray;
}
ul {
display: flex;
flex-direction: column;
margin: 10px auto;
height: 500px;
width: 70%;
border-radius: 20px;
background-color: #e3f2fd;
padding: 10px 10px;
border: 3px solid #afc2cb;
}
.comment {
display: flex;
flex-direction: column;
flex: 1 0 auto;
border: 2px dotted #afc2cd;
margin: 7px;
padding: 10px 20px 0px;
border-radius: 10px;
}
button {
width: 100px;
height: 30px;
font-size: large;
font-family: 'Bebas Neue', cursive;
}구현된 웹 페이지
간단한 페이지이지만 pair와 와이어프레임을 설계하고 페이지를 제작하다보니 레이아웃외에 UI 디자인에는 시간을 드리지 못했다. 과제를 통해 웹페이지가 제작되는 과정 flex 혹은 grid를 사용하기 위해서 어떤식으로 html을 작성해야 하고 id와 class를 적절하게 사용해야 되는지를 알 수 있었다. 기존에 알고있던 셀렉터의 개념도 다시 한번 복습할 수 있는 좋은 기회였다.
개발자로 성장하기