✿∘˚˳°∘°

38일차 : [실습] 아이스몰 - 메인페이지 / 로그인 / 장바구니 본문

국비수업/HTML+CSS

38일차 : [실습] 아이스몰 - 메인페이지 / 로그인 / 장바구니

_HYE_ 2023. 1. 22. 13:42

20230118

 

+) 웹페이지 화면 전체 스크린샷 하는법

개발자도구 - Ctrl+Shift+P - full capture 

 

 

1. 아이스몰 - 메인

<!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>
    <link rel="stylesheet" href="css/nanum_font.css">
    <link rel="stylesheet" href="css/icemall1.css">
</head>
<body>
    <div class="ice-wrap">
        <div class="ice-header">
            <div class="header-top">
                <div class="logo">
                    <a href="#">ICE-MALL</a>
                </div>
                <div class="search">
                    <form action="search.html" method="get" id="search-frm">
                        <input type="text" name="search" placeholder="검색어 입력">
                        <input type="submit" value="검색">
                    </form>
                </div>
                <div class="membership-link">
                    <a href="#">CART</a>
                    <a href="[실습]아이스몰2.html">LOGIN</a>
                    <a href="#">JOIN</a>
                </div>
            </div>
            <div class="nav">
                <ul>
                    <li><a href="#">MENU1</a></li>
                    <li><a href="#">MENU2</a></li>
                    <li><a href="#">MENU3</a></li>
                    <li><a href="#">MENU4</a></li>
                    <li><a href="#">MENU5</a></li>
                    <li><a href="#">MENU6</a></li>
                </ul>
            </div>
        </div>
        <div class="ice-content">
            <div class="content-top">
                <h2>ICECREAM</h2>
            </div>
            <div class="content-list">
                <div class="list">
                    <ul>
                        <li><img src="icemall-image/ice3.png"></li>
                        <li><a href="#">민트초코</a></li>
                        <li><a>\3,800</a></li>
                        <li><img src="icemall-image/star-on.png"><img src="icemall-image/star-on.png"><img src="icemall-image/star-on.png"><img src="icemall-image/star-on.png"><img src="icemall-image/star-off.png"></li>
                    </ul>
                </div>
                <div class="list">
                    <ul>
                        <li><img src="icemall-image/ice4.png"></li>
                        <li><a href="#">베리베리 스트로베리</a></li>
                        <li><a>\3,800</a></li>
                        <li><img src="icemall-image/star-on.png"><img src="icemall-image/star-on.png"><img src="icemall-image/star-on.png"><img src="icemall-image/star-on.png"><img src="icemall-image/star-off.png"></li>
                    </ul>
                </div>
                <div class="list">
                    <ul>
                        <li><img src="icemall-image/ice5.png"></li>
                        <li><a href="#">사랑에 빠진 딸기</a></li>
                        <li><a>\3,800</a></li>
                        <li><img src="icemall-image/star-on.png"><img src="icemall-image/star-on.png"><img src="icemall-image/star-on.png"><img src="icemall-image/star-on.png"><img src="icemall-image/star-off.png"></li>
                    </ul>
                </div>
            </div>
            <div class="content-list">
                <div class="list">
                    <ul>
                        <li><img src="icemall-image/ice6.png"></li>
                        <li><a href="#">슈팅스타</a></li>
                        <li><a>\3,800</a></li>
                        <li><img src="icemall-image/star-on.png"><img src="icemall-image/star-on.png"><img src="icemall-image/star-on.png"><img src="icemall-image/star-on.png"><img src="icemall-image/star-off.png"></li>
                    </ul>
                </div>
                <div class="list">
                    <ul>
                        <li><img src="icemall-image/ice1.png"></li>
                        <li><a href="#">엄마는 외계인</a></li>
                        <li><a>\3,800</a></li>
                        <li><img src="icemall-image/star-on.png"><img src="icemall-image/star-on.png"><img src="icemall-image/star-on.png"><img src="icemall-image/star-on.png"><img src="icemall-image/star-off.png"></li>
                    </ul>
                </div>
                <div class="list">
                    <ul>
                        <li><img src="icemall-image/ice2.png"></li>
                        <li><a href="#">아몬드봉봉</a></li>
                        <li><a>\3,800</a></li>
                        <li><img src="icemall-image/star-on.png"><img src="icemall-image/star-on.png"><img src="icemall-image/star-on.png"><img src="icemall-image/star-on.png"><img src="icemall-image/star-on.png"></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="ice-footer">
            <a>ICECREAM</a>
            <a>2023-01-18</a>
            <a>bk_407@daum.net</a>
            <a>HTML&CSS</a>
        </div>
    </div>
</body>
</html>
body{
    margin: 0;
}
.ice-header{
    margin: 0 auto;
    width: 1200px;
    margin-top: 20px;
}
.header-top{
    overflow: hidden;
}

