라라리라

2023.08.12 / 미니 프로젝트 - 코딩24일차 본문

코딩/2023 HTML & CSS

2023.08.12 / 미니 프로젝트 - 코딩24일차

헤실 2023. 8. 13. 00:10

메인페이지.html

<!DOCTYPE html>
<html lang="ko">
<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>메인페이지</title>
    <style>
       
        #headerTable1 {
            margin: 0 auto;
            text-align: center;
            width: 1980px;
            height: 20px;
            background-color: lightgrey
        }
        #headerSpace {
            width: 900px;
            background-color: lightgrey
        }
        #headerSpace2 {
            width: 450px;
            background-color: lightgrey
        }
        .headerMenu {
            font-size: 12px;
            width: 60px;
            height: 30px;
            background-color: lightgrey
        }
        #headerTable2 {
            margin: 0 auto;
            text-align: center;
            width: 1080px;
            height: 100px;
        }
       
        .logoImg {
            width: 120px;
        }
       
       
        #navTable {
            margin: 0 auto;
            text-align: center;
            width: 1080px;
        }
        .navMenu {
            width: 200px;
            height: 50px;
            font-size: 16px;
            font-weight: bold;
        }
        .searchInput {
            width: 500px;
            height: 30px;
            border: 1px solid lightgray;
        }
        .searchImg {
            width: 40px;
            height: 25px;
           
            cursor: pointer;
        }

       
        #contentsTable {
            margin: 0 auto;
        }
        .bannerImg {
            width: 1900px;
        }

       
        #footerTable {
            margin: 0 auto;
            text-align: center;
        }
        .footerMenu {
           
            font-size: 10px;
            color: gray;
            line-height: 15px;
            padding: 30px 30px;
            width: 1900px;
            background-color: rgb(51, 51, 51);
        }
        #bottomTable{
            margin: 0 auto;
            width: 1280px;
            text-align: left;
        }

     
        a {
            text-decoration: none;
            color: black;
        }
        a:hover {
            color: purple;
        }
        table, tr, td {
            border-collapse: collapse;
           
        }
       
        html,
        body {
            height: 100%;
         
            margin: 0;
            padding: 0;
        }
        body {
            display: flex;
            flex-direction: column;
        }
        #footer-top {
            flex: 1;
        }      

    </style>
</head>
<body>
   
    <table id="headerTable1">
        <tr>
            <td id="headerSpace2"></td>
            <td class="headerMenu"><a href="">즐겨찾기</a> </td>
            <td class="headerMenu"><a href="">입점신청</a> </td>
            <td id="headerSpace"></td>
            <td class="headerMenu"><a href="회원가입.html">회원가입</a></td>
            <td class="headerMenu"><a href="쿠팡로그인.html">로그인</a></td>
            <td class="headerMenu"><a href="고객문의.html">고객센터</a></td>
            <td id="headerSpace2"></td>
        </tr>
    </table>
    <table id="headerTable2">
        <tr>
            <td rowspan="3"><a href=""><img src="9046112.png" width="80px" height="100px"></a></td>
            <td rowspan="2" colspan="2"><a href=""><img src="logo_coupang_w350.png" width="180px" height="45px"></a></td>
            <td rowspan="2" colspan="4"><input class="searchInput" type="text" placeholder="검색어를 입력해주세요"></div>
            </td>
            <td rowspan="2"><div class="searchImg"><img src="2866321.png" width="25px" height="25px"></div></td>
           
            <td rowspan="2"><a href=""><img src="2815428.png" width="50px" height="50px"></a><br>마이쿠팡
        </td>
            <td rowspan="2"><a href=""><img src="1000_F_586795457_G8WtyPKaVQCAeoEWQzjkEQtL4nlsquya.jpg" width="50px" height="50px"></a><br>장바구니</td>
        </tr>
        <tr>
           
           
           
           
           
           
        </tr>
        <tr>
            <td><a href=""><img src="logo_rocket_symbol_large.png" width=" 20px" height="20px">로켓배송</a></td>
            <td><a href=""><img src="pc_header_rocket_fresh_1x.png" width=" 20px" height="20px">로켓프레시</a></td>
            <td><a href=""><img src="logoBizonlyBrown.png" width=" 20px" height="16px">쿠팡비즈</a></td>
            <td><a href=""><img src="Overseas.png" width=" 20px" height="20px">로켓직구</a></td>
            <td><a href="">골드박스</a></td>
            <td><a href="">와우회원할인</a></td>
            <td><a href="">이벤트/쿠폰</a></td>
            <td><a href=""><img src="RETURNED_MARKET_B@2x.png" width=" 20px" height="20px">반품마켓</a></td>
            <td><a href=""><img src="icon_government_promotion.png" width=" 20px" height="20px">착한상점</a></td>
        </tr>
    </table>
   
    <table id="contentsTable">
        <tr>
            <td><a href="상품상세.html"><img class="bannerImg" src="Untitled-2.jpg"></a></td>
        </tr>
    </table>

    <div id="footer-top"></div>
 
    <table id="footerTable">
        <tr>
            <td class="footerMenu">
                <table id="bottomTable">
                   
                    <tr>
            <td>사이버몰 내 판매되는 상품 중에는 쿠팡에 등록한 개별 판매자가 판매하는 마켓플레이스(오픈마켓) 상품이 포함되어 있습니다.</td>
            <td class="wall" rowspan="5"><a href="https://www.facebook.com/Coupang.korea"><img src="th.jpg" width="40px" height="40px"></a></td>
            <td class="wall" rowspan="5"><a href="https://news.coupang.com/"><img src="R.png" width="40px" height="40px"></a></td>
            <td class="wall" rowspan="5"><a href="https://www.instagram.com/coupang/"><img src="instagram-icone-icon-2.png" width="40px" height="40px"></a></td>
                        </tr>
                        <tr>
            <td class="wall">마켓플레이스(오픈마켓) 상품의 경우 쿠팡은 통신판매중개자이며 통신판매의 당사자가 아닙니다.
               
            </tr><tr>
                <td class="wall">쿠팡은 마켓플레이스(오픈마켓) 상품, 거래정보 및 거래 등에 대하여 책임을 지지 않습니다.</td>
               
                </tr><tr>
                <td class="wall">쿠팡은 소비자 보호와 안전거래를 위해 신뢰관리센터(CM112@coupang.com)를 운영하고 있으며, 관련 분쟁이 발생할 경우 별도의 분쟁 처리절차에 의거 분쟁이 처리됩니다.</td>
               
            </tr><tr>
                <td class="wall"><em>Copyright © Coupang Corp. 2010-2022 All Rights Reserved.</em></td>
               
            </tr>
            <tr>
               
               
            </tr>
            </table>
            </td>
        </tr>
    </table>

