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

웹디자인 연습 예제

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

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>롯데월드</title>
    <!-- style -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 1.가장 먼저 큰 틀을 나누어놓고 작업을 시작하자. 그다음 id를 선언-->
   <div id="wrap">
        <header id="header" class="clearfix">
            <h1><a href="#"><img src="images/logo.jpeg" alt="롯데월드"></a></h1>
            <nav class="nav">
                <ul class="clearfix">
                    <li><a href="#">즐길거리</a>
                         <ul class="submenu">
                            <li><a href="#">subMenu-1</a></li>
                            <li><a href="#">subMenu-2</a></li>
                            <li><a href="#">subMenu-3</a></li>
                            <li><a href="#">subMenu-4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">요금/우대혜택</a>
                        <ul class="submenu">
                            <li><a href="#">subMenu-1</a></li>
                            <li><a href="#">subMenu-2</a></li>
                            <li><a href="#">subMenu-3</a></li>
                            <li><a href="#">subMenu-4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">참여프로그램</a>
                        <ul class="submenu">
                            <li><a href="#">subMenu-1</a></li>
                            <li><a href="#">subMenu-2</a></li>
                            <li><a href="#">subMenu-3</a></li>
                            <li><a href="#">subMenu-4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">이용가이드</a>
                        <ul class="submenu">
                            <li><a href="#">subMenu-1</a></li>
                            <li><a href="#">subMenu-2</a></li>
                            <li><a href="#">subMenu-3</a></li>
                            <li><a href="#">subMenu-4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">소통서비스</a>
                        <ul class="submenu">
                            <li><a href="#">subMenu-1</a></li>
                            <li><a href="#">subMenu-2</a></li>
                            <li><a href="#">subMenu-3</a></li>
                            <li><a href="#">subMenu-4</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </header>
        <!-- //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>
        <!-- //baneer -->
        <section id="content1" class="clearfix">
            <article class="notice">
                <ul class="clearfix">
                    <li class="active"><a href="#">롯데월드 소식</a>
                        <ul>
                            <li><a href="#">1. 첫번째 목록입니다. 첫번째 목록입니다. 첫번째 목록입니다.</a><span>2022.03.11</span></li>
                            <li><a href="#">1. 첫번째 목록입니다. 첫번째 목록입니다. 첫번째 목록입니다.</a><span>2022.03.20</span></li>
                            <li><a href="#">1. 첫번째 목록입니다. 첫번째 목록입니다. 첫번째 목록입니다.</a><span>2022.05.15</span></li>
                            <li><a href="#">1. 첫번째 목록입니다. 첫번째 목록입니다. 첫번째 목록입니다.</a><span>2022.08.30</span></li>
                        </ul>
                    </li>
                    <li><a href="#">뉴스&middot;공지</a>
                        <ul>
                            <li><a href="#">2.두번째 목록입니다. 두번째 목록입니다. 두번쨰 목록입니다.</a><span>2021.11.25</span></li>
                            <li><a href="#">2.두번째 목록입니다. 두번째 목록입니다. 두번쨰 목록입니다.</a><span>2021.07.09</span></li>
                            <li><a href="#">2.두번째 목록입니다. 두번째 목록입니다. 두번쨰 목록입니다.</a><span>2021.04.02</span></li>
                            <li><a href="#">2.두번째 목록입니다. 두번째 목록입니다. 두번쨰 목록입니다.</a><span>2021.01.01</span></li>
                        </ul>
                    </li>
                </ul>
                <a href="#" class="more">더보기 +</a>
            </article>
            <figure class="ad">
                <a href="#"><img src="images/ad.jpg" alt="온종일 혜택"></a>
            </figure>
        </section>
        <!-- //content1 -->
        <!-- content2 -->
        <section id="content2">
            <h2>특별한 경험</h2>
            <ul class="clearfix">
                <li>
                   <a href="#">
                       <img src="images/s1.jpeg" alt="연간회원안내"> 
                       <span>연간회원안내</span>
                   </a>
                </li>
                <li>
                   <a href="#">
                       <img src="images/s2.jpeg" alt="프리미엄투어"> 
                       <span>프리미엄투어</span>
                   </a>
                </li>
                <li>
                   <a href="#">
                       <img src="images/s3.jpeg" alt="공연참여프로그램"> 
                       <span>공연참여프로그램</span>
                   </a>
                </li>
               <li>
                   <a href="#">
                       <img src="images/s4.jpeg" alt="단체프로그램"> 
                       <span>단체프로그램</span>
                   </a>
                </li>
            </ul>
        </section>
        <!-- //content2 -->
        <!-- //footer -->
        <footer id="footer">
            <address>
                <ul>
                    <li class="left">서울특별시 송파구 올림픽로240 호텔롯데 롯데월드</li>
                    <li>대표자: 박동기</li>    
                    <li>사업자등록번호: 229-093-00392</li>
                    <li class="left">통신판매업신고번호: 송파 제 5513호</li>
                    <li>전화: 1661-2000</li>
                </ul>
                <p>Copyright2018 LotterWorld. All Right Reserved.</p>
            </address>
        </footer>
        <!-- //footer -->
   </div>
   
    <!-- 레이어 팝업 -->
    <div class="layer_bg">
        <div class="layer">
            <h2>타이틀</h2>
            <a href="#" class="close">닫기</a>
        </div>
    </div>
    <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 {color: #111; text-decoration: none;}
.clearfix::before, .clearfix::after {display: block; content: ''; clear: both;}

/* layout */
/* 영역을 잡을때는 가상으로 height , background 를 임의로 넣어서 확인한다. */
#wrap {width: 1000px; background: ;height: 1000px;margin: 0 auto; }
#header {background: ; height: 100px;}
#banner {}
#content1 {}
#content2 {}
#footer {}

/* header */
#hader {height: 100px;}
#header h1 {float: left;padding-top: 5px;}
#header h1 img {width: 150px;}
#header .nav {float: right; z-index: 100;position: relative;margin-top: 20px;}
#header .nav ul li{position: relative;float: left;width: 150px;text-align: center;}
#header .nav ul li a {display: block; padding: 20px 15px; background: #ccc;}
#header .nav ul li ul.submenu {display:none; position: absolute;left: 0;top: 50px;}
#header .nav ul li ul.submenu li {float: left;width: 100%;}
#header .nav ul li ul.submenu li a {padding: 10px;}
#header .nav ul li ul.submenu li a:hover {background: #999;}



/* banner */
#banner {width: 1000px;height: 378px; overflow: hidden;}
#banner img {width: 100%;}
#banner .slideList {position: relative;}
#banner .slideList .slideImg {position: relative;}
#banner .slideList .slideImg h2 {position: absolute; left: 50%; top: 50%;transform: translate(-50%, -50%); background: rgba(0,0,0,0.5); padding: 10px 30px; border-radius: 25px;color: #fff;}
#banner .slideList .slideImg img {display: block;}

/* content1 */
#content1 {margin-top: 15px;}
#content1 .notice {float: left; width: 49%;height: 220px;margin-right: 2%;border: 1px solid #ccc; box-sizing: border-box;}
#content1 .ad {float: left;width: 49%;margin-right: 0;}
#content1 .ad img {width: 100%; display: block;}

/* notice */
.notice {position: relative;padding: 30px;}
.notice ul {}
.notice ul li {float: left; margin-right: 30px;}
.notice ul li a {font-size: 20px; color: #999; font-weight: bold;}
.notice ul li.active a {color: #000;}
.notice ul li ul {position: absolute; left: 30px; top: 70px;}
.notice ul li ul li {width: 95%; padding: 5px 0;}
.notice ul li ul li a {float: left; width: 60%; font-size: 15px; color: #333; font-weight: normal; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.notice ul li ul li span {float: right; width: 20%;}
.notice .more {position: absolute; right: 30px; top: 30px;}

/* content2 */
#content2 {margin-top: 25px;}
#content2 h2 {margin-bottom: 10px;}
#content2 ul {}
#content2 ul li {float: left;width: 24.25%;margin-right: 1%;}
#content2 ul li:last-child {margin-right: 0;}
#content2 ul li img {width: 100%}
#content2 ul li span {display: block; padding: 10px 0;}


/* footer */
#footer {border-top: 1px solid #ccc; margin-top: 30px;padding: 30px 0;}
#footer address {font-style: normal; color: #666;}
#footer address ul {width: 70%;} 
#footer address li {position: relative; display: inline;line-height: 1.4;padding: 0 15px 0 10px;}
#footer address li:after {content: ''; width: 1px; height: 13px; background: #666; position: absolute; right: 0; top: 0;}
#footer address li.left {padding-left: 0;}
#footer address p {text-transform: uppercase; padding-top: 30px;}



/* layer */
.layer_bg {
    display: none;
    width: 100%;height: 100%;background: rgba(0,0,0,0.8);
    position: fixed;left: 0;top:0; z-index: 900;
          }
.layer {
    width: 500px; height: 500px;background: #999;
    border: 2px solid #000;
    position: absolute; 
    left: 50%; top: 50%; z-index: 1000;
    transform: translate(-50%, -50%);
}
.layer h2 {padding: 20px;}
.layer .close {position: absolute; bottom: 20px;right: 30px;font-size: 20px;}
    
//메뉴 
        $(".nav > ul > li").hover(function(){
            $(this).find(".submenu").stop().slideDown();
        }, function(){
            $(this).find(".submenu").stop().slideUp();
        });
        
//이미지 슬라이드 
        var slideCount = $(".slideImg").length
        var currentIndex = 0;       //현재 이미지를 변수에 저장

        setInterval(function(){
            if(currentIndex < slideCount -1){
                currentIndex++
            } else {
                currentIndex = 0;
            }
            var slidePosition = currentIndex * (-378)+"px";

            //console.log(slidePosition);
            $(".slideList").animate({ top:slidePosition},400);
        },3000);

//탭메뉴 
var tabMenu = $(".notice");
tabMenu.find("ul > li > ul").hide();
tabMenu.find("ul > li.active > ul").show();

function tabList(e){
    e.preventDefault();
    var target = $(this);
    target.next().show().parent("li").addClass("active").siblings("li").removeClass("active").find("ul").hide();
};

tabMenu.find("ul > li > a").click(tabList).focus(tabList);

//레이어 팝업

$(".ad").click(function(){
    $(".layer_bg").css("display","block");
//    $(".layer_bg").slideDown();
})

$(".close").click(function(){
    $(".layer_bg").css("display","none");
})
저작자표시

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

웹디자인 연습 - 이미지슬라이드  (0) 2022.03.14
웹디자인 연습 - 메뉴 영역  (0) 2022.03.13
HTML 이미지슬라이드 유형(좌우)  (0) 2022.03.01
HTML 이미지슬라이드 유형(페이드 효과)  (0) 2022.03.01
HTML 이미지 슬라이드 유형(위아래)  (0) 2022.03.01

관련글

티스토리툴바