html 4일 10/31

권준석·2022년 10월 31일

휴먼 아카데미 웹프로그래밍 과정 1~20

목록 보기

4/20

main-page.css

body {
    margin: 50px;
}

#main {
    width: 1500px;
    height: 1000px;
    background-color: rgb(242, 238, 241);
    margin: 0px auto;
    border-top: 10px;

}

header {
    width: 1500px;
    height: 100px;
    

}

.main-menu {
    margin-left: 100px;
    float: left;
    text-align: center;
    color: rgb(150, 191, 33);
    box-sizing: border-box;
}

.main-menu#sel {
    margin-top: 40px;
}

.main-menu#menu {
    margin-top: 40px;
    margin-left: 100px;
    font-size: 20px;
}

header ul {
    float: right;
    margin-right: 30px;
}

header ul li a {
    text-decoration: none;
    margin-left: 10px;
    color: rgb(150, 191, 33);
}

header ul li {
    display: inline;
}



nav {
    width: 1500px;
    height: 70px;
    background-color: rgb(79, 75, 78);
    float: left;
    text-align: center;
    font-size: 20px;
    
}

nav ul li {
    display: inline;
    margin-left: 90px;
    box-sizing: border-box;
}

nav ul li a {
    text-decoration: none;
    color: white;


}
nav ul li:hover{
    background-color: black;
}

aside {
    width: 300px;
    height: 650px;
    float: left;
    margin-top: 25px;
    margin-left: 25px;
}

.item {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

#item-title {
    background-color: rgb(150, 191, 33);
    text-align: center;
}

.item tr td {
    border-bottom: 2px solid;
    border-bottom-color: rgb(130, 133, 129);


}

.item tr td a {
    width: 100%;
    text-decoration: none;
    color: grey;
    margin-left: 20px;

}

.item tr td:hover {
    background-color: black;
    color: white;
}

footer {
    width: 1500px;
    height: 200px;
    float: left;
    margin-top: 10px;
    text-align: center;
}

join.css

section {
    width: 1000px;
    height: 800px;
    background-color: aquamarine;
    float: left;
   
   
}

section table {
    width: 600px;
    height: 600px;

    margin: 0px auto;
}

.text {
    width: 200px;
    height: 50px;
}

form {
    font-size: 30px;
}

#join {
    width: 100px;
    height: 50px;
    text-align: center;
}

#btn {
    width: 100px;
    height: 50px;
}

.int{
    display: block;
    position: relative;
    width: 50%;
    height: 30px;
    font-size: 15px;
    box-sizing: border-box;
}

home.css

section {
           width: 800px;
           height: 600px;
           float: left;
           margin-top: 25px;
       }

       .notice {
           background-color: white;
           box-shadow: 0px 0px 3px #000;
           width: 300px;
           height: 200px;
           float: left;
           margin-top: 25px;
           margin-left: 10px;
        

       }
       .notice #btn{
        width: 70px;
        height: 30px;
        margin-left: 100;
       
       }
       

       li::marker {
           color: aqua;
       }

       .title {
           border-bottom: 2px solid;
           border-bottom-color: rgb(130, 133, 129);
           color: rgb(150, 191, 33);
       }

       #event {
           width: 300px;
           height: 200px;
           background-color: aqua;
           float: left;
           margin-top: 15px;
           margin-left: 10px;
       }

       #font {
           font-size: 17px;
       }

       #g {
           color: lightgreen;
       }

index.html

<!DOCTYPE html>
<html lang="kr">

<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="./css/main-page.css">
    <link rel="stylesheet" href="./css/home.css">

</head>

