[Project] Webucks Clone Coding #3 [커피 상세 페이지 레이아웃 구현]

Wook·2021년 11월 28일
CSSWeCodeclonecodinghtmlprojectwebucks
0

[Project] Webucks Clone Coding

목록 보기
3/6
post-thumbnail

📍 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는 초반부중에서도 초반부기도 하고 전반적인 내용이지만, 프로젝트를 진행하면서 내가 부족한 부분이나 미숙한 부분을 점검하면서 더 성장할 기회를 준 시간이었던 것 같다. 이 글을 작성하는 시점은 모든 프로젝트의 내용 구현을 마친 후에 내 자신을 돌아보기 위한 회고록이자 프로젝트에 모든 내용과 나 자신을 되돌아 보기 위한 피드백이기도 하다.

📲 커피 상세 페이지 레이아웃 구현

HTML과 CSS를 이용하여 스타벅스 페이지의 한 가지 메뉴의 상세 페이지를 구현하는 단계이다. 이전 단계처럼 이벤트를 구현할 것은 없지만, 구현할 것이 이전 단계보다 훨씬 많은 단계이고, 가장 많은 시간이 투자된 단계였다. (실제로 가장 피곤하고 육체적으로 힘들었던 단계...)

🐳 My Code

<HTML>

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>list</title>
    <link href="styles/detail.css" rel="stylesheet" type="text/css" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
        integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
</head>

<body>
    <nav> <!--최상단의 배너-->
        <div class="menu">
            <a href="" class="logo">Webucks</a>
            <ul>
                <li><a href="" class="li">COFFEE</a></li>
                <li><a href="" class="li">MENU</a></li>
                <li><a href="" class="li">STORE</a></li>
                <li><a href="" class="li">WHAT'S NEW</a></li>
            </ul>
        </div>
    </nav>

    <section> <!--중반부의 레이아웃-->

        <div class="container" id="one"> <!-- 중반부 전체를 감싸는 div 태그-->
            
            <div class="first"> <!--중반부 를 두개의 div태그로 나누어 왼쪽 절반의 구역으로 나눠줌-->
                <p class="coldbrew">콜드 브루</p>
                <img src="coffeedetailpage.PNG" alt="콜드브루">
            </div>

            <div class="second"> <!--중반부 를 두개의 div태그로 나누어 오른쪾 절반의 구역으로 나눠줌-->
                    <br>
                    <p class="gray">홈 > MENU > 음료 > 에스프레소 > 화이트 초콜릿 모카</p>

                    <div id="fifth">
                        <div class="emojiright">
                            <p class="coffeename">화이트 초콜릿 모카</p>
                            <p class="coffeename2">White Chocolate Mocha</p>
                        </div>
                        <div id="heart2">
                            <a href="#"><i class="far fa-heart" id="heart3"></i></a>
                        </div>
                    </div>

                    <p class="seconddetail">달콤하고 부드러운 화이트 초콜릿 시럽과 에스프레소를 스팀 밀크와 섞어
                        휘핑크림으로 마무리한 음료로 달콤함과 강렬한 에스프레소가 부드럽게 어우러진 커피</p>

                    <div class="productdetail">
                        <span>제품 영양 정보</span>
                        <span>Tall(톨) / 355ml (12 fl oz)</span>
                    </div>

                    <div class="productdetail2"> <!--영양정보를 담아주는 div 태그-->
                        <div class="boxone"> <!--영양 정보를 좌우로 반반 나눠주었으며, 왼쪽에 해당하는 div 태그-->
                            <ul>
                                <li>
                                    <span class="l">1회 지공량(kcal)</span>
                                    <span>345</span class="r">
                                </li>
                                <li>
                                    <span class="l">포화지방 (g)</span>
                                    <span>11</span class="r">
                                </li>
                                <li>
                                    <span class="l">단백질 (g)</span>
                                    <span>11</span class="r">
                                </li>
                            </ul>
                        </div>

                        <div class="boxtwo"> <!--영양 정보를 좌우로 반반 나눠주었으며, 오른쪽에 해당하는 div 태그-->
                            <ul>
                            <ul>
                                <li>
                                    <span class="l">나트륨(mg))</span>
                                    <span>150</span class="r">
                                </li>
                                <li>
                                    <span class="l">당류 (g)</span>
                                    <span>35</span class="r">
                                </li>
                                <li>
                                    <span class="l">카페인 (mg)</span>
                                    <span>75</span class="r">
                                </li>
                            </ul>
                        </div>

                    </div>

                    <div class="allegy">알레르기 유발 요인 : 우유</div>

                    <p class="reviewnav">리뷰</p>

                    <div class="Allcomment"> <!--모든 댓글 내용을 담아내는 div 태그-->
                        <div class="comment"> <!-- comment class는 각각 하나의 댓글을 담아냄 -->
                            <span class="id">coffee_lover</span>
                            <span class="ment">너무 맛있어요!</span>
                            <button class="deletebutton">삭제</button>
                            <a href="#" class="commentheart"><i class="far fa-heart"></i></a>
                        </div>

                        <div class="comment">
                            <span class="id">CHOCO7</span>
                            <span class="ment">오늘도 화이트 초콜릿 모카를 마시러 갑니다</span>
                            <button class="deletebutton">삭제</button>
                            <a href="#" class="commentheart"><i class="far fa-heart hearts"></i></a>
                        </div>

                        <div class="comment">
                            <span class="id">legend_dev</span>
                            <span class="ment">진짜 화이트 초콜릿 모카는 전설이다.
                                진짜 화이트 초콜릿 모카는 전설이다.
                                진짜 화이트 초콜릿 모카는 전설이다.
                            </span>
                            <button class="deletebutton">삭제</button>
                            <a href="#" class="commentheart"><i class="far fa-heart"></i></a>
                        </div>
                    </div>

                    <input text="" placeholder="리뷰를 입력해주세요" class="reviewcomment"
                            onkeyup="if(window.event.keyCode==13){test()}"> <!--후반부에 구현할 댓글 입력을 위한 input 태그-->
    </section>
    
    <footer> <!-- 최하단부의 배너를 담는 fotter 태그 -->
    <div class="bottomzone">
        <div>
            <p>COMPANY</p>
            <ul>
                <li>한눈에 보기</li>
                <li>스타벅스 사명</li>
                <li>스타벅스 소개</li>
                <li>국내 뉴스룸</li>
                <li>세계의 스타벅스</li>
                <li>글로벌 뉴스룸</li>
            </ul>
        </div>

        <div>
            <p>CORPORATE SALES</p>
            <ul>
                <li>단체 및 기업 구매 안내</li>
            </ul>
        </div>

        <div>
            <p>PARTNERSHIP</p>
            <ul>
                <li>신규 입점 제의</li>
                <li>협력 고객사 등록 신청</li>
            </ul>
        </div>

        <div>
            <p>ONLINE COMMUNITY</p>
            <ul>
                <li>페이스북</li>
                <li>트위터</li>
                <li>유튜브</li>
                <li>블로그</li>
                <li>인스타그램</li>
            </ul>
        </div>

        <div>
            <p>RECRUIT</p>
            <ul>
                <li>채용 소개</li>
                <li>채용 지원하기</li>
            </ul>
        </div>

        <div>
            <p>WEBUCKS</p>
        </div>

    </div>
    </footer>

