Dragonball Online Goku Hand
본문 바로가기
사이트 제작하기

[사이트 제작] 웹기능사 실기 대비 : COOKIT 사이트

by 별의 코비 2022. 9. 14.
728x90

COOKIT 사이트 만들기 [웹기능사 시험 대비]

📌 웹기능사 실기 시험을 대비하기 위해 COOKIT 사이트를 만들어보겠습니다.

➰ HTML

사이트의 틀을 제작해줍니다. 

lt;div id="warp">
    <header id="header" class="clearfix">
        <h1><a href="#"><img src="assets/img/mission02_01.jpg" alt="cookitlogo"></a></h1>
        <nav class="nav">
            <ul class="clearfix">
                <li><a href="#">Cookit 소개</a>
                    <ul class="submenu">
                        <li><a href="#">sub-menu1</a></li>
                        <li><a href="#">sub-menu1</a></li>
                        <li><a href="#">sub-menu1</a></li>
                        <li><a href="#">sub-menu1</a></li>
                    </ul>
                </li>
                <li><a href="#">Cookit 메뉴</a>
                    <ul class="submenu">
                        <li><a href="#">sub-menu2</a></li>
                        <li><a href="#">sub-menu2</a></li>
                        <li><a href="#">sub-menu2</a></li>
                        <li><a href="#">sub-menu2</a></li>
                    </ul>
                </li>
                <li><a href="#">리뷰</a>
                    <ul class="submenu">
                        <li><a href="#">sub-menu3</a></li>
                        <li><a href="#">sub-menu3</a></li>
                        <li><a href="#">sub-menu3</a></li>
                        <li><a href="#">sub-menu3</a></li>
                    </ul>
                </li>
                <li><a href="#">이벤트</a>
                    <ul class="submenu">
                        <li><a href="#">sub-menu4</a></li>
                        <li><a href="#">sub-menu4</a></li>
                        <li><a href="#">sub-menu4</a></li>
                        <li><a href="#">sub-menu4</a></li>
                    </ul>
                </li>
                <li><a href="#">My쿡킷</a>
                    <ul class="submenu">
                        <li><a href="#">sub-menu5</a></li>
                        <li><a href="#">sub-menu5</a></li>
                        <li><a href="#">sub-menu5</a></li>
                        <li><a href="#">sub-menu5</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </header>
    <!-- //header-->

    <section id="banner">
        <div class="slideList">
            <div class="slideImg">
                <h2>이미지1</h2>
                <img src="assets/img/mission02_02_01.jpg" alt="쿡킷을 더 편리하게 COOKIT 앱 런칭기념 이벤트1">
            </div>
            <div class="slideImg">
                <h2>이미지2</h2>
                <img src="assets/img/mission02_02_02.jpg" alt="쿡킷을 더 편리하게 COOKIT 앱 런칭기념 이벤트2">
            </div>
            <div class="slideImg">
                <h2>이미지3</h2>
                <img src="assets/img/mission02_02_03.jpg" alt="쿡킷을 더 편리하게 COOKIT 앱 런칭기념 이벤트3">
            </div>
        </div>
    </section>
    <!-- //banner -->

    <section id="content1" class="clearfix">
        <article class="left">
            <h2 class="title">우리집도 COOKIT 배송이 되나요?</h2>
            <p class="desc">배송 가능한지 알려드려요.</p>
            <a href="#" class="btn">배송지 검색</a>
        </article>
        <article class="right">
            <h2 class="title">7월 30일(화)에 받을 수 있어요</h2>
            <p class="desc">오전 7시까지 주문하시면 다음날 배송됩니다.</p>
            <a href="#" class="btn">62:23:10 <em>남은시간</em></a>
        </article>
    </section>
    <!-- //content1 -->

    <section id="content2">
        <div class="tab-menu">
            <div class="tab-btn">
                <ul>
                    <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="../mission/assets/img/mission02_07.jpg" alt="어복쟁반">
                        <figcaption>
                            평양식 어복쟁반
                        </figcaption>
                    </figure>
                    <figure>
                        <img src="../mission/assets/img/mission02_08.jpg" alt="어복쟁반">
                        <figcaption>
                            새우주꾸미 삼겹살
                        </figcaption>
                    </figure>
                    <figure>
                        <img src="../mission/assets/img/missioin02_09.jpg" alt="어복쟁반">
                        <figcaption>
                            방풍나물 아귀찜
                        </figcaption>
                    </figure>
                </div>
                <!-- 생생한 리뷰 -->
                <div class="best clearfix">
                    <figure>
                        <img src="../mission/assets/img/mission02_07_02.jpg" alt="어복쟁반">
                        <figcaption>
                            한국식 어복쟁반
                        </figcaption>
                    </figure>
                    <figure>
                        <img src="../mission/assets/img/mission02_08_02.jpg" alt="어복쟁반">
                        <figcaption>
                            불맛 새우주꾸미 삼겹살
                        </figcaption>
                    </figure>
                    <figure>
                        <img src="../mission/assets/img/missioin02_09_02.jpg" alt="어복쟁반">
                        <figcaption>
                            노란 방풍나물 아귀찜
                        </figcaption>
                    </figure>
                </div>
            </div>
        </div>
    </section>
    <!-- //content2 -->

    <footer id="footer" class="clearfix">
        <h2><img src="../mission/assets/img/mission02__10.jpg" alt="Cookit footer logo"></h2>
        <div class="foot">
            <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>
    <!-- //footer-->