.header-top div{
    float: left;
}
.logo{
    width: 400px;
}
.logo>a{
    font-weight: bold;
    font-size: 40px;
    color: #a1837d;
    padding: 15px;
    text-decoration: none;
}


#search-frm{
    width: 400px;
    padding-top: 10px;
}

input[name=search]{
    width: 250px;
    height: 30px;
    border: none;
    border-bottom: 3px solid #ccc;
    outline: none;
    font-size: 15px;
    padding-left: 10px;
    margin-left: 50px;
    border-radius: 5px;
}
input[name=search]:focus{
    border-bottom: 3px solid pink;
}
#search-frm>input[type=submit]{
    height: 35px;
    background-color: #a1837d;
    border: 3px solid #a1837d;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    margin-left: 5px;
}
#search-frm>input[type=submit]:hover{
    background-color: pink;
    border: 3px solid pink;
}
.membership-link{
    width: 400px;
    text-align: right;
}
.membership-link>a{
    text-decoration: none;
    color: #a1837d;
    line-height: 50px;
    padding: 0px 15px;
    font-weight: bold;
    font-size: 15px;
}
.membership-link>a:hover{
    color: pink;
}

.nav{
    background-color: pink;
    margin-top: 10px;
    overflow: hidden;
}
.nav>ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.nav>ul>li{
    float: left;
}
.nav>ul>li>a{
    display: block;
    width: 150px;
    height: 50px;
    text-decoration: none;
    color: white;
    background-color: pink;
    text-align: center;
    line-height: 50px;
    font-weight: bold;
    border-top: 3px solid transparent;
}

.nav>ul>li:hover>a{
    background-color: white;
    color: #a1837d;
    font-weight: bold;
    border-top: 3px solid pink;
    box-sizing: border-box;
}

/*------------헤더 끝----------------------*/
.ice-content{
    margin: 0 auto;
    width: 1200px;
}

.content-top>h2{
    text-align: center;
    color:#a1837d;
    font-size: 28px;
    margin-top: 50px;
}

.content-list{
    overflow: hidden;
    border-bottom: 2px dashed pink;
    border-radius: 15px;
}
.content-list ul{
    list-style-type: none;
    margin: 0;
}
.list{
    float: left;
}
.list>ul{
    margin: 20px;
    margin-bottom: 50px;
    margin-top: 30px;
}
.list>ul>li:first-child>img{
    width: 300px;
    height: 300px;
    cursor: pointer;
    margin: 0;
    transition-duration: 0.5s;
}

.list>ul>li:first-child>img:hover{
    transform: scale(1.1, 1.1);
    /*
    border: 1px dashed pink;
    background-color: rgb(255, 238, 241);
    */
}

.list>ul>li{
    text-align: center;
    padding-bottom: 5px;
}
.list>ul>li>a{
    font-size: 15px;
    line-height: 30px;
    text-decoration: none;
    color: #a1837d;
}
.list>ul>li>[href]{
    font-size: 18px;
    font-weight: bold;
}
.list>ul>li>[href]:hover{
    color: pink;
}

.ice-footer{
    background-color: pink;
    border-top: 2px solid pink;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.ice-footer>a{
    display: block;
    float: left;
    padding: 20px;
    text-align: center;
    padding-right: 10px;
    color: white;
}

+) 주의점

 

 

2. 아이스몰 - 로그인

 

 

<!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>
    <link rel="stylesheet" href="css/nanum_font.css">
    <link rel="stylesheet" href="css/icemall2.css">
</head>
<body>
    <div class="ice-login-wrap">
        <div class="ice-header">
            <div class="header-top">
                <div class="logo">
                    <a href="#">ICE-MALL</a>
                </div>
                <div class="search">
                    <form action="search.html" method="get" id="search-frm">
                        <input type="text" name="search" placeholder="검색어 입력">
                        <input type="submit" value="검색">
                    </form>
                </div>
                <div class="membership-link">
                    <a href="#">CART</a>
                    <a href="#">LOGIN</a>
                    <a href="#">JOIN</a>
                </div>
            </div>
            <div class="nav">
                <ul>
                    <li><a href="#">MENU1</a></li>
                    <li><a href="#">MENU2</a></li>
                    <li><a href="#">MENU3</a></li>
                    <li><a href="#">MENU4</a></li>
                    <li><a href="#">MENU5</a></li>
                    <li><a href="#">MENU6</a></li>
                </ul>
            </div>
        </div>
        <div class="ice-login-content">
            <div class="login-top">
                <h2>LOGIN</h2>
            </div>
            <div class="login-input">
                <!-- 로그인 버튼 까지 -->
                <form action="login.html" method="post" id="login-frm">
                    <h3>아이디</h3>
                    <input type="text" name="id" placeholder="내용을 입력해주세요" required>
                    <h3>비밀번호</h3>
                    <input type="password" name="pw" placeholder="내용을 입력해주세요" required>
                    <input type="submit" value="로그인하기">
                    <input type="button" value="회원가입">                </form>
                <div class="find-link">
                    <a href="#">아이디찾기</a>
                    <a> | </a>
                    <a href="#">비밀번호찾기</a>
                </div>
            </div>
        </div>
        <div class="ice-footer">
            <a>ICECREAM</a>
            <a>2023-01-18</a>
            <a>bk_407@daum.net</a>
        </div>
    </div>
