지그재그 화면을 구현해보자.
이걸 하는 이유는,
1. html, css로 기본적인 수준으로 하나를 구현해보면서 직접 활용해보고자 했다. 내가 공부한 것이 실제로 하나의 프로젝트를 구현하기에 최소한으로 충분할까? 를 점검하고, 부족한 점이 있다면 공부해보고 싶었다.
그렇게 공부하고나면 이후에 본격적으로 공부를 시작할 때 더 좋은 방법이 있는지 등등 질좋은 피드백을 받을 수 있을 것이기 때문에.
- 지금까지 공부한 함수들을 활용하고, 특히 혼자 머리 싸매면서 엉성하게나마 구현해본 기능들을 종합적으로 합쳐 한번더 만들어보고싶었다.
3.반응형 웹 구현과 json형태의 데이터를 받아 웹에 노출하고, 필터링 하는 기능은 강의를 듣고 그대로 따라 해보았는데, 한 번 더 혼자 아예 다른 버전으로 새롭게 만들어보면서 기억이 나지 않는 부분은 체크하고, 직접 만들어보고싶었다.
구현하고자 하는 기능
- 캐러셀 : 배너
- 자동 슬라이드가 가능하다면 시도해보기
- 좌우 화살표를 클릭하면 넘어가도록 만들기
- 기본 뼈대 만들기
- html,css로 만들기
- 아이템 목록을 json데이터 형태로 만든다음, 브라우저에 노출시키고, 필터링하기
그 외 다른 기능을 구현하려는 건 아니기 때문에,
기존 앱과는 다르게 상단의 메뉴를 바지,상의 등의 아이템 필터링 기준항목으로 만들고, 해당 메뉴를 누르면 하단의 아이템 노출이 필터링되는것으로 만들고 싶다.
와이어 프레이밍
시멘틱 태그를 사용해 코딩하고 싶었다.
이전에 업무 자동화를 위해 코딩을 진행했을 때, 오류가 나면 수정하기 위해 얼마나 찾아헤맸는지 모른다.
시멘틱 태그는 의미를 포함하는 태그이다.
사실 이전에 공부할 때 텍스트로는 그래서 시멘틱 태그가 뭔지..무슨 기능이 있다는 건지.. 어떻게 사용한다는 건지 감이 오지 않았다. 텍스트로 화려하게 설명이 되어있지만 결국 스스로 부딪혀보면서 필요성을 느끼고 해결책이 '이것'이다, 라고 깨닫는 순간 제대로 배울 수 있는 것 같다.
그래서 텍스트로 공부하기 보단 당장 직접 코드를 짜보려고 하는 것이기도 하다.
이렇게 하면 태그 앞쪽만 읽어도, 어떤 식으로 구성되어있는지 쉽게 알 수 있고 특정 영역의 코드를 찾고 싶을 때 빠르게 찾을 수 있다. 구조가 한 눈에 파악되기 때문이다.
<nav class="navbar">logo, search, cart</nav>
<nav class="navbar2">//
<div class="menu"></div>
<div class="menu"></div>
<div class="menu"></div>
<div class="menu"></div>
<div class="menu"></div>
</nav>
<article class="banner"></div>//
<title class="title"></title>//
<article class="items">//
<div class="item">
<div class="item_img"></div>
<div class="item_description"></div>
<div class="item_price"></div>
</div>
<div class="item">
<div class="item_img"></div>
<div class="item_description"></div>
<div class="item_price"></div>
</div>
<div class="item">
<div class="item_img"></div>
<div class="item_description"></div>
<div class="item_price"></div>
</div>
<div class="popup"></div>
<footer class="footer">//
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
</footer>
</article>
못났지만..이런식으로 배경색을 넣어 각 영역을 표시한 뒤 구조를 잡았다.
결과물
html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="newp.css" />
<script src="src/main.js" defer></script>
</head>
<body>
<nav class="navbar">
<img src="img/logo_zigzag.png" alt="logo" class="logo">
<input type="text" class="search" placeholder="검색어를 입력하세요">
<img src="img/cart_zigzag.png" alt="cart" class="cart">
</nav>
<nav class="navbar2">
<button class="menu">상의</button>
<button class="menu">하의</button>
<button class="menu">전체</button>
<button class="menu">검정</button>
<button class="menu">파랑</button>
</nav>
<article class="banner">
<img src="img/banner1_zigzag.png" alt="banner_img1" class="banner_img">
<div class="dots">
<button class="dot"></button>
<button class="dot"></button>
<button class="dot"></button>
</div>
</article>
<box class="title">당신을 위한 추천 아이템</box>
<!-- title시멘틱 태그는 텍스트가 보이지 않는다. 왜일까? -->
<section class="items">
<div class="item">
<img src="img/item_img1.png" alt="tshirts" class="item_img">
<box class="item_description">
<div class="item_mall">림스몰</div>
<div class="item_title">푸른 셔츠</div>
<div class="item_price">9,900</div>
</box>
</div>
<div class="item">
<img src="img/item_img2.png" alt="pants" class="item_img">
<box class="item_description">
<div class="item_mall">벨벳데이즈</div>
<div class="item_title">푸른하늘색(귀염밴딩)</div>
<div class="item_price">22,800</div>
</box>
</div>
<div class="item">
<img src="img/item_img3.png" alt="skirt" class="item_img">
<box class="item_description">
<div class="item_mall">시크릿라벨</div>
<div class="item_title">스커트</div>
<div class="item_price">106,000</div>
</box>
</section>
</div>
<div class="popup">
<box class="popup_box">
<img src="img/icon_popup.png" alt="popup_icon" class="popup_icon">
<div class="popup_text">지금 보는 상품 10만원 할인받기 ></div>
<button class="popup_close">X</button>
</box>
</div>
<footer class="footer">
<button class="btn_footer">
<img src="img/icon1_footer.png" alt="icon1" class="imt_footer">
<div class="text_footer">홈</div></button>
<button class="btn_footer">
<img src="img/icon2_footer.png" alt="" class="imt_footer">
<div class="text_footer">쇼핑몰</div>
</button>
<button class="btn_footer">
<img src="img/icon3_footer.png" alt="" class="imt_footer">
<div class="text_footer">모아보기</div>
</button>
<button class="btn_footer">
<img src="img/icon4_footer.png" alt="" class="imt_footer">
<div class="text_footer">찜</div>
</button>
<button class="btn_footer">
<img src="img/icon5_footer.png" alt="" class="imt_footer">
<div class="text_footer">마이페이지</div>
</button>
</footer>
</body>
</html>
css
:root {
--height-navbar: 40px;
--font-size-item: 10px;
--font-color: rgb(65, 65, 65);
}
body {
padding: 20px;
font-family: "paybook_font";
}
.navbar {
background-color: transparent;
display: flex;
justify-content: center;
justify-content: space-between;
align-items: center;
height: var(--height-navbar);
/* padding: 10px; */
}
.logo {
height: var(--height-navbar);
}
.cart {
height: var(--height-navbar);
}
.search {
border: none;
border-radius: 50px;
background-color: rgb(245, 245, 245);
height: 33px;
width: 250px;
}
.navbar2 {
display: flex;
justify-content: center;
justify-content: space-around;
height: 50px;
}
.menu {
font-weight: bold;
border: none;
background-color: transparent;
font-size: 15px;
color: gray;
cursor: pointer;
}
.banner {
background-color: rgb(247, 62, 163);
height: 200px;
margin-bottom: 50px;
}
.dots {
position: absolute;
top: 290px;
left: 220px;
}
.dot {
border-radius: 100px;
width: 1px;
border-color: transparent;
background-color: rgb(179, 40, 121);
}
.title {
background-color: transparent;
font-weight: bold;
color: var(--font-color);
height: 150px;
margin-top: 10px;
margin-left: 10px;
}
.items {
background-color: transparent;
height: 190px;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10px;
}
.item {
/* width: 900px; */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
justify-content: space-between;
}
.item_mall {
font-size: var(--font-size-item);
padding: 1px;
}
.item_title {
font-size: var(--font-size-item);
padding: 1px;
}
.item_price {
font-size: 15px;
font-weight: 900;
padding: 1px;
color: black;
}
.item_img {
height: 100%;
width: 90%;
border-radius: 5px;
padding-bottom: 5px;
}
.item_description {
color: var(--font-color);
width: 90%;
height: 30%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
}
.popup {
display: flex;
justify-content: center;
}
.popup_box {
height: 40px;
width: 400px;
border-radius: 7px;
/* margin: 20px; */
background-color: rgb(44, 44, 44);
display: flex;
align-items: center;
}
.popup_icon {
height: 15px;
border-radius: 100px;
margin-left: 13px;
}
.popup_text {
margin-left: 15px;
color: rgba(228, 228, 228, 0.801);
font-size: 1px;
font-weight: 700;
}
.popup_close {
background-color: transparent;
border: none;
color: rgba(255, 255, 255, 0.404);
font-size: 5px;
margin-left: 170px;
}
.footer {
background-color: transparent;
margin-top: 20px;
border: 10px;
height: 50px;
display: flex;
justify-content: space-around;
}
.btn_footer {
font-size: 10px;
background-color: transparent;
border: none;
margin-top: 15px;
}
.text_footer {
color: gray;
margin-top: 4px;
}
Why?에서 시작해 How를 찾는 과정을 좋아합니다. 그 고민과 성장의 과정을 꾸준히 기록하고자 합니다.
혹시 클론코딩 관련해서 질문 해두될가요?? 처음하는거라 잘모르겠어요 ㅠㅠ