<body>
    <div id="main">
        <header>
            <div class="main-menu">
                <a href="index.html"><img src="./logo_img/logo-removebg-preview-removebg-preview.png"></a>
            </div>
            <div class="main-menu" id="sel">
                <tr>
                    <td>SEARCH</td>
                    <input type="text">
                    <input type="image" src="./img/돋보기.png" alt="#" style="width: 20px;height: 20px;">

                </tr>
            </div>
            <ul class="main-menu" id="menu">
                <li><a href="#">로그인</a></li>
                <li><a href="join_from.html">회원가입</a></li>
                <li><a href="#">마이페이지</a></li>
                <li><a href="#">이용안내</a></li>
                <li><a href="#">고객샌터</a></li>
            </ul>
        </header>
        <nav>
            <ul>
                <li><a href="#">상세 페이지</a></li>
                <li><a href="#">장바구니</a></li>
                <li><a href="#">고객 갤러리</a></li>
                <li><a href="#">주문배송</a></li>
                <li><a href="#">자주 하는 질문</a></li>
            </ul>

        </nav>
        <aside>
            <table class="item">
                <th id="item-title">
                    <h1 style="color: white; ">CATEGORY ITEM</h1>
                </th>
                <tr>
                    <td><a href="#">생활아트</a></td>
                </tr>
                <tr>
                    <td><a href="#">캔버스 아트</a></td>
                </tr>
                <tr>
                    <td><a href="#">사진 벽지</a></td>
                </tr>
                <tr>
                    <td><a href="#">창문형/현관형</a></td>
                </tr>
                <tr>
                    <td><a href="#">포인트 벽지</a></td>
                </tr>
                <tr>
                    <td><a href="#">세계지도</a></td>
                </tr>
                <tr>
                    <td><a href="#">앤티크 세계지도 벽지</a></td>
                </tr>
                <tr>
                    <td><a href="#">입체 세계지도 벽지</a></td>
                </tr>
                <tr>
                    <td><a href="#">어린이방 세계지도</a></td>
                </tr>
                <tr>
                    <td><a href="#">족자형 롤스크린</a></td>
                </tr>
                <td><a href="#">맞춤제작 결제창</a></td>
                </tr>
            </table>
        </aside>
        <section>
            <div>
                <img src="./img/얼룩말.png" style="width: 800px; height: 600px;">
            </div>
        </section>
        <div>
            <table class="notice">
                <tr><td>아이디</td><td><input type="text"></td></tr>
                <tr><td>비밀번호</td><td><input type="text"></td></tr>
                <tr colspan="2" ><td ><input id="btn" type="submit" value="Login" ></td></tr>
            </table>

        </div>
        <div>
            <table class="notice">
                <tr>
                    <td class="title">NOTICE</td>
                </tr>
                <tr>
                    <td>
                        <li>폭설로 인한 배송지연 안내</li>
                    </td>
                </tr>
                <tr>
                    <td>
                        <li>폭설로 인한 배송지연 안내</li>
                    </td>
                </tr>
                <tr>
                    <td>
                        <li>폭설로 인한 배송지연 안내</li>
                    </td>
                </tr>
                <tr>
                    <td>
                        <li>폭설로 인한 배송지연 안내</li>
                    </td>
                </tr>
                <tr>
                    <td>
                        <li>폭설로 인한 배송지연 안내</li>
                    </td>
                </tr>
                <tr>
                    <td>
                        <li>폭설로 인한 배송지연 안내</li>
                    </td>
                </tr>
                <tr>
                    <td>
                        <li>폭설로 인한 배송지연 안내</li>
                    </td>
                </tr>
            </table>
        </div>
        <div>
            <table class="notice">
                <tr>
                    <td class="title">THE WEEK'S EVENT</td>
                </tr>
                <tr>
                    <td id="font"><span>이번 주의 </span><span id="g">이벤트 상품</span>을 확인하세요!</td>
                </tr>
                <tr>
                    <td><img src="./img/세계지도.PNG" style="width: 300px; height: 150px;"></td>
                </tr>
            </table>
        </div>
        <footer>
            <div>
                <p>판매자 : 권준석</p>
                <p>상호 : 다현아트</p>
                <p>주소 : 경기도 수원시</p>
                <p>전화번호 : 031-1234-1234</p>
            </div>

        </footer>
    </div>