</body>
</html>
body{
    margin: 0;
}
.ice-header{
    margin: 0 auto;
    width: 1200px;
    margin-top: 20px;
}
.header-top{
    overflow: hidden;
}

.header-top div{
    float: left;
}
.logo{
    width: 400px;
}
.logo>a{
    font-weight: bold;
    font-size: 40px;
    color: #a1837d;
    padding: 15px;
    text-decoration: none;
}


#search-frm{
    width: 400px;
    padding-top: 10px;
}

input[name=search]{
    width: 250px;
    height: 30px;
    border: none;
    border-bottom: 3px solid #ccc;
    outline: none;
    font-size: 15px;
    padding-left: 10px;
    margin-left: 50px;
    border-radius: 5px;
}
input[name=search]:focus{
    border-bottom: 3px solid pink;
}
#search-frm>input[type=submit]{
    height: 35px;
    background-color: pink;
    border: 3px solid pink;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    margin-left: 5px;
}
#search-frm>input[type=submit]:hover{
    background-color: palevioletred;
    border: 3px solid palevioletred;
}
.membership-link{
    width: 400px;
    text-align: right;
}
.membership-link>a{
    text-decoration: none;
    color: #a1837d;
    line-height: 50px;
    padding: 0px 15px;
    font-weight: bold;
}
.membership-link>a:hover{
    color: pink;
}

.nav{
    background-color: pink;
    margin-top: 10px;
    overflow: hidden;
}
.nav>ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.nav>ul>li{
    float: left;
}
.nav>ul>li>a{
    display: block;
    width: 150px;
    height: 50px;
    text-decoration: none;
    color: white;
    background-color: pink;
    text-align: center;
    line-height: 50px;
    font-weight: bold;
    border-top: 3px solid transparent;
}

.nav>ul>li:hover>a{
    background-color: white;
    color: palevioletred;
    font-weight: bold;
    border-top: 3px solid pink;
    box-sizing: border-box;
}


/*------------헤더 끝----------------------*/
.ice-login-content{
    height: 800px;
}
.login-top{
    width: 500px;
    margin: 0 auto;
    border-bottom: 3px solid #a1837d;
    border-radius: 4px;
    margin-top: 50px;
}
.login-top>h2{
    font-size: 30px;
    color:#a1837d;
    text-align: center;
}

#login-frm{
    margin: 0 auto;
    width: 300px;
}
#login-frm>h3{
    color: #a1837d;
    padding: 20px;
    padding-bottom: 5px;
}

#login-frm>input{
    box-sizing: border-box;
    width: 250px;
    height: 40px;
    margin-left: 20px;
    border: 1px solid #a1837d;
    border-radius: 5px;
    padding-left: 10px;
    outline: none;
}

#login-frm>input[type="submit"], #login-frm>input[type="button"]{
    margin-top: 50px;
    background-color: #a1837d;
    color: white;
    font-weight: bold;
    font-size: 15px;
    border: none;
    cursor: pointer;
}
#login-frm>input[type="button"]{
    margin-top: 20px;
    margin-bottom: 50px;
}

#login-frm>input[type="submit"]:hover, #login-frm>input[type="button"]:hover{
    background-color: pink;
    color: white;
}
.find-link{
    text-align: center;
    margin-bottom: 30px;
}
.find-link>a{
    padding: 10px;
    text-decoration: none;
    color:#a1837d;
    font-family: nn_b;
    font-size: 15px;
}
/*-------------컨텐츠 끝-------------------*/

.ice-footer{
    background-color: pink;
    border-top: 2px solid pink;
    overflow: hidden;
    width: 100%;
    position: fixed;
    bottom: 0;
}

.ice-footer>a{
    float: left;
    padding: 20px;
    text-align: center;
    padding-right: 10px;
    color: white;
}

 

3. 아이스몰 - 장바구니

 

 

 

저작자표시

'국비수업 > HTML+CSS' 카테고리의 다른 글

37일차 : [실습] 메뉴바 만들기  (0) 2023.01.22
36일차 : [실습] 헤더 / 약관동의 / 회원가입  (0) 2023.01.17
35일차 : 배경스타일 / 트랜스폼 / 애니메이션  (0) 2023.01.14
34일차 : 텍스트 / 목록스타일 / 레이아웃  (0) 2023.01.14
33일차 : 선택자  (0) 2023.01.11
'국비수업/HTML+CSS' Related Articles more
Comments