</div>
<!-- //warp-->

<!-- layer -->
<div class="layer_bg"></div>
<div class="layer">
    <h2>제목</h2>
    <a href="#" class="close">닫기</a>
</div>

➰ CSS

CSS를 통해서 스타일을 지정해줍니다. 

/* reset */
* {
    margin: 0;
    padding: 0;
    font-size: 16px;
}

a {
    color: #333;
    text-decoration: none;
}

li {
    list-style: none;
}

.clearfix::before,
.clearfix::after {
    content: '';
    display: block;
    clear: both;
    /* 영역 잡기 */
    /* background: #ccc;
    height: 1000px; */
}

/* warp */
#warp {
    width: 1000px;
    margin: 0 auto;
}

/* header */
#header {}
#header h1 {
    float: left;
    padding: 15px 0 10px;
}

#header h1 img {
    width: 110px;
}

#header .nav {
    float: right;
    background: #ccc;
}

#header .nav li {
    position: relative;
    float: left;
    width: 150px;
    text-align: center;
}

#header .nav li a {
    display: block;
    font-size: 20px;
    font-weight: bold;
    padding: 24px 20px 20px 20px;
}

#header .nav li a:hover {
    background: #ccc;
}

#header .nav li ul.submenu {
    display: none;
    position: absolute;
    left: 0;
    top: 67px;
    z-index: 100;
}

#header .nav li ul.submenu li a {
    padding: 10px;
    background: #888;
}

#header .nav li ul.submenu li a:hover {
    background: #666;
}

/* banner */
#banner {
    height: 389px;
    overflow: hidden;
}

#banner img {
    width: 100%;
    display: block;
}

/* 상하
.slideList {
    top값을 쓰기 위함
    position: relative; 
    width: 1000px; 
    height: 389px;
}
.slideList .slideImg {
    position: relative;
}
.slideList .slideImg h2 {
    position: absolute; 
    left: 50%; 
    top: 50%;
    transform: translate(-50%,-50%); 
    background: rgba(0,0,0,0.4); 
    padding: 10px 30px;
    border-radius: 20px;
}
*/

/* 좌우 */
.slideList {
    position: relative;
    width: 3000px;
    z-index: 50;
}

.slideList .slideImg {
    position: relative;
    width: 1000px;
    float: left;
}

.slideList .slideImg h2 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 30px;
    border-radius: 20px;
}


/* content1 */
#content1 {
    margin-top: 20px;
}

#content1 .left {
    float: left;
    width: 49%;
    padding: 20px;
    /* right옆에 20px은 정확한 방법은 아니지만 여백 생기긴함 */
    background: #f2f2f2 url(../img/mission02_03.jpg) no-repeat right 20px center;
    background-size: 80px;
    box-sizing: border-box;
    margin-right: 2%;
}

#content1 .left .title {
    font-size: 22px;
    padding-bottom: 5px;
}

#content1 .left .desc {
    font-size: 14px;
    color: #666;
    padding-bottom: 15px;
}

#content1 .left .btn {
    background: url(../img/mission02_05.jpg) no-repeat left top;
    background-size: 20px;
    padding-left: 25px;
    padding-top: 3px;
}

#content1 .right {
    float: left;
    width: 49%;
    padding: 20px;
    background: #f2f2f2 url(../img/mission02_04.jpg) no-repeat right 20px center;
    background-size: 80px;
    box-sizing: border-box;
    margin-right: 0;
}

#content1 .right .title {
    font-size: 22px;
    padding-bottom: 5px;
}

#content1 .right .desc {
    font-size: 14px;
    color: #666;
    padding-bottom: 15px;
}

#content1 .right .btn {
    background: url(../img/mission02_06.jpg) no-repeat left top;
    background-size: 20px;
    padding-left: 25px;
    padding-top: 2px;
}

