본문 바로가기
내마음대로만들어보자/HTML

웹페이지 만들기 연습 - CookIt

by 소농민! 2022. 3. 21.
728x90

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Cook it</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="wrap">
        <header id="header" class="clearfix">
            <h1><a href="#"><img src="images/logo.jpeg" alt="CookIT"></a></h1>
            <nav class="nav">
                <ul class="clearfix">
                    <li><a href="#">CookIt 소개</a>
                        <ul class="submenu">
                            <li><a href="#">submenu-1</a></li>
                            <li><a href="#">submenu-1</a></li>
                            <li><a href="#">submenu-1</a></li>
                            <li><a href="#">submenu-1</a></li>
                        </ul>
                    </li>
                    <li><a href="#">CookIt 메뉴</a>
                        <ul class="submenu">
                            <li><a href="#">submenu-2</a></li>
                            <li><a href="#">submenu-2</a></li>
                            <li><a href="#">submenu-2</a></li>
                            <li><a href="#">submenu-2</a></li>
                        </ul>
                    </li>
                    <li><a href="#">리뷰</a>
                        <ul class="submenu">
                            <li><a href="#">submenu-3</a></li>
                            <li><a href="#">submenu-3</a></li>
                            <li><a href="#">submenu-3</a></li>
                            <li><a href="#">submenu-3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">이벤트</a>
                        <ul class="submenu">
                            <li><a href="#">submenu-4</a></li>
                            <li><a href="#">submenu-4</a></li>
                            <li><a href="#">submenu-4</a></li>
                            <li><a href="#">submenu-4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">MY쿡킷</a>
                        <ul class="submenu">
                            <li><a href="#">submenu-5</a></li>
                            <li><a href="#">submenu-5</a></li>
                            <li><a href="#">submenu-5</a></li>
                            <li><a href="#">submenu-5</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </header>
        <section id="banner">
            <div class="slideList">
                <div class="slideImg">
                    <h2>이미지1</h2>
                    <img src="images/banner01.jpeg" alt="쿡킷 이벤트 배너">
                </div>
                <div class="slideImg">
                    <h2>이미지2</h2>
                    <img src="images/banner01.jpeg" alt="쿡킷 이벤트 배너">
                </div>
                <div class="slideImg">
                    <h2>이미지3</h2>
                    <img src="images/banner01.jpeg" alt="쿡킷 이벤트 배너">
                </div>
            </div>
        </section>
        <section id="content1" class="clearfix">
            <aritcle class="left">
                <h2 class="title">전국 어디서나 배달 가능</h2>
                <p class="desc">배달이 안되는 곳은 어디인가?</p>
                <a href="#" class="btn">배송지 검색</a>
            </aritcle>
            <aritcle class="right">
                <h2 class="title">전국 어디서나 배달 가능</h2>
                <p class="desc">배달이 안되는 곳은 어디인가?</p>
                <a href="#" class="btn">12:00:00 <em>남은 시간</em></a>
            </aritcle>
        </section>
        <section id="content2">
            <div class="tab-menu">
                <div class="tab-btn">
                   <ul class="clearfix">
                       <li class="active"><a href="#">실시간 베스트</a></li>
                       <li><a href="#">생생한 리뷰</a></li>
                   </ul>
                </div>
                <div class="tab-cont">
                    <div class="best clearfix">
                        <figure>
                            <img src="images/best1.jpeg" alt="어복쟁반1">
                            <figcaption>평양식 어복쟁반1</figcaption>
                        </figure>
                        <figure>
                            <img src="images/best2.jpeg" alt="어복쟁반2">
                            <figcaption>평양식 어복쟁반2</figcaption>
                        </figure>
                        <figure>
                            <img src="images/best3.jpeg" alt="어복쟁반3">
                            <figcaption>평양식 어복쟁반3</figcaption>
                        </figure>
                    </div>
                    <div class="best clearfix">
                         <figure>
                            <img src="images/best3.jpeg" alt="어복쟁반3">
                            <figcaption>평양식 어복쟁반3</figcaption>
                        </figure>
                        <figure>
                            <img src="images/best2.jpeg" alt="어복쟁반2">
                            <figcaption>평양식 어복쟁반2</figcaption>
                        </figure>
                        <figure>
                            <img src="images/best1.jpeg" alt="어복쟁반1">
                            <figcaption>평양식 어복쟁반1</figcaption>
                        </figure>
                    </div>
                </div>
            </div>
        </section>
        <footer id="footer" class="clearfix">
            <h2><img src="images/flogo.jpeg" alt=""></h2>
            <div class="foot clearfix">
                <ul>
                    <li><a href="#">이용약관</a></li>
                    <li><a href="#">개인정보처리방침</a></li>
                    <li><a href="#">법적고지</a></li>
                    <li><a href="#">사업자정보확인</a></li>
                </ul>
                <address>
                    씨제이제일제당주(주) 대표자:신현재<br>
                    주소: 서울시 강남구 서초대로 77길 13 사업자등록번호 : 100-38-30489<br>
                    통신판매업신고 중구 88903호 개인정보취급방침
                </address>
            </div>
        </footer>
    </div>
    <!--  layer  -->
    <div class="layer_bg">
        <div class="layer">
            <h2>레이어 팝업 타이틀</h2>
            <a href="#" class="close">닫기</a>
        </div>
    </div>
    <!-- script -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="script/jquery.min_1.12.4.js"></script>
    <script src="script/custom.js"></script>
