쓱 쇼핑몰 장바구니

[손자병법]

HTML --------------------------------------------

<p class="at4_title">장바구니 <span>이용TIP</span></p>
        <div class="at4_left">
            <ul class="at4_menu">
                <li>일반배송 (2개) &hearts;</li>
                <li>해외배송 (0개)</li>
                <li>경기배송 (0개)</li>
            </ul>
            <div class="at4_choose">
                <div>
                    <input type="checkbox" checked>
                    <label for="all_choose">전체선택</label>&#160; &#160;
                    <span>선택삭제</span>
                </div>
                <ul class="at4_combo">
                    <li>택배배송 상품 : 2개
                        <ul>
                            <li>
                                <div><img src="img/img13.jpg"></div>
                                <div>
                                    <p><span>신세계백화점</span> · 본점</p>
                                    <p>코오롱스포츠</p>
                                    <p>(JK_IDW1456 2019 겨울상품) 스포츠</p>
                                    <p>할인 이벤트 대상 품목</p>
                                    <p>옵션 블랙 </p>
                                </div>
                                <div>
                                    <p>120,000원</p>
                                    <p class="counter">
                                        <strick>150,000원</strick><br>
                                        <span>-</span><span>1</span><span>+</span>
                                    </p>
                                </div>
                                <div>청구할인 ></div>
                                <div>
                                    <p style="background: white; color: white; width: 80%; color: black; 
                                                 text-align: center; border: 1px solid black; margin: 5px auto;">
                                        장바구니
                                    </p>
                                    <p style="background: red; color: white; width: 80%; 
                                                  text-align: center; border: 1px solid black; margin: 5px auto;">
                                        바로구매
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div><img src="img/img10.jpg"></div>
                                <div>
                                    <p><span>신세계백화점</span> · 본점</p>
                                    <p>코오롱스포츠</p>
                                    <p>(JK_IDW1456 2019 겨울상품) 스포츠</p>
                                    <p>할인 이벤트 대상 품목</p>
                                    <p>옵션 블랙 </p>
                                </div>
                                <div>
                                    <p>170,000원</p>
                                    <p class="counter">
                                        <strick>110,000원</strick><br>
                                        <span>-</span><span>1</span><span>+</span>
                                    </p>
                                </div>
                                <div>청구할인 ></div>
                                <div>
                                    <p style="background: white; color: white; width: 80%; color: black; 
                                                 text-align: center; border: 1px solid black; margin: 5px auto;">
                                        장바구니
                                    </p>
                                    <p style="background: red; color: white; width: 80%; 
                                                  text-align: center; border: 1px solid black; margin: 5px auto;">
                                        바로구매
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div class=" at4_right">
            <p><i class="fas fa-map-marker-alt"></i> 로그인을 해 보세요</p>
            <p>로그인을 하시면 지금 보고있는 상품을 나중에도
                확인하실 수 있습니다.
            </p>
            <p style="width: 80%; height: 50px; text-align: center; 
                         line-height: 50px; border: 1px solid #ccc;
                         margin: 50px auto; ">
                로그인하기
            </p>
            <p style="width: 80%; height: 50px; text-align: left; 
                         line-height: 50px; border: 1px solid #ccc;
                         margin: 50px auto; ">
                <i class="fas fa-unlock"></i> 전체상품 : 2개
            </p>
            <p style="width: 80%; height: 100px; text-align: left; 
                         line-height: 50px; border: 1px solid #ccc;
                         margin: -50px auto; ">
                <span><img src="img/img13.jpg"></span>
                <span><img src="img/img10.jpg"></span>
            </p>
            <ul>
                <li>주문금액</li>
                <li>69,000원</li>
            </ul>
            <ul>
                <li>할인금액</li>
                <li>6,900원</li>
            </ul>
            <ul>
                <li>배송비</li>
                <li>8,500원</li>
            </ul>
            <ul>
                <li>기타비용</li>
                <li>0원</li>
            </ul>
            <ul style="color:red; height: 50px;line-height: 50px;
                          font-size: 20px;">
                <li>결재 예정 금액</li>
                <li>53,400원</li>
            </ul>
            <ul style="text-align: center;">
                <li style="width: 100%; height: 70px; line-height: 70px;
                             background: tomato; color: white;
                             font-size: 30px;cursor: pointer;">
                    주문하기
                </li>
                <li class="at4_right_choose">선물하기</li>
                <li class="at4_right_choose">선물조르기</li>
            </ul>
        </div>

