728x90
새벽을 넘겼다...
일어나보니 8시 50분,,,
하마터면 라이브세션을 지각할 뻔했다!!!
모두들 어렵지 않게 잘 하시는 것 같은데 나는 생각처럼 잘 구현되지 않아서 밤새워서 구현하다 잠을 자게되었다ㅜㅜ
내가 처음 구상했던 와이어 프레임은 다음과 같다
동그란 부분에 이름을 입력하고 what's happening?에 메세지를 남길 내용을 입력하여 오른쪽에 Tweet을 클릭하면 밑에 와이어프레임 부분에 구현되는 방식이다.
최초 화면은 다음과 같다 여기에 제목부분을 수정하고 필요한 부분을 구현해야한다.
필요한 부분은 다음과 같다.
- 제목을 수정한다.
- id 입력부를 만든다.
- message 입력부를 만든다.
- tweet 버튼을 만든다.
- 트윗을 최신화 할 수 있도록 show new tweet 버튼을 만든다.
- CSS를 적용하여 예쁘게 제작한다.
복잡하지는 않은 작업이지만 실제로 코딩하고 내가 원하는 모양으로 구현하는 것에는 난이도가 상당하게 있다고 느꼈다.
내가 작성한 HTML과 CSS는 다음과 같다.
<!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">twittler</div>
<main>
// 아이디 입력부 입니다.
<input id="usernameInput" type="text" />
// 메세지 입력부 입니다.
<input
id="messageInput"
placeholder="what's happening?"
type="text"
style="word-wrap: break-word;"
/>
</main>
<div class="please">please, write your everything!</div>
<nav>
//tweet 버튼 구현부 입니다.
<button id="tweetButton">Tweet</button>
//show new tweet 버튼 구현부 입니다.
<button id="randomButton">show the new tweets</button>
</nav>
<!-- Tweet lists -->
<div class="recent"></div>
///js기능을 link한 부분이다.
<section id="tweetlist" class="white"></section>
<script src="script.js"></script>
<div class="recent"></div>
</body>
</html>
#greeting {
font-size: 2em;
font-family: sans-serif;
font-weight: bold;
border: 0px solid white;
border-radius: 0em;
color: rgb(51, 51, 51);
background-color: white;
text-shadow: 0 0 0;
text-align: left;
margin: 0 0 0 0em;
padding: 0.5em;
}
main {
margin: 1em 0em 0em 1em;
display: flex;
justify-content: left;
flex-direction: row;
}
#usernameInput {
color: white;
font-family: sans-serif;
border: none;
background-color: cornflowerblue;
border-radius: 100%;
width: 2em;
height: 2em;
text-align: center;
font-size: 2em;
}
#messageInput {
display: flex;
font-weight: bold;
border: none;
text-align: left;
font-size: 1.3em;
width: 90%;
margin: 0 0 0 0.5em;
}
.please {
display: flex;
justify-content: left;
color: rgb(20, 141, 222);
font-weight: bolder;
margin: 1.5em 0em 0em 6.4em;
}
nav {
margin: 0em 2em 3em 6em;
border-top: 0.17em solid rgba(138, 137, 137, 0.749);
padding-top: 1em;
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
border-bottom: 0.17em solid white;
}
#randomButton {
background-color: rgba(117, 184, 220, 0.749);
border: none;
color: white;
height: 2em;
border-radius: 0.7em;
}
#tweetButton {
background-color: rgba(117, 184, 220, 0.749);
border: none;
color: white;
border-radius: 0.7em;
}
header {
display: flex;
justify-content: center;
}
.recent {
border: 0.1em solid rgba(138, 137, 137, 0.749);
margin: 0em 2em 0em 2em;
}
li {
color: white;
border: 0.2em solid rgba(138, 137, 137, 0.749);
margin: 1em 3em 1em 1em;
font-size: 1.2em;
font-weight: bold;
background-color: rgb(106, 165, 255);
padding: 1em 2em 2em 2em;
border-radius: 1em;
}
.tweet__username {
margin-right: 90%;
font-size: 1.4em;
font-weight: bold;
display: flex;
}
.tweet__createdAt {
display: flex;
font-weight: normal;
flex-direction: row-reverse;
margin: 0em 0em 1em 1em;
}
그렇다면 최종 화면은 어떻게 될까?!!
짜잔!!!
뭔가 많이 허접하지만,,,
그래도 구현은 됐다...ㅜㅜ
어려웠던 점
Html을 작성하는 것은 큰 어려움이 없었지만, CSS와 함께 사용할 때와 내가 구상한 와이어프레임의 구조를 생각하며 구현하는 것이 난이도 있게 느껴졌다.
내가 막히는 부분은 다음과 같았다.
- 어떻게 script.js의 구현부를 스타일 할까?!
- 일반적으로 <div>의 조합으로 이루어진 html은 해당 부분에 id 또는 class를 적용하고 해당 부분의 CSS부분에 스타일을 적용하면 되기 때문에 직관적이지만 script.js는 그렇지 않았다. 이것은 script.js에 작성한 id에 스타일을 적용함으로 써 해결 할 수 있었다.
- 화면이 커지면 구현부가 불균형하게 커지는 현상
- 이 현상는 내가 구현한 부분이 내가 현재 보는 브라우저 사이즈에 맞게 세팅되어 있어서 그렇다 따라서 사이즈를 지정 할 때 비율(%)을 활용하여 이러한 현상을 해결 할 수 있다.
다음은 이번 활동을 통해 배운 것을 나열해보았다.
- link요소를 통해 HTML에 CSS를 불러올 수 있다.
- <script src="???.js"></script>로 js를 불러올 수 있다.
- id와 class를 적용할 수 있다.
- flexbox로 여러<div>를 적용하여 한번에 스타일을 변경 할 수 있다.
'개발일지' 카테고리의 다른 글
| 네 번째 회고: CSS (0) | 2022.08.26 |
|---|---|
| 세 번째 회고: HTML 시험 (0) | 2022.08.26 |
| 웹 클라이언트와 웹 서버 (0) | 2022.08.22 |
| 컴퓨터와 프로그래밍 (0) | 2022.08.22 |
| 첫 번째 회고: 메타인지의 중요성 (0) | 2022.08.22 |
