[Project] Webucks Clone Coding #6 [커피 리스트 페이지 기능과 반응형 레이아웃 구현]

Wook·2021년 11월 29일
0

📍 What About?


💡 그동안 배운 `HTML`과 `CSS`, 그리고 `JavaScript`를 활용한 위코드 첫 프로젝트가 주어졌다. 프론트엔드 역량을 다지기 위해 스타벅스 페이지를 클론하면서 `HTML`과 `CSS`의 개념을 웹 페이지 개발에 적용하고, JavaScript` 기능을 구현하는 것을 목표로 하며, 별개의 학습 목표도 주어졌다.

⚡️ 학습 목표


  1. HTML 태그를 적절하게 사용하여 페이지 레이아웃을 스스로 구현할 수 있다.
  2. CSS 기초 개념을 활용하여 원하는 디자인을 요소에 적용할 수 있다.
  3. 개발자 도구를 활용하여 실제 페이지 레이아웃의 구성과 적용된 스타일을 확인할 수 있고 필요한 정보를 얻을 수있다.
  4. 로그인 기능을 구현하며 input 태그 활용법에 대해 익힌다.
  5. 과제에서 JavaScript로 여러 기능을 구현하여 DOM의 요소를 조작할 수 있다.
  6. 기본적인 git flow를 이해하고 PR을 작성하여 github을 통한 코드 리뷰 방식을 이해한다.

🌈 My Thoughts

그 동안 배운 HTML, CSS 의 학습내용을 모두 이용해서 Starbucks 홈페이지와 유사한 웹페이지를 만들고, JavaScript을 구현하여 기능들을 구현하는 프로젝트였으며, 드디어 공부한 내용을 활용하여 프로젝트를 할 수 있다는 생각에 신나기까지 했다. 프론트엔드에서 HTML,CSS,JavaScript는 초반부이며 전반적인 내용이지만, 프로젝트를 진행하면서 내가 부족한 부분이나 미숙한 부분을 점검하면서 더 성장할 기회를 준 시간이었던 것 같다. 이 글을 작성하는 시점은 모든 프로젝트의 내용 구현을 마친 후에 내 자신을 돌아보기 위한 회고록이자 프로젝트에 모든 내용과 나 자신을 되돌아 보기 위한 피드백이기도 하다.


📲 커피 리스트 페이지 기능 & 반응현 레이아웃 구현

이전에 구현했던 커피 리스트 레이아웃에 하트 버튼(좋아요)과 반응형 웹을 구현하는 단계이다. 하트 버튼은 아이템 리스트 마다 하나씩 하트 이모티콘(Font Awesome을 통해 구현), 반응형 레이아웃은 CSS를 통한 Media Query 를 사용했다.

🐳 My Code


<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;
  }
}

📲 구현 화면

"첫 화면"

"하트 버튼 클릭시 화면"

"반응형 레이아웃 (리스트 3개)"

"반응형 레이아웃 (리스트 2개)"


⛳️ 회고

JavaScriptCSS를 적용하여 좋아요 버튼과 반응형 레이아웃 구현을 하는 단계이다. 좋아요 버튼은 이전 커피 디테일 페이지에서 적용한 하트 버튼과 크게 다르지 않았기에 그 때와 마찬가지로 하트버튼 클릭시 innerHTML, 태그 내의 내용을 내부가 채워진 하트와 비워진 하트로 변경해주도록 해주었고, 하트 버튼을 클릭할 때 마다 하트의 모양이 바뀌도록 JavaScript를 작성해주었다. 반응형 레이아웃 역시 CSS 를 공부하면서 배운 MediaQuery를 이용하여 전체 화면일 때의 width를 고려하여 화면을 직접 조정해주며 해당 화면의 width(px)마다 적합한 이미지 크기로 변하도록 설정해주었으며, transition 속성을 통해 이미지 크기가 매끄럽게 변하도록 설정해주었다. 프로젝트를 진행하면서 JavaScript, CSS 가 모두 익숙해지고 조금씩 성장하면서 이번 프로젝트는 비교적 수월하게 해낼수 있었다.


작은 회고 : 이제는 쇼핑몰을 들어가면 Html과 CSS가 어떻게 적용되있을까를 생각해보는 내 자신을 보며, 조금씩 코딩에 익숙해져가는 내가 보이곤 하는데, 더욱 성장하여 쇼핑몰을 보면 "이렇게 구현하면 되겠군" 이라고 생각할 정도로 발전하고 싶다.

profile
지속적으로 성장하고 발전하는 진취적인 태도를 가진 개발자의 삶을 추구합니다.

0개의 댓글