트위틀러 목업 구현

카테고리 없음

트위틀러 목업 구현

jphwany 2022. 4. 29. 18:15

(feat. 페어프로그래밍)

트위틀러 목업

SNS 트위터의 모조판을 클론 코딩하는 것이라 할 수 있다

목업 이라는 것은 겉 모습만 그렇고 실제 작동하진 않는 그런 것을 의미한다

자바스크립트를 배우지 않았기 때문에 운영진 분들이 미리 작성해주셨다

페어분과 함께 HTML과 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" />
</head>

<body>
<div id="greeting">twittler</div>
	<form>
		<div id="usernameInput" class="name"> Username </div>
		<input type="text" class="inputtype1" placeholder="Username을 입력해주세요" >
		<div id="messageInput" class="name2"> Message </div>
		<input type="text" class="inputtype2" placeholder="무슨 일이 일어나고 있나요?">
	</form>

<button id="tweetButton" class="button1"> 트윗하기 </button>

<button id="randomButton" class="button2"> Check New Tweets </button>

<section id="tweetlist" class="white"></section>

<script src="script.js"></script>   </body> </html>

기존의 id로 설정되어 있는 usernameInput, messageInput, tweetButton, randomButton

이 부분은 자바스크립트가 적용되어 있기 때문에 따로 건들진 않고

class만 연결하여 따로 CSS를 작성했다

유저네임과 메세지칸은 placeholder로 기본 양식을 만들었고

class를 부여하여 여러 css 기능을 부여했다

트윗버튼, 랜덤버튼 또한 class로 css 기능을 부여했다

CSS

#greeting 
{font-size: 2.5em;
font-family: sans-serif;
font-weight: bold;
border: 2px solid #ccc;
border-radius: 1em;
color: rgb(255, 255, 255);
background-color: rgb(115, 231, 247);
text-shadow: 0 0 5px #333;
text-align: center;
margin: 0.5em;
padding: 0.5em;
}  

form{background-color: steelblue;}

.name{font-weight: bold;
	  font-size: 20px;}

.name2{font-weight: bold;
	   font-size: 20px; }
 
 .inputtype1{display: flex;
 			 flex : 1 1 auto;
             width : 300px;
             height : 40px;
             }  

.inputtype2{width : 777px;
			height : 137px;
            margin : 0.2%;
            }  
            
.button1{background-color: skyblue;
		color : white;
        border: skyblue;
        border-radius: 10%;
        width : 80px;
        height : 35px;
        position: relative;
        left : 690px;
        bottom : 45px;
        font-weight: bold;
        font-size: 15px;
        cursor : pointer;
        }

.button2{background-color: #333;
		color : white;
		border :#333;
        position: relative;
        right : 85px;
        font-size: 19px;
        border-radius: 20% 10% 20% 7%;
        cursor : pointer;
        }  

.button3{position: relative;
		right: 80px;
        width: 30px;
        height: 30px;
        }  

.white {list-style: none;
		border: 1px solid lightgray;
        background-color: rgba(96, 146, 194, 0.274);
        border-radius: 5px;
        margin-top: 15px;
        margin-bottom: 15px;
        margin-right: 40px;
        }  
 
 ul>.white {border-bottom: solid darkgray;}
 
 .tweetcreatedAt{font-size: 5px;
 				text-align: end;
                }  
                
 .tweetusername{font-size: 23px;
 				font-weight: bold;
                }

배웠던 css 여러 속성들을 이용해서 간단하게 모양, 색, 여백, 정렬 등등을 부여했다

하면서 가장 난해하고 어려웠던 부분은 우선순위 부모 자식 박스에 부여하는 일이었다

페어분과 진행했기에 해결할 수 있었다

구현된 모습

Check New Tweets 랜덤 버튼에 아이콘도 추가하고 싶었는데 시간이 없어서 생략했다

더 넓은 전체 화면을 고려해 메세지 박스 크기를 좀 더 늘렸어야 했는데 아쉬운 부분이었다

그리고 ..

미적 감각이.. 별로 없어서 그다지 좋은 디자인을 뽑아내진 못했다

아쉬운 부분이다

Uploaded by Notion2Tistory v1.1.0