</body>

<script src="js/detail.js">
</script> <!--후반부의 기능들을 구현하기 위한 js 코드-->

</html>

<CSS>

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

li {
  margin: 0;
  padding: 0;
}

ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
}

.container {
  width: 900px;
  margin: 10px auto;
} /*폭을 일정하게 담기 위한 css*/

.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  width: 900px;
  margin: 10px auto;
  background-color: #f4f4f2;
} /* 상단 메뉴를 디자인하는 CSS */

.logo {
  font-family: "Dancing Script", cursive;
  font-size: 35px;
  text-decoration: none;
  color: black;
  margin-left: 3%;
  font-weight: bold;
} /* Webucks font를 위한 CSS*/

li .menu-list {
  margin-right: 10px;
  padding: 10px;
  color: black;
  text-decoration: none;
  color: gray;
} /* 상단 배너 내의 버튼들을 디자인해주는 CSS */

.first {
  width: 50%;
  margin-right: 5px;
} /* 화면을 이분할하기 위해 width에 50% 적용 */

.second {
  width: 50%;
} /* 화면을 이분할하기 위해 width에 50% 적용 */

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

.coldbrew {
  font-size: 23px;
  font-weight: bold;
}

#one {
  display: flex;
} /* container div중 하나를 선택하기 위한 id태그*/

#one img {
  width: 95%;
}

.gray {
  text-align: right;
  color: gray;
  font-size: 12px;
  font-style: bold;
}

.coffeename {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 0;
}

