728x90
HTML과 CSS의 기본을 배운 이후 처음으로 만들어 본 프로그램이다.
실제로 구동하지 않는 목업이지만 이틀 간의 내용을 총망라하여 만들어 낸 결과물이라 의미 있는 시간이었다.
원래 이름은 Twitter의 짝퉁인 Twittler...
이미 2절까지 가버린 네이밍이지만 우리 팀은 거기에 한 번 더 뇌절을 해버린 Instawittler라고 이름을 지었다.
코드 설명은 주석으로 간단하게 했다.(나중에 참고할 만한 내용만) 아직 모든 코드를 이해하지 못하고, 각 코드 별 의미와 사용 방법을 공부하기보다는 무엇이든 만들어내는 것에 의미를 두는 시간이었기 때문이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>twittler</title>
...(생략)
</head>
<body id="flex">
<div id="greeting"><img src="https://assets.stickpng.com/thumbs/580b57fcd9996e24bc43c521.png" style: height="35px;">Instawittler</div>
<!--(1)텍스트 옆에 이미지를 넣고, style을 이용하여 크기를 작게 조정함-->
...(생략)
<button id="randomButton" class="bt"><img src="https://i0.wp.com/bellemme.com/wp-content/uploads/2019/03/insta.png?fit=900%2C900&ssl=1" style: height=" 35px;"></button></div>
<!--(1)-->
...(생략)
<div id="m"><input id="messageInput" type="text" placeholder="메시지를 입력해주세요.">
<button id="tweetButton" class="bt">
<img src="https://static.thenounproject.com/png/3861763-200.png" style : height="30px"";"</button> <button class="bt">
<!--(1)-->
<img src="https://www.clipartmax.com/png/full/58-587249_small-heart-icon-vector-instagram-like-icon-png.png" style : height="20px"</button></div>
<!--(1)-->
</div>
</body>
</html><오늘 구현한 트위틀러의 HTML 코드> ※ 전체 코드 유출 방지를 위해 일부 생략함
#greeting {
display: flex;
justify-content: center;
font-size: 2em;
font-family: cursive; /*폰트 변경*/
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;
background-image: linear-gradient(to bottom right, #0d1cf1c4, #e01111c4, #fff065c2); <!--오른쪽 아래로 내려가는 그라데이션-->
}
#flex {
box-sizing: border-box; /*기본 디폴트값 해제*/
}
#newTweet {
border : 2px solid black;
border-radius : 0.5em;
margin-bottom: 1em;
margin-top: 1em;
margin : auto;
}
#namemessage {
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 1em;
border : 2px solid black;
border-radius : 0.5em;
height : 7em;
}
#tweetWrapper { /*트윗 메시지 창*/
list-style: none;
padding-left: 0.1em;
}
.white { /*트윗 메시지 별 리스트*/
display : flex;
justify-content : flex-start;
border : 1px solid grey;
border-radius: 0.5em;
padding : 0.5em;
margin : 0.5em;
}
.tweet__createdAt { /*시간*/
display : flex;
justify-content : center; /*시간 가운데 정렬*/
color :grey;
font-size: 0.1em;
}
.tweet__username{ /*유저명*/
padding-right: 1em;
font-size: 0.7em;
}
.tweet__message { /*메시지 내용*/
font-size: 0.7em;
}
.tweet__username:before { /*유저명 옆에 사람 모양*/
content: " 👤";
}
.tweet__username:after { /*유저명 후에 : 표시*/
content : " : ";
}
#rb { /*randombutton 가운데 정렬*/
display : flex;
justify-content: center;
}
.bt { /*버튼 바탕 흰색*/
background-color: white;
}
/*아래는 버튼 배경 관련 요소를 깨끗하게 보이게 하기 위한 코드로, 구글에서 찾은 코드북붙한거임*/
button{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
text-decoration: none;
display: inline-block;
border: none;
}
#m { /*메시지 왼쪽 정렬*/
display :flex;
justify-content: flex-start;
}<main.css>
페어분들이 많이 도와주셔서 성공적으로 끝낼 수 있었다.
아직 모르는 것이 많지만, 더 깊게 공부하는 것보다 이틀 동안 배운 내용을 확실히 내 것으로 만드는 데에 집중해야겠다.
이 수업으로 프론트엔드 맛보기 수업은 끝이다. 프론트엔드 영역의 공부는 생각했던 것보다 흥미로웠다. 지금 당장은 아니지만, 나중에 혼자서 조금씩 공부해봐야겠다. 하나의 완전한 서비스를 혼자서 구현해보고 싶다는 목표가 생겼다. 내일부터는 본격적인 백엔드 관련 수업이 시작된다. 화이팅하자!
728x90
'결과물' 카테고리의 다른 글
| AI-DLC를 활용한 업무용 툴 개발기 (3) | 2026.02.02 |
|---|---|
| 백엔드 개발자 기술면접 대비 디스코드 면접관 봇 만들기 (3) | 2023.03.16 |