</body>

</html>

join_from.html

<!DOCTYPE html>
<html lang="kr">

<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="./css/main-page.css">
    <link rel="stylesheet" href="./css/join.css">
</head>

<body>
    <header>
        <div class="main-menu">
            <a href="index.html"><img src="./logo_img/logo-removebg-preview-removebg-preview.png"></a>
        </div>
        <div class="main-menu" id="sel">
            <td>SEARCH</td>
            <input type="text">
            <input type="image" src="./img/돋보기.png" alt="#" style="width: 20px;height: 20px;">

        </div>
        <ul class="main-menu" id="menu">
            <li><a href="#">[로그인]</a></li>
            <li><a href="join_from.html">[회원가입]</a></li>
            <li><a href="#">[마이페이지]</a></li>
            <li><a href="#">[이용안내]</a></li>
            <li><a href="#">[고객샌터]</a></li>
        </ul>
    </header>
    <nav>
        <ul>
            <li><a href="#">상세 페이지</a></li>
            <li><a href="#">장바구니</a></li>
            <li><a href="#">고객 갤러리</a></li>
            <li><a href="#">주문배송</a></li>
            <li><a href="#">자주 하는 질문</a></li>
        </ul>

    </nav>
    <aside>
        <table class="item">
            <th id="item-title">
                <h1 style="color: white; ">CATEGORY ITEM</h1>
            </th>
            <tr>
                <td><a href="#">생활아트</a></td>
            </tr>
            <tr>
                <td><a href="#">캔버스 아트</a></td>
            </tr>
            <tr>
                <td><a href="#">사진 벽지</a></td>
            </tr>
            <tr>
                <td><a href="#">창문형/현관형</a></td>
            </tr>
            <tr>
                <td><a href="#">포인트 벽지</a></td>
            </tr>
            <tr>
                <td><a href="#">세계지도</a></td>
            </tr>
            <tr>
                <td><a href="#">앤티크 세계지도 벽지</a></td>
            </tr>
            <tr>
                <td><a href="#">입체 세계지도 벽지</a></td>
            </tr>
            <tr>
                <td><a href="#">어린이방 세계지도</a></td>
            </tr>
            <tr>
                <td><a href="#">족자형 롤스크린</a></td>
            </tr>
            <td><a href="#">맞춤제작 결제창</a></td>
            </tr>
        </table>
    </aside>
    <section>
        <form action="#" method="get">
            <div>
                <label for="id">
                    <h3>아이디</h3>
                </label>
                <span>
                    <input type="text" id="id" name="id" title="ID" maxlength="20">
                </span>
            </div>
            <div>
                <label for="id">
                    <h3>아이디</h3>
                </label>
                <span class="box">
                    <input type="text" id="id" name="id" title="ID" maxlength="20">
                </span>
            </div>
            <div>
                <label for="id">
                    <h3>아이디</h3>
                </label>
                <span class="box">
                    <input type="text" id="id" name="id" title="ID" maxlength="20">
                </span>
            </div>
            <div>
                <label for="id">
                    <h3>아이디</h3>
                </label>
                <span class="box">
                    <input type="text" id="id" name="id" class="int" title="ID" maxlength="20">
                </span>
            </div>

        </form>
    </section>
    <footer>
        <div>
            <p>판매자 : 권준석</p>
            <p>상호 : 다현아트</p>
            <p>주소 : 경기도 수원시</p>
            <p>전화번호 : 031-1234-1234</p>
        </div>

    </footer>
    </div>


</body>

</html>

권준석

ㅇㅇ

이전 포스트

html 3일 10/28

다음 포스트

html 4일 10/31

휴먼 아카데미 웹프로그래밍 과정 1~20

main-page.css

join.css

home.css

index.html

join_from.html

html 3일 10/28

html 5일 11/01

0개의 댓글