#content1 .right .btn em {
    font-size: 13px;
    color: 999;
    font-style: normal;
}

/* content2 */
#content2 {
    margin-top: 30px;
}

.tab-menu .tab-btn ul {
    overflow: hidden;
}

.tab-menu .tab-btn li {
    float: left;
    margin-right: 15px;
}

.tab-menu .tab-btn li a {
    display: block;
    color: #999;
    font-size: 24px;
    padding-bottom: 10px;
}

.tab-menu .tab-btn li.active a {
    color: #000;
}

.tab-cont .best figure {
    float: left;
    width: 32%;
    margin-right: 2%;
}

.tab-cont .best figure img {
    width: 100%;
}

.tab-cont .best figure:last-child {
    margin-right: 0;
}

#content2 h2 {
    font-size: 24px;
    padding-bottom: 10px;
}

#content2 .best figure {
    float: left;
    width: 32%;
    margin-right: 2%;
}

#content2 .best figure img {
    width: 100%;
}

#content2 .best figure:last-child {
    margin-right: 0;
}

/* footer */
#footer {
    padding: 20px 0;
    background: #202020;
    margin-top: 30px;
}

#footer h2 {
    float: left;
    padding-left: 20px;
}

#footer h2 img {
    width: 150px;
}

#footer .foot {
    float: right;
    padding-right: 30px;
}

#footer .foot ul {
    padding-bottom: 10px;
}

#footer .foot ul li {
    display: inline;
}

#footer .foot ul li a {
    color: #fff;
    padding-right: 10px;
}

#footer .foot address {
    font-style: normal;
    color: #ccc;
}

/* layer */
.layer_bg {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 900;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
}

.layer {
    display: none;
    position: absolute;
    left: 30px;
    top: 30px;
    z-index: 1000;
    width: 500px;
    height: 500px;
    border: 3px solid #000;
    background: #fff;
}

.layer h2 {
    padding: 20px;
    color: #000;
}

.layer .close {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

➰ 자바스크립트 활용

설명은 주석을 참고해주세요! 

// 내비게이션
$(".nav > ul > li").mouseover(function () {
    //제이쿼리는 원하는 기능 여러개 사용 가능
    $(this).find(".submenu").stop().slideDown(200);
});
$(".nav > ul > li").mouseout(function () {
    $(this).find(".submenu").stop().slideUp(200);
});
//currentIndex = 0; 첫번째 이미지 : 0
//currentIndex = 1; 두번째 이미지 : -389
//currentIndex = 2; 세번째 이미지 : -778
// 이미지 슬라이드 (상하)
// var currentIndex = 0; //첫번째 이미지
// 
// //3초에 한번씩 이 함수를 작동 시켜라
// setInterval(function(){
//     if(currentIndex < 2){
//         currentIndex++;
//     } else {
//         currentIndex = 0;
//     }
//     var slidePosition = currentIndex * (-389)+"px";
//     //animate 값, 초 //상하니깐 top
//     $(".slideList").animate({top: slidePosition},400);
//     
// }, 3000);
// 이미지 슬라이드 (좌우)
var currentIndex = 0;
setInterval(function () {
    if (currentIndex < 2) {
        currentIndex++;
    } else {
        currentIndex = 0;
    }
    // slide 0, 1, 2,,,
    var slidePosition = currentIndex * (-1000) + "px";
    // 좌우니깐 left값
    $(".slideList").animate({ left: slidePosition }, 400);
}, 3000);
// 탭 메뉴
var tabBtn = $(".tab-btn > ul > li");
var tabCont = $(".tab-cont > div");

//제이커리 순서 eq
tabCont.hide().eq(0).show();

tabBtn.click(function(event){
    event.preventDefault();
    // 누굴 클릭할지 모르니깐 target //this: 여러개의 버튼이 있을 때 어떤 대상을 클릭했는지 정확하게 알고 싶을 때 사용
    var target = $(this);
    // 타켓 번호 매기기
    var index = target.index();
    //alert(index);
    // 버튼을 클릭하면 엑티브가 사라지고
    tabBtn.removeClass("active");
    // 타겟(클릭한)에만 엑티브가 활성화됨
    target.addClass("active");
    tabCont.css("display","none");
    // 클릭하면 첫번째 박스, 두번째 박스가 나옴...index
    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();
});
실제 사이트보기 원본 소스보기

'사이트 제작하기' 카테고리의 다른 글

[사이트 제작] 웹기능사 실기 대비 : 롯데월드 사이트  (3) 2022.09.14

관련글

댓글

티스토리툴바