HTML
태그를 적절하게 사용하여 페이지 레이아웃을 스스로 구현할 수 있다.CSS
기초 개념을 활용하여 원하는 디자인을 요소에 적용할 수 있다. input
태그 활용법에 대해 익힌다.JavaScript
로 여러 기능을 구현하여 DOM
의 요소를 조작할 수 있다.git flow
를 이해하고 PR을 작성하여 github
을 통한 코드 리뷰 방식을 이해한다.그 동안 배운 HTML
, CSS
의 학습내용을 모두 이용해서 Starbucks 홈페이지와 유사한 웹페이지를 만들고, JavaScript
을 구현하여 기능들을 구현하는 프로젝트였으며, 드디어 공부한 내용을 활용하여 프로젝트를 할 수 있다는 생각에 신나기까지 했다. 프론트엔드에서 HTML
,CSS
,JavaScript
는 초반부이며 전반적인 내용이지만, 프로젝트를 진행하면서 내가 부족한 부분이나 미숙한 부분을 점검하면서 더 성장할 기회를 준 시간이었던 것 같다. 이 글을 작성하는 시점은 모든 프로젝트의 내용 구현을 마친 후에 내 자신을 돌아보기 위한 회고록이자 프로젝트에 모든 내용과 나 자신을 되돌아 보기 위한 피드백이기도 하다.
<HTML>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>list</title>
<link href="styles/list.css" rel="stylesheet" type="text/css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<!--하트 이모티콘을 위한 CSS -->
</head>
<body>
<nav> <!--최 상단부의 로고와 각종 버튼이 담겨진 배너-->
<a href="#" class="logo">Webucks</a>
<ul>
<li><a href="" class="topbanner-list">MENU</a></li>
<li><a href="" class="topbanner-list">COFFEE</a></li>
<li><a href="" class="topbanner-list">STORE</a></li>
<li><a href="" class="topbanner-list">WHAT'S NEW</a></li>
</ul>
</nav>
<div class="menu-banner"> <!--메뉴 리스트 위의 배너-->
<span class="cold">콜드 브루 커피</span>
<img src="coffeeicon.png" alt="커피" class="icon">
<span class="dcf">디카페인 에스프레소 샷 추가 가능(일부 음료 제외)</span>
</div>
<div class="menu-list"> <!--사진을 포함한 전체 메뉴를 담는 div태그로 class값으로 "menu-list"값을 가짐-->
<div class="linetemplate">
<ul> <!--ul태그를 사용하여 메뉴와 해당 이미지를 리스트 형태로 담아줌-->
<li><a href=""><img src="coffeeimg.jpeg" alt="커피이미지"></a>
<div class="nameandheart">
<span><a href="">아메리카노</a></span>
<a href="#" class="heart3"><i class="far fa-heart"></i></a>
</div>
</li>
<li><a href=""><img src="coffeeimg.jpeg" alt="커피이미지"></a>
<div class="nameandheart">
<span><a href="">카푸치노</a></span>
<a href="#" class="heart3"><i class="far fa-heart"></i></a>
</div>
</li>
<li><a href=""><img src="coffeeimg.jpeg" alt="커피이미지"></a>
<div class="nameandheart">
<span><a href="">카페모카</a></span>
<a href="#" class="heart3"><i class="far fa-heart"></i></a>
</div>
</li>
<li><a href=""><img src="엽떡.jpeg" alt="커피이미지"></a>
<div class="nameandheart">
<span><a href="">엽떡</a></span>
<a href="#" class="heart3"><i class="far fa-heart"></i></a>
</div>
</li>
<li><a href=""><img src="허니콤보.jpeg" alt="커피이미지"></a>
<div class="nameandheart">
<span><a href="">허니콤보</a></span>
<a href="#" class="heart3"><i class="far fa-heart"></i></a>
</div>
</li>
<li><a href=""><img src="뿌링클.jpeg" alt="커피이미지"></a>
<div class="nameandheart">
<span><a href="">뿌링클</a></span>
<a href="#" class="heart3"><i class="far fa-heart"></i></a>
</div>
</li>
<li><a href=""><img src="coffeeimg.jpeg" alt="커피이미지"></a>
<div class="nameandheart">
<span><a href="">김치커피</a></span>
<a href="#" class="heart3"><i class="far fa-heart"></i></a>
</div>
</li>
<li><a href=""><img src="짜파게티.jpeg" alt="커피이미지"></a>
<div class="nameandheart">
<span><a href="">짜파게티</a></span>
<a href="#" class="heart3"><i class="far fa-heart"></i></a>
</div>
</li>
<li><a href=""><img src="생수.jpeg" alt="커피이미지"></a>
<div class="nameandheart">
<span><a href="">생수</a></span>
<a href="#" class="heart3"><i class="far fa-heart"></i></a>
</div>
</li>
<li><a href=""><img src="콜라.jpeg" alt="커피이미지"></a>
<div class="nameandheart">
<span><a href="">콜라</a></span>
<a href="#" class="heart3"><i class="far fa-heart"></i></a>
</div>
</li>
</ul>
</div>
</div>
<div class="menu-banner"> <!-- 하단 두번쨰 메뉴리스트를 위한 배너-->
<span class="cold">브루드 커피</span>
<img src="coffeeicon.png" alt="커피" class="icon">
<span class="dcf">디카페인 에스프레소 샷 추가 가능(일부 음료 제외)</span>
</div>
<div class="menu-list"> <!-- 위와 동일하게 메뉴와 이미지를 보여줌-->
<div class="linetemplate" < href="#" class="heart3">
<ul>
<li><a href="#"><img src="후라이.jpeg" alt="커피이미지"></a>
<div class="nameandheart">
<span><a href="">뿌라이</a></span>
<a href="#" class="heart3"><i class="far fa-heart""></i></a>
</div>
</li>
<li><a href=" #"><img src="토마토.jpeg" alt="커피이미지"></a>
<div class="nameandheart">
<span><a href="">토마토</a></span>
<a href="#" class="heart3"><i class="far fa-heart"></i></a>
</div>
</li>
</ul>
</div>
</div>
</body>
<script src="js/list.js"></script>
<CSS>
* {
box-sizing: border-box;
}
a {
text-decoration: none;
}
ul {
display: flex;
list-style: none;
} /* ul 리스트의 하위 태그들을 병렬로 표시해주기 위해 flex 속성을 적용하였다. */
nav {
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
margin: 3% 5% 3% 5%;
background-color: #f4f4f2;
} /*상단 배너에 flex의 속성을 이용하여 내부 버튼들을 알맞게 레이아웃해줌. */
.menu-banner {
display: flex;
align-items: center;
height: 50px;
margin: 2% 5% 2% 5%;
background-color: #f4f4f2;
} /* nav와 양 옆 마진을 동일하게 해주고, 알맞게 디자인해줌 */
.menu-list {
margin: 3% 5% 3% 5%;
} /* 사진과 텍스트가 포함된 모든 메뉴를 감싸주는 div 태그 */
.logo {
font-family: "Dancing Script", cursive;
font-size: 35px;
text-decoration: none;
color: black;
margin-left: 3%;
font-weight: bold;
} /* Webucks 로고를 디자인해줌 */
li .topbanner-list {
padding: 10px;
color: black;
text-decoration: none;
color: gray;
} /* 상단 배너 내의 버튼들 디자인 */
.cold {
margin-left: 2%;
font-weight: bold;
}
.menu-banner img {
margin-left: 2%;
width: 30px;
}
.menu-banner .dcf {
margin-left: 2%;
font-size: 12px;
font-weight: bold;
}
.menu-list a {
color: black;
font-weight: bold;
}
.linetemplate ul {
display: flex;
padding: 0;
flex-wrap: wrap;
} /* flex wrap을 통해 ul이 가로폭을 넘어사면 아래르 이동되게 해줌 */
.linetemplate li {
width: 25%;
height: 25%;
margin: 0;
padding: 0;
text-align: center;
overflow: hidden;
} /* ul 내의 li 태그들 width를 25%로 지정해주어 한 줄에 네개의 이미지와 리스트 병렬로 나열 */
.linetemplate img {
width: 300px;
height: 300px;
padding: 0;
margin: 0;
transition: all 0.3s linear;
overflow: hidden;
} /* 후반부의 반응형 제작을 위해 이미지 크기를 px로 지정해주고 애니메이션 관련 속성을 지정해줌*/
.linetemplate img:hover {
transform: scale(1.12);
} /* hover 시에 이미지가 1.12배 커지도록 설정해줌 */
.comment {
display: flex;
}
.nameandheat {
text-align: center;
}
.far {
color: red;
}
.fas {
color: red;
}
@media (max-width: 1300px) { // 화면이 1300px 이하일 경우의 Media Query
.linetemplate li {
width: 33%;
height: 33%;
margin: 0;
padding: 0;
text-align: center;
overflow: hidden;
}
.linetemplate img {
width: 320px;
height: 320px;
padding: 0;
margin: 0;
transition: all 0.3s linear;
overflow: hidden;
}
}
@media (max-width: 1100px) { // 화면이 1100px 이하일 경우의 Media Query
.linetemplate li {
width: 50%;
height: 50%;
margin: 0;
padding: 0;
text-align: center;
overflow: hidden;
}
.linetemplate img {
width: 400px;
height: 400px;
padding: 0;
margin: 0;
transition: all 0.3s linear;
overflow: hidden;
}
}
@media (max-width: 900px) { // 화면이 900px 이하일 경우의 Media Query
.linetemplate li {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
overflow: hidden;
}
.linetemplate img {
width: 600px;
height: 600px;
padding: 0;
margin: 0;
transition: all 0.3s linear;
overflow: hidden;
}
}
@media (max-width: 600px) { // 화면이 600px 이하일 경우의 Media Query
.linetemplate li {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
overflow: hidden;
}
.linetemplate img {
width: 90%;
height: 90%;
padding: 0;
margin: 0;
transition: all 0.3s linear;
overflow: hidden;
}
}
JavaScript
와 CSS
를 적용하여 좋아요 버튼과 반응형 레이아웃 구현을 하는 단계이다. 좋아요 버튼은 이전 커피 디테일 페이지에서 적용한 하트 버튼과 크게 다르지 않았기에 그 때와 마찬가지로 하트버튼 클릭시 innerHTML
, 태그 내의 내용을 내부가 채워진 하트와 비워진 하트로 변경해주도록 해주었고, 하트 버튼을 클릭할 때 마다 하트의 모양이 바뀌도록 JavaScript
를 작성해주었다. 반응형 레이아웃 역시 CSS 를 공부하면서 배운 MediaQuery
를 이용하여 전체 화면일 때의 width를 고려하여 화면을 직접 조정해주며 해당 화면의 width(px)마다 적합한 이미지 크기로 변하도록 설정해주었으며, transition
속성을 통해 이미지 크기가 매끄럽게 변하도록 설정해주었다. 프로젝트를 진행하면서 JavaScript
, CSS
가 모두 익숙해지고 조금씩 성장하면서 이번 프로젝트는 비교적 수월하게 해낼수 있었다.
작은 회고 : 이제는 쇼핑몰을 들어가면 Html과 CSS가 어떻게 적용되있을까를 생각해보는 내 자신을 보며, 조금씩 코딩에 익숙해져가는 내가 보이곤 하는데, 더욱 성장하여 쇼핑몰을 보면 "이렇게 구현하면 되겠군" 이라고 생각할 정도로 발전하고 싶다.