</body>
</html>

 

 

 

상품상세.html

 

<!DOCTYPE html>
<html lang="ko">
<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>제품 상세 페이지</title>
    <style>
       
        #headerTable1 {
            margin: 0 auto;
            text-align: center;
            width: 1980px;
            height: 20px;
            background-color: lightgrey
        }
        #headerSpace {
            width: 900px;
            background-color: lightgrey
        }
        #headerSpace2 {
            width: 600px;
            background-color: lightgrey
        }
        .headerMenu {
            font-size: 12px;
            width: 60px;
            height: 30px;
            background-color: lightgrey
        }
        #headerTable2 {
            margin: 0 auto;
            text-align: center;
            width: 1080px;
            height: 100px;
        }
       
        .logoImg {
            width: 120px;
        }
       
       
        #navTable {
            margin: 0 auto;
            text-align: center;
            width: 1080px;
        }
        .navMenu {
            width: 200px;
            height: 50px;
            font-size: 16px;
            font-weight: bold;
        }
        .searchInput {
            width: 500px;
            height: 30px;
            border: 1px solid lightgray;
        }
        .searchImg {
            width: 40px;
            height: 25px;
           
            cursor: pointer;
        }

        /* contents */
        #itemTable {
            margin: 0 auto;
            margin-top: 30px;
            height: 500px;
        }
        #itemInfoTable {
            width: 400px;
        }
        .itemImg {
            height: 450px;
            margin-bottom: 200px;
        }
        .itemNameTd {
            height: 30px;
            font-size: 18px;
           
        }
        .itemInfoTd {
            font-size: 16px;
            color: blue;
            height: 10px;
        }
        .itemPriceTd {
            height: 60px;
        }
        .itemPrice {
            font-size: 26px;
            font-weight: bold;
            color:brown;
            height: 60px;
        }
       
        .itemTotalTd {
            background-color: whitesmoke;
            border: 1px solid lightgray;
            height: 150px;
        }
        .itemTotalText {
            font-size: 13px;
        }
        .itemTotalNumber {
            font-size: 32px;
            font-weight: bold;
        }
        .itemCartTd {
            height: 100px;
        }
        .cartBtn {
            width: 180px;
            height: 50px;
            background:  blue;
            border: 1px solid blue;
            border-radius: 5px;
            font-size: 16px;
            font-weight: bold;
            color: white;
            cursor: pointer;
        }
        .cartBtn2 {
            width: 180px;
            height: 50px;
            background:  white;
            border: 1px solid blue;
            border-radius: 5px;
            font-size: 16px;
            font-weight: bold;
            color: blue;
            cursor: pointer;
        }
        .rowSpace {
            height: 150px;
        }
        .colSpace {
            width: 50px;
        }
        .bold-text {
            font-size: 14px;
            font-weight: bold;
        }
        .small-text {
            font-size: 12px;
            color: black;
        }
        .gray-text {
            font-size: 14px;
            color: gray;
            margin-left: 10px;
            margin-top: 10px;
            margin-bottom: 10px;
           

        }
        .blue-text {
            font-size: 14px;
            color: blue;
            margin-left: 10px;
            margin-top: 10px;
            margin-bottom: 10px;
           

        }
        /*contents */
        #footer-top {
            flex: 1;
            background-color: white;
        }

        #footerTable {
            margin: 0 auto;
            text-align: center;
        }
        .footerMenu {
           
            font-size: 10px;
            color: gray;
            line-height: 15px;
            padding: 30px 30px;
            width: 1900px;
            background-color: rgb(51, 51, 51);
        }
        #bottomTable{
            margin: 0 auto;
            width: 1280px;
            text-align: left;
        }

     
        a {
            text-decoration: none;
            color: black;
        }
        a:hover {
            color: purple;
        }
        table, tr, td {
            border-collapse: collapse;
           
        }
       
        html,
        body {
            height: 100%;
         
            margin: 0;
            padding: 0;
        }
        body {
            display: flex;
            flex-direction: column;
        }
        #footer-top {
            flex: 1;
        }      

    </style>