CSS -------------------------------------------------------------

#at4 #at4_title {
  width: 100%; height: 50px; border: 0px solid blue;
  font-size: 25px; line-height: 50px; 
}
#at4 #at4_title span {
  border: 1px solid#ccc; font-size: 15px;
  border-radius: 10px; padding: 3px;
}
#at4>div {
  float: left;
  height: 700px; outline: 0px solid green;
}
#at4>#at4_left { width: 70%; }
#at4>#at4_right { width: 30%; }
#at4>#at4_left>#at4_menu {
  width: 100%; height: 50px;
}
#at4>#at4_left>#at4_menu>li {
  float: left;
  width: 33.3%; height: 100%;
  outline: 1px solid #ccc;
  text-align: center; line-height: 50px; cursor: pointer;
}
#at4>#at4_left>#at4_menu>li:hover { 
  background: #464759 ; color: white;
}
#at4>#at4_left>#at4_choose {
  height: 40px;
  border-bottom: 3px solid black;
}
#at4>#at4_left>#at4_choose>div {
  height: 100%;
}
#at4>#at4_left>#at4_choose>div>#at4_combo {
  height: 50px;
  border-bottom: 3px solid black;
}
#at4>#at4_left>#at4_choose>#at4_combo> li {
  height: 100%;
}
#at4>#at4_left>#at4_choose>#at4_combo> li >ul {
  height: 200px;
}
#at4>#at4_left>#at4_choose>#at4_combo> li >ul>li {
  height: 200px; border-bottom: 1px solid #ccc;
}
#at4>#at4_left>#at4_choose>#at4_combo> li >ul>li>div {
  float: left; height: 100%;
  outline: 0px solid #ccc;
}
#at4>#at4_left>#at4_choose>#at4_combo> li >ul>li>div:nth-child(1) {
  width: 20%;
}
#at4>#at4_left>#at4_choose>#at4_combo> li >ul>li>div:nth-child(2) {
  width: 30%;
}
#at4>#at4_left>#at4_choose>#at4_combo> li >ul>li>div:nth-child(3) {
  width: 20%;
}
#at4>#at4_left>#at4_choose>#at4_combo> li >ul>li>div:nth-child(4) {
  width: 15%;
}
#at4>#at4_left>#at4_choose>#at4_combo> li >ul>li>div:nth-child(5) {
  width: 15%;
}
#at4>#at4_left>#at4_choose>#at4_combo> li >ul>li>div img {
  width: 80%; height: 80%;
  margin-top: 20px; margin-left: 10%;
}
#at4>#at4_left>#at4_choose>#at4_combo> li >ul>li>div p {
  line-height: 30px;
}
#at4>#at4_left>#at4_choose>#at4_combo> li >ul>li>div p.counter span {
  display: inline-block; width: 30px; height: 30px;
  border: 1px solid black; text-align: center;
  font-weight: bold;
}
#at4>#at4_left>#at4_choose>#at4_combo> li >ul>li>div p:first-child {
  margin-top: 15px;
}

#at4>#at4_right>p {
  width: 80%; margin: 0 auto;
  height: 30px; line-height: 30px;
}
#at4>#at4_right>p>span {
  display: inline-block;
  width: 30%;  height: 100px;
  border: 1px solid#ccc;
}
#at4>#at4_right>p>span img {
  width: 90%;  height: 90%;
  margin-top: 5px; margin-left: 5%;
}
#at4>#at4_right>ul {
  width: 80%;   height: 30px; 
  line-height: 30px;
  position: relative; top: 70px; left: 10%;
}

#at4>#at4_right>ul li {
  float: left;
  width: 50%; height: 100%;
  border-bottom: 1px dashed #ccc;
}
#at4>#at4_right>ul li:last-child {
  float: right; text-align: right;
}
#at4>#at4_right>ul li#at4_right_choose {
  height: 50px; line-height: 50px;
  text-align: center;
}
#at4>#at4_right>ul li#at4_right_choose:hover {
  background: black; color: white;
  height: 50px; line-height: 50px;
  cursor: pointer;
}