</body>
</html>
/* reset */
* {margin: 0; padding: 0;}
li {list-style: none;}
a {text-decoration: none; color: #777;}
.clearfix::before, .clearfix::after {display: block; content: ''; clear: both;}


/* 레이아웃 */
#wrap {width: 1000px;height: 1000px; margin: 0 auto;}

/* header */
#header {width: 1000px;height: 100px; padding-top: 5px;}
#header h1 {float: left; position: relative;}
#header img {width: 100px;position: absolute; left: 0; top: 15px;}
#header .nav {float: right;position: relative; z-index: 100;}
#header .nav ul {float: left; text-align: center;}
#header .nav ul li {float: left;width: 150px;position: relative;background: #fff;}
#header .nav ul li a {position: relative; display: block; font-size: 20px;padding: 20px 15px;}
#header .nav ul li a:hover {font-weight: bold;color: #111;}
#header .nav ul li ul.submenu {display: none; width: 150px; position: absolute; left: 0; top: 60px; z-index: 900;}
#header .nav ul li ul.submenu li {float: left; width: 100%;background: #fff;}
#header .nav ul li ul.submenu li a {padding: 10px;}
#header .nav ul li ul.submenu li a:hover {font-weight: bold;color: #111;}


/* banner */
#banner {width: 1000px;height: 378px;overflow: hidden;text-align: center;}
#banner img {width: 100%;}
#banner .slideList {position: relative;width: 3000px;height: 378px;}
#banner .slideList .slideImg {position: relative; float: left;width: 1000px;height: 378px;}
#banner .slideList .slideImg h2 {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);font-size: 20px;background: rgba(0,0,0,0.4); padding: 10px; border-radius: 20px;}
#banner .slideImg .slideList img {display: block;}

/* content1 */
#content1 {margin-top: 10px;}
#content1 .left {
    float: left;width: 49%;padding: 20px;box-sizing: border-box;
    background: #f2f2f2 url(../images/bg1.jpeg) no-repeat right 20px center;
    background-size: 100px;
    margin-right: 20px;
}
#content1 .left .title {font-size: 25px;margin-bottom: 5px;}
#content1 .left .desc {font-size: 15px;color: #777;margin-bottom: 5px;}
#content1 .left .btn {
    color: #111;background: url(../images/icon1.jpeg) no-repeat left top;
    background-size: 20px;
    padding-left: 30px;
}
#content1 .right {
    float: left;width: 49%;padding: 20px;box-sizing: border-box;
    background: #f2f2f2 url(../images/bg2.jpeg) no-repeat right 20px center;
    background-size: 100px;
}
#content1 .right .title {font-size: 25px;margin-bottom: 5px;}
#content1 .right .desc {font-size: 15px;color: #777;margin-bottom: 5px;}
#content1 .right .btn {
    color: #111; background: url(../images/icon2.jpeg) no-repeat left top;
    background-size: 20px;
    padding-left: 30px;
}
#content1 .right .btn em {font-size: 13px;font-weight: normal;}

