html의 table 태그를 배운 김에 네이버 쇼핑 장바구니를 만들어봤다. 정말 앱등이스러운 장바구니다.
table 태그를 활용하는 게 주 목적이라 글씨체나 다른 부분들은 크게 신경쓰지 않았는데 그래도 얼핏 보면 그럴듯해서 만족스럽다.
그런데 css 작성해놓은 걸 보면 전혀 그럴듯하지 않다..
처음에 너무 쉽게 생각하고 html을 후다닥 만들고 시작했는데, 한 칸 안에 들어가야하는 스타일 요소가 많아서 각 td에 class를 지정해주지 않은 것이 가면 갈수록 짐이 되어 css파일을 지저분하게 만들었다.
모든 td에 class를 주면 html이 너무 지저분해질 것 같아서 그렇게 하지 않은 것이였는데 완전히 오판이였고, 뒤늦게 바꾸려니 이미 css를 거의 작성한 뒤라 모두 갈아 엎어야하는 상태라 결국 포기하고 마무리해버렸다.
게다가 class 없이 계속 스타일을 지정하다보니 css 파일이 너무 난잡해서 간단한 건 html에서 style을 지정해줘버리는 만행까지..
다음부터는 꼭.. class 아낌없이 쥐어주고 스타일링은 모두 css 파일 내에서 깔끔하게 정리해야겠다.
<body>
<section class="cart">
<div class="cart__information">
<ul>
<li>장바구니 상품은 최대 30일간 저장됩니다.</li>
<li>가격, 옵션 등 정보가 변경된 경우 주문이 불가할 수 있습니다.</li>
<li>오늘출발 상품은 판매자 설정 시점에 따라 오늘출발 여부가 변경될 수 있으니 주문 시 꼭 다시 확인해 주시기 바랍니다.</li>
</ul>
</div>
<table class="cart__list">
<form>
<thead>
<tr>
<td><input type="checkbox"></td>
<td colspan="2">상품정보</td>
<td>옵션</td>
<td>상품금액</td>
<td>배송비</td>
</tr>
</thead>
<tbody>
<tr class="cart__list__detail">
<td><input type="checkbox"></td>
<td><img src="image/keyboard.jpg" alt="magic keyboard"></td>
<td><a href="#">애플 공식 브랜드스토어</a><span class="cart__list__smartstore"> 스마트스토어</span>
<p>Apple 매직 키보드 - 한국어(MK2A3KH/A)</p>
<sapn class="price">116,62원</sapn><span
style="text-decoration: line-through; color: lightgray;">119,000</span>
</td>
<td class="cart__list__option">
<p>모델명 : 키보드 - 한국어 MK2A3KH/A / 1개</p>
<button class="cart__list__optionbtn">주문조건 추가/변경</button>
</td>
<td><span class="price">116,620원</span><br>
<button class="cart__list__orderbtn">주문하기</button>
</td>
<td>무료</td>
</tr>
<tr class="cart__list__detail">
<td style="width: 2%;"><input type="checkbox"></td>
<td style="width: 13%;">
<img src="image/mouse.jpg" alt="magic mouse">
</td>
<td style="width: 27%;"><a href="#">컴퓨존</a><span class="cart__list__smartstore"> 스마트스토어</span>
<p>[애플] Magic Mouse [MK2E3KH/A]</p>
<span class=" price">88,900원</span>
</td>
<td class="cart__list__option" style="width: 27%;">
<p>상품 주문 수량: 1개</p>
<button class="cart__list__optionbtn">주문조건 추가/변경</button>
</td>
<td style="width: 15%;"><span class="price">88,900원</span><br>
<button class="cart__list__orderbtn">주문하기</button>
</td>
<td style="width: 15%;">무료</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"><input type="checkbox"> <button class="cart__list__optionbtn">선택상품 삭제</button>
<button class="cart__list__optionbtn">선택상품 찜</button>
</td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</form>
</table>
<div class="cart__mainbtns">
<button class="cart__bigorderbtn left">쇼핑 계속하기</button>
<button class="cart__bigorderbtn right">주문하기</button>
</div>
</section>
</body>body {
margin: 0;
}
* {
box-sizing: border-box;
}
p,
span {
margin: 0;
}
a {
color: black;
}
img {
display: block;
width: 80%;
height: 80px;
margin: auto;
}
.cart {
width: 80%;
margin: auto;
padding: 30px;
}
.cart ul {
background-color: whitesmoke;
padding: 30px;
margin-bottom: 50px;
border: whitesmoke solid 1px;
border-radius: 5px;
font-size: 13px;
font-weight: 300;
}
.cart ul :first-child {
color: limegreen;
}
table {
border-top: solid 1.5px black;
border-collapse: collapse;
width: 100%;
font-size: 14px;
}
thead {
text-align: center;
font-weight: bold;
}
tbody {
font-size: 12px;
}
td {
padding: 15px 0px;
border-bottom: 1px solid lightgrey;
}
.cart__list__detail :nth-child(3) {
vertical-align: top;
}
.cart__list__detail :nth-child(3) a {
font-size: 12px;
}
.cart__list__detail :nth-child(3) p {
margin-top: 6px;
font-weight: bold;
}
.cart__list__smartstore {
font-size: 12px;
color: gray;
}
.cart__list__option {
vertical-align: top;
padding: 20px;
}
.cart__list__option p {
margin-bottom: 25px;
position: relative;
}
.cart__list__option p::after {
content: "";
width: 90%;
height: 1px;
background-color: lightgrey;
left: 0px;
top: 25px;
position: absolute;
}
.cart__list__optionbtn {
background-color: white;
font-size: 10px;
border: lightgrey solid 1px;
padding: 7px;
}
.cart__list__detail :nth-child(4),
.cart__list__detail :nth-child(5),
.cart__list__detail :nth-child(6) {
border-left: 2px solid whitesmoke;
}
.cart__list__detail :nth-child(5),
.cart__list__detail :nth-child(6) {
text-align: center;
}
.cart__list__detail :nth-child(5) button {
background-color: limegreen;
color: white;
border: none;
border-radius: 5px;
padding: 4px 8px;
font-size: 12px;
margin-top: 5px;
}
.price {
font-weight: bold;
}
.cart__mainbtns {
width: 420px;
height: 200px;
padding-top: 40px;
display: block;
margin: auto;
}
.cart__bigorderbtn {
width: 200px;
height: 50px;
font-size: 16px;
margin: auto;
border-radius: 5px;
}
.cart__bigorderbtn.left {
background-color: white;
border: 1px lightgray solid;
}
.cart__bigorderbtn.right {
background-color: limegreen;
color: white;
border: none;
}'Language & Framework > 실습' 카테고리의 다른 글
| 바닐라 자바스크립트로 캐러셀(Carousel) 슬라이드 만들기.(문제 해결 완료) (0) | 2022.02.18 |
|---|---|
| HTML , CSS 클론 코딩 (0) | 2022.02.17 |
| 드림코딩 엘리 선생님의 포트폴리오 웹사이트 클론코딩 완강 및 후기 (2) | 2022.02.02 |
| 유튜브 웹 페이지 클론 코딩. 결과물. (0) | 2021.12.31 |
| 애플 상단바 따라 만들기. 결과. (0) | 2021.12.28 |