.coffeename2 {
  font-size: 13px;
  margin-top: 3px;
  padding-bottom: 5px;
}

.seconddetail {
  padding-top: 17px;
  border-top: 3px solid black;
  font-size: 13px;
  font-weight: bold;
  padding-bottom: 30px;
  border-bottom: 1px solid lightgray;
  margin: 0;
}

.productdetail {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid lightgray;
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 0;
}

.productdetail span {
  margin-left: 12px;
  margin-right: 12px;
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 0;
}
.productdetail2 {
  display: flex;
  justify-content: space-between;

  padding-top: 20px;
  padding-bottom: 20px;
  margin: 0;
}
.boxone {
  width: 50%;
  border-right: 2px dotted gray;
}
.boxtwo {
  width: 50%;
}

.productdetail2 ul {
  display: flex;
  flex-direction: column;
  padding: 10px 5px 10px 3px;
  margin: 0 15px 0 15px;
}

.productdetail2 li {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  margin-bottom: 5px;
} /* productdetail2 의 ul과 ㅣi 모두 화면과 같은 레이아웃을 적용해주기 위해 
위와 같이 Flex가 주된 css 적용*/

.allegy {
  display: flex;
  background-color: rgb(243, 240, 240);
  height: 45px;
  align-items: center;
  padding-left: 10px;
  border-radius: 3px;
  font-weight: bold;
}
.reviewnav {
  font-size: 20px;
  font-weight: bold;
  border-bottom: 1px solid lightgray;
  padding-top: 10px;
  padding-bottom: 15px;
}

.id {
  font-weight: bold;
  font-size: 13px;
}

.ment {
  font-size: 13px;
  margin-left: 5px;
}

.reviewcomment {
  font-size: 13px;
  font-weight: bold;
  color: rgb(151, 143, 143);
  background-color: rgb(243, 240, 240);
  margin-top: 20px;
  padding: 7px;
  width: 100%;
  border: 1px solid rgb(243, 240, 240);
} /* 리뷰 입력창을 위한 CSS*/

.bottomzone {
  display: flex;
  background-color: rgb(44, 40, 40);
  padding: 30px;
  justify-content: space-around;
  color: white;
  font-size: 13px;
  padding-top: 40px;
} /* 최하단부의 배너를 포괄하는 div의 CSS*/

.bottomzone ul {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  padding: 0;
}

.bottomzone li {
  padding-bottom: 8px;
}
/* 최하단부의 ul과 li에 적용된 CSS*/

📲 구현 화면

⛳️ 회고

HTML과 CSS를 적용하여 스타벅스의 단일 메뉴 상세 페이지 레이아웃을 구현하는 프로젝트였습니다. 우선 HTML의 어떤 태그를 사용하던 레이아웃을 동일하게 구현하는 것이 최종 목표이기에 제가 배운 부분들중에서 가장 적합한 tag와 attribute를 사용하는 것에 중점을 두고 프로젝트를 진행하였습니다. (물론 아직 매우 미숙합니다..)
사용하는 기능들이나 Tag가 어려운건 아니지만, 레이아웃을 절반으로 나눠주는 과정이나, flex 속성을 적절하게 부여해주는 부분, 댓글 창에 적용해주는 CSS 등등의 작업들이 초심자인 저에게는 많은 시간을 요구하였습니다.. (실제로 다른 분들도 이 단계에서 많은 시간을 소비하셨다고 합니다..)
시간이 오래 걸렸지만 그만큼 얻어가는 것들도 많았습니다. 막연하게 배우기만 한 flex 속성을 을 상황에 따라 그에 적합한 속성을 적용하는 법을 더 자세히 익힐 수 있었고, div태그를 통해 레이아웃을 절반씩 이뤄주는 방법등에 대해서 생각해보았습니다. ("flex를 사용했더라면 더 시간이 지체되지 않고 효율적이지 않았을까?" 하는 제 자신에 대한 피드백도 크게 느낄 수 있었습니다.)
사실 이 단계는 하드코딩의 단계라고 많은 분들이 느꼈겠지만, 그만큼 얻어가는 부분이 많았다고 생각합니다. 이 프로젝트를 진행하면서 HTML과 CSS를 복습할 수 있었습니다.

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

[Project] Webucks Clone Coding #2 [커피 리스트 페이지 레이아웃 구현]

다음 포스트

[Project] Webucks Clone Coding #4 [커피 상세 페이지 기능 구현]

0개의 댓글