/* content2 */
#content2 {margin-top: 20px;}
#content2 .tab-menu .tab-btn ul {overflow: hidden;}
#content2 .tab-menu .tab-btn ul li {float: left;}
#content2 .tab-menu .tab-btn ul li a {display: block; font-size: 24px;padding: 10px;color: #777;}
#content2 .tab-menu .tab-btn ul li.active a {color: #111;}
#content2 .tab-menu .tab-cont {margin-top: 10px;}
#content2 .tab-menu .tab-cont .best figure {float: left; width: 32%; margin-right: 2%;}
#content2 .tab-menu .tab-cont .best figure:last-child {margin-right: 0;}
#content2 .tab-menu .tab-cont .best figure img {width: 100%;}
#content2 .tab-menu .tab-cont .best figure figcaption {}

/* footer */
#footer {background: #202020;padding: 20px;margin-top: 20px;}
#footer h2 {float: left;padding-left: 20px;}
#footer img {width: 150px;}
#footer .foot {float: right; margin-right: 30px;}
#footer .foot ul {float: left;padding-bottom: 10px;}
#footer .foot ul li {display: inline;margin-right: 30px;}
#footer .foot ul li a {color: #fff; font-weight: normal;}
#footer .foot address {color: #777;}

/* 레이어 팝업 */
.layer_bg {
    display: none ;
    width: 100%; height: 100%; background: rgba(0,0,0,0.8);z-index: 1000;
    position: fixed; left: 0; top: 0;
}
.layer {
    width: 500px;height: 500px;border: 1px solid #111; background: #fff;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}
.layer h2 {padding: 20px;}
.layer .close {position: absolute; right: 30px; bottom: 20px;font-size: 20px;}
//메뉴

    $(".nav > ul > li").hover(function(){
        $(this).find(".submenu").stop().slideDown();
    }, function(){
        $(this).find(".submenu").stop().slideUp();
    });

   //이미지 슬라이드
var slideCount = $(".slideImg").length;
//console.log(slideCount);
var currentIndex = 0;

setInterval(function(){
    if(currentIndex < slideCount - 1){
        currentIndex++
    }else{
        currentIndex = 0
    };
    var slidePosition = currentIndex * (-1000)+"px"
    $(".slideList").animate({left:slidePosition},300)
},4000)

//탭메뉴 
var tabBtn = $(".tab-btn > ul > li");
var tabCont = $(".tab-cont > div");

tabCont.hide().eq(0).show();

tabBtn.click(function(e){
    e.preventDefault();
    var target = $(this);
    var index = target.index();
//    alert(index)
    tabBtn.removeClass("active");
    target.addClass("active");
    tabCont.css("display","none");
    tabCont.eq(index).css("display","block");
});



//레이어 팝업
$("#content1 .right").click(function(){
    $(".layer").slideDown(300)
    $(".layer_bg").show();
})
$(".layer .close").click(function(){
    $("layer").slideUp(300)
    $(".layer_bg").hide();
})
저작자표시

'내마음대로만들어보자 > HTML' 카테고리의 다른 글

반응형 사이트 만들기 - 미디어쿼리 예제  (0) 2022.04.07
반응형 사이트 만들기 - 시맨틱 태크  (0) 2022.04.07
웹디자인연습 - 컨텐츠영역(레이어팝업,탭메뉴)  (0) 2022.03.15
웹디자인 연습 - 이미지슬라이드  (0) 2022.03.14
웹디자인 연습 - 메뉴 영역  (0) 2022.03.13

관련글

티스토리툴바