</head>
<body>
   
    <table id="headerTable1">
        <tr>
            <td id="headerSpace2"></td>
            <td class="headerMenu"><a href="">즐겨찾기</a> </td>
            <td class="headerMenu"><a href="">입점신청</a> </td>
            <td id="headerSpace"></td>
            <td class="headerMenu"><a href="회원가입.html">회원가입</a></td>
            <td class="headerMenu"><a href="쿠팡로그인.html">로그인</a></td>
            <td class="headerMenu"><a href="고객문의.html">고객센터</a></td>
            <td id="headerSpace2"></td>
        </tr>
    </table>
    <table id="headerTable2">
        <tr>
            <td rowspan="3"><a href="메인.html"><img src="9046112.png" width="80px" height="100px"></a></td>
            <td rowspan="2" colspan="2"><a href="메인.html"><img src="logo_coupang_w350.png" width="180px" height="45px"></a></td>
            <td rowspan="2" colspan="4"><input class="searchInput" type="text" placeholder="검색어를 입력해주세요"></div>
            </td>  
            <td rowspan="2"><div class="searchImg"><img src="2866321.png" width="25px" height="25px"></div></td>
           
            <td rowspan="2"><a href=""><img src="2815428.png" width="50px" height="50px" id="mycoupang"></a><br>
                <label for="mycoupang">마이쿠팡</label>
        </td>
            <td rowspan="2"><a href=""><img src="1000_F_586795457_G8WtyPKaVQCAeoEWQzjkEQtL4nlsquya.jpg" width="50px" height="50px"></a><br>장바구니</td>
        </tr>
        <tr>
           
           
           
           
           
           
        </tr>
        <tr>
            <td><a href=""><img src="logo_rocket_symbol_large.png" width=" 20px" height="20px">로켓배송</a></td>
            <td><a href=""><img src="pc_header_rocket_fresh_1x.png" width=" 20px" height="20px">로켓프레시</a></td>
            <td><a href=""><img src="logoBizonlyBrown.png" width=" 20px" height="16px">쿠팡비즈</a></td>
            <td><a href=""><img src="Overseas.png" width=" 20px" height="20px">로켓직구</a></td>
            <td><a href="">골드박스</a></td>
            <td><a href="">와우회원할인</a></td>
            <td><a href="">이벤트/쿠폰</a></td>
            <td><a href=""><img src="RETURNED_MARKET_B@2x.png" width=" 20px" height="20px">반품마켓</a></td>
            <td><a href=""><img src="icon_government_promotion.png" width=" 20px" height="20px">착한상점</a></td>
        </tr>
    </table>

       
        <table id="itemTable">
            <tr>
                <td rowspan="6">
                    <img class="itemImg" src="Main-3.jpg">
                </td>
                <td class="colSpace"></td>
                <td>
                    <table id="itemInfoTable">
                        <tr>
                            <td class="itemNameTd"><strong>
                                가정용 고당도 아삭아삭 게르마늄 사과 (꿀 사과 부사) 10kg
                            </strong>
                            </td>
                        </tr>
                        <tr>
                            <td class="itemInfoTd">
                                <input type="image" img src="stock-vector-five-stars-customer-product-rating-review-flat-icon-for-apps-and-websites-679261426 (2).jpg" width="70px" height="25px">&nbsp;9개 상품평
                                <hr color="lightgray" size="1px">
                            </td>
                           
                        </tr>
                       
                        <tr>
                            <td class="itemPriceTd">
                                <span class="itemPrice">69,900</span>원<br>
                                <span class="small-text">최대 3,495원 적립</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <hr color="lightgray" size="1px">
                                <span class="small-text">배송비 3,000원<br>
                                    모레(목) 7/27 도착 예정</span>
                                <hr color="lightgray" size="1px">
                                <span class="small-text" ><strong>판매자 : 태양상회</strong></span><br>
                                <span class="small-text" >판매자 평가 : 68%</span>
                                <hr color="lightgray" size="1px">
                                <span class="small-text">배송사 : 롯데택배</span>
                                <hr color="lightgray" size="1px">
                                <span class="bold-text">중량 : 10kg</span>
                            </td>
                        </tr>
                        <tr>
                           
                            <td class="itemCountTd">
                                <hr color="lightgray" size="1px">
                                캐시 적립 혜택 | 최대 3,495원 적립
                            </td>
                        </tr>
                        <tr>
                            <td class="itemTotalTd">
                                <span class="gray-text">쿠페이 머니 결제 시 1% 적립</span><br><br>
                                <span class="gray-text">[로켓와우 + 쿠페이 계좌이체] 결제 시 2% 적립</span><br><br>
                                <span class="gray-text">[로켓와우 + 쿠페이 머니] 결제 시 4% 추가적립 2774일 남음</span><br>
                                <input class="blue-text" type="button" value="로켓와우 무료체험 신청하기" ><br>
                               
                            </td>
                           
                        </tr>
                       
                        <tr>
                           
                            <td class="itemCartTd">
                                <hr color="lightgray" size="1px">
                               
                                <button class="cartBtn">장바구니 담기</button>
                                <button class="cartBtn2">바로구매 ></button>
                            </td>
                           
                    </table>
                </td>
            </tr>
        </table>
           
           
           
         
        <div id="footer-top"></div>
    <table id="footerTable">
        <tr>
            <td class="footerMenu">
                <table id="bottomTable">
                   
                    <tr>
            <td>사이버몰 내 판매되는 상품 중에는 쿠팡에 등록한 개별 판매자가 판매하는 마켓플레이스(오픈마켓) 상품이 포함되어 있습니다.</td>
            <td class="wall" rowspan="5"><a href="https://www.facebook.com/Coupang.korea"><img src="th.jpg" width="40px" height="40px"></a></td>
            <td class="wall" rowspan="5"><a href="https://news.coupang.com/"><img src="R.png" width="40px" height="40px"></a></td>
            <td class="wall" rowspan="5"><a href="https://www.instagram.com/coupang/"><img src="instagram-icone-icon-2.png" width="40px" height="40px"></a></td>
                        </tr>
                        <tr>
            <td class="wall">마켓플레이스(오픈마켓) 상품의 경우 쿠팡은 통신판매중개자이며 통신판매의 당사자가 아닙니다.
               
            </tr><tr>
                <td class="wall">쿠팡은 마켓플레이스(오픈마켓) 상품, 거래정보 및 거래 등에 대하여 책임을 지지 않습니다.</td>
               
                </tr><tr>
                <td class="wall">쿠팡은 소비자 보호와 안전거래를 위해 신뢰관리센터(CM112@coupang.com)를 운영하고 있으며, 관련 분쟁이 발생할 경우 별도의 분쟁 처리절차에 의거 분쟁이 처리됩니다.</td>
               
            </tr><tr>
                <td class="wall"><em>Copyright © Coupang Corp. 2010-2022 All Rights Reserved.</em></td>
               
            </tr>
            <tr>
               
               
            </tr>
            </table>
            </td>
        </tr>
    </table>

</body>
</html>

 

 

저작자표시

'코딩 > 2023 HTML & CSS' 카테고리의 다른 글

2023.08.13 / 미니 프로젝트 - 코딩25일차  (0) 2023.08.13
2023.08.11 / CSS4 - 코딩 23 일차  (0) 2023.08.11
2023.08.10 / CSS3 - 코딩 22 일차  (0) 2023.08.10
2023.08.09 / CSS2 - 코딩 21 일차  (0) 2023.08.09
2023.07.21 / HTML 4- 코딩 2 일차  (0) 2023.07.21
'코딩/2023 HTML & CSS' Related Articles more