비주얼 스튜디오 코드 64_ 하이시네마 웹페이지 03

☭DEVELOPER/#2 웹개발(자바기반 풀스택)

비주얼 스튜디오 코드 64_ 하이시네마 웹페이지 03

조반짝 2023. 7. 5. 15:10

728x90

swiper 접속

use swiper from CDN에 https:// 부터 복사

브라우저 새창 열고 복사한 주소를 붙여넣는다

전체선택 후 복사

swiper.css파일 새로 만들어서 복사한 것 붙여넣기

format Document 로 정렬 정리하기

java script도 가져오기

js 주소 복사하기

java script 파일 만들고 복사한 코드 붙여넣기

swiper.css 링크걸기

java script 링크걸기

swiper html 마크업 복사해서 .slider 안에 넣기

script swiper 복사해서 붙여넣기

닷메뉴 활성

clickable: ture,

글자 삭제 후 h3, p 태그에 문구 넣기

swiper demos

원하는 디자인을 선택 후 core를 클릭하면 코드가 나온다.

script 부분 복사

작업파일 script에 붙여넣으면 된다.

.slider css 편집

swiper-slide 각각에 이름 부여하기

swiper-slide css 편집

배너이미지 넣기

swiper 버튼 편집

이전버튼 클래스 이름 찾기

이전버트 css 편집

이전버튼과 다음버튼 색상, 그림자 추가하기

닷버튼 편집하기

h3 ,p 태그 편집

@media h3, p 태그 반응형 적용하기

● 탭메뉴

html 마크업

#movie css 편집

.movie .movie_title css 편집

탭메뉴 가운데로 보내기

margin: 0 auto >> 너비값이 있어야한다.

.movie @media 반응형 적용

w768px 에 바탕색 넣기

padding: 24px

.movie의 패딩값을 없애주면 위아래 여백이 없어진다.

ir_su 를 적용해서 글씨가 없어졌지만 필요 시에 다시 보이게 할 수 있다.

ir_su css 편집

가상요소 선넣기

●탭메뉴

<html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>하이시네마_1</title>
    <!-- CSS -->
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/swiper.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/media.css">
    <!-- 파비콘 -->
    <link rel="shortcut icon" href="./image/ICON.png">
</head>
<body>
    <header id="header">
        <div class="container">
            <div class="row">
                <div class="header clearfix">
                    <h1 class="logo">
                        <a href="#">
                            <em><img src="./image/logo.png" alt="하이시네마"></em>
                            <strong><img src="./image/logo_sub.png" alt="하이미디어영화관"></strong>
                        </a>
                    </h1>
                    <nav id="mNav">
                        <h2 class="ir_su">하이시네마 전체메뉴(모바일)</h2>
                        <a href="#" class="ham"><span></span></a> <!--span으로 가상요소 만들 예정-->
                    </nav>
                    <nav class="nav">
                        <h2 class="ir_su">하이시네마 전체메뉴(PC)</h2>
                        <ul class="clearfix">
                            <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>
                            <li><a href="#">이벤트</a></li>
                            <li><a href="#">로그인</a></li>
                        </ul>
                    </nav>
                </div><!--//.header-->
            </div><!--//row-->
        </div><!--//container-->
    </header><!--//#header-->
    <section id="banner">
        <h2 class="ir_su">최신 영화 소식</h2>
        <!-- 베너메뉴 -->
        <div class="banner_menu clearfix">
            <div class="container">
                <div class="row">
                    <div class="bm_left">
                        <ul class="clearfix">
                            <li class="total"><a href="#">전체메뉴</a></li>
                            <li class="line"><a href="#">필름 소사이어티</a></li>
                            <li><a href="#">클래식 소사이어티</a></li>
                        </ul>
                    </div>
                    <div class="bm_right clearfix">
                        <ul class="clearfix">
                            <li class="line"><a href="#">고객센터</a></li>
                            <li class="line"><a href="#">멤버십</a></li>
                            <li><a href="#">VIP</a></li>
                        </ul>
                        <ul class="clearfix">
                            <li class="white"><a href="#">상영시간표</a></li>
                            <li class="purple"><a href="#">빠른예매</a></li>
                        </ul>
                    </div>
                </div><!--row-->
            </div><!--container-->
        </div>
        <!-- 이미지 -->
        <div class="slider">
            <div class="swiper">                          
                <div class="swiper-wrapper">
                <div class="swiper-slide s1">
                    <h3>첫번째 슬라이드</h3>
                    <p>스와이퍼를 잘 사용합시다</p>
                </div>
                <div class="swiper-slide s2">
                    <h3>두번째 슬라이드</h3>
                    <p>코딩 잘하고싶다.</p>
                </div>
                <div class="swiper-slide s3">
                    <h3>세번째 슬라이드</h3>
                    <p>코딩의 제왕이 되자</p>
                </div>
                </div>       
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
    </section><!--//banner-->
    
    <section id="movie">
        <div class="container">
            <div class="row">
                <h2 class="ir_su">영화예매</h2>
                <div class="movie">
                    <div class="movie_title">
                        <ul class="clearfix">
                            <li class="active"><a href="#">박스오피스</a></li>
                            <li><a href="#">최신개봉작</a></li>
                            <li><a href="#">상영예정작</a></li>
                            <li><a href="#">큐레이션</a></li>
                        </ul>
                    </div><!--movie_title-->
                    <div class="movie_chart">
                        <div class="chart1">chart1</div>
                        <div class="chart2">chart2</div>
                        <div class="chart3">chart3</div>
                        <div class="chart4">chart4</div>
                    </div><!--movie_chart-->
                </div><!--movie-->
            </div>
        </div>
    </section><!--tabmenu-->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>

    <script>

        //영화차트 탭메뉴
            const mBtn = $(".movie_title > ul > li");
            const mCont = $(".movie_chart > div");

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

            mBtn.click(function(e){
                e.preventDefault();
                let target = $(this);
                let index = target.index();
                mBtn.removeClass("active");
                target.addClass("active");
                mCont.hide().eq(index).show();
            });

            



        const swiper = new Swiper('.swiper', {
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        mousewheel: true,
        keyboard: {
        enabled: true,
        },
        autoplay: {
        delay: 2500,
        }
        });
    </script>

</body>
</html>

<style.css>

@charset "utf-8";

#header{
    width: 100%;
    border-bottom: 1px solid #c6c6c6;
}
#mNav{
    position: absolute;
    top: 10px;
    right: 14px;
    display: none;
}
#banner{
    /* banner_menu의 기준점 */
    position: relative;
}
#movie{}

.container{
    width: 1280px;
    margin: 0 auto;
    position: relative;
    /* background-color: rgba(0, 0, 0, 0.1); */
}
.row{
    padding: 0 28px;
}

/* 모바일 네비게이션 편집 */
.ham{
    display: block;
    width: 25px;
    height: 10px;
    /* background-color: rgba(0, 0, 0, 0.3); */
    padding: 15px 10px 10px 10px;
}
.ham span{
    display: block;
    width: 25px;
    height: 4px;
    background-color: #30106a;
    position: relative;
}
.ham span::before,.ham span::after{
    content: "";
    width: 25px;
    height: 4px;
    background-color: #30106a;
    position: absolute;
    left: 0;
    top: 8px;
}
.ham span::after{
    top: -8px;
}

/* header */
.header{}
.header .logo{
    float: left;
}
.header .logo a{}
/* 하이시네마 */
.header .logo a em{
    padding: 15px 8px 5px 0;
    display: inline-block;
}
.header .logo a em img{
    /* 너비값만 넣어주어 비율 맞게 들어가게한다. */
    width: 155px;
}
/* 하이미디어영화관 */
.header .logo a strong{
    display: block;
    /* container에 기준점이 있음 */
    position: absolute;
    left: 194px;
    top: 24px;
}
.header .logo a strong img{
    width: 126px;
}


.header .nav{
    float: right;
}
.header .nav ul{
    border-left: 1px solid #c6c6c6;
}
.header .nav ul li{
    float: left;
    width: 103px;
    text-align: center;
    border-right: 1px solid #c6c6c6;
}
.header .nav ul li a{
    display: block;
    padding: 20px 10px;
    font-weight: 700;
    font-size: 17px;
    color: #444;
}

/* banner_menu */
.banner_menu{
    position: absolute;
    left: 0;
    width: 100%;
    top: 20px;
    z-index: 10;
}
.banner_menu a{
    color: #fff;
    font-size: 16px;
    transition: all 0.3s;
}
.banner_menu a:hover{
    color: #000;
}
/* 왼쪽 정렬 */
.banner_menu .bm_left{
    float: left;
}
.banner_menu .bm_left ul{
    margin-top: 7px;
}
.banner_menu .bm_left ul li{
    /* 옆으로 나열 */
    display: inline;
}
.banner_menu .bm_left ul li.total{
    margin-right: 20px;
}
.banner_menu .bm_left ul li.total a{
    border: 1px solid #fff;
}
.banner_menu .bm_left ul li.total a:hover{
    background-color: #fff;
    color: #000;
}
.banner_menu ul li.line{
    margin-right: 30px;
    position: relative;
}
.banner_menu ul li.line::after{
    position: absolute;
    content: "";
    right: -18px;
    top: 0;
    width: 1px;
    height: 16px;
    background-color: #fff;
}
.banner_menu .bm_left ul li a{
    display: inline-block;
    padding: 3px 10px;
}

/* 오른쪽 정렬 */
.banner_menu .bm_right{
    float: right;
}
.banner_menu .bm_right ul{
    float: left;
   
}
.banner_menu .bm_right ul:first-child{
    margin-top: 10px;
}

.banner_menu .bm_right ul li{
    float: left;
    margin-right: 30px;
}

.banner_menu .bm_right ul li.line::after{
    top: 6px;
}

/* .banner_menu .bm_right ul li.line{
    margin-right: 30px;
    position: relative;

}
.banner_menu .bm_right ul li.line::after{
    content: "";
    position: absolute;
    width: 1px;
    height: 16px;
    top: 3px;
    right: -9px;
    background-color: #fff;
} */
.banner_menu .bm_right ul li.white{}
.banner_menu .bm_right ul li.white a{
    display: inline-block;
    width: 80px;
    background-color: #fff;
    color: #3a0e6a;
    padding: 7px 30px;
    border: 1px solid #30106a;
    text-align: center;
}
.banner_menu .bm_right ul li.purple{}
.banner_menu .bm_right ul li.purple a{
    display: inline-block;
    background-color: #30106a;
    padding: 7px 30px;
    width: 80px;
    text-align: center;
    border: 1px solid #6e40c4;
}



.banner_menu a{
    color: #fff;
    font-size: 16px;
    transition: all 0.3s;
}
.banner_menu a:hover{
    color: #c1c1c1;
}

.slider{
    width: 100%;
    background-color: #ccc;
}
.slider .swiper-slide{
    height: 400px;
}
.slider img{
    width: 100%;
}

.slider .s1{
    background: url(../image/banner2.jpg) center center;
    background-size: cover;
}
.slider .s2{
    background: url(../image/banner3.png) center center;
    background-size: cover;
}
.slider .s3{
    background: url(../image/banner4.png) center center;
    background-size: cover;
}

.swiper-button-prev, .swiper-button-next{
    color: #fff;
    text-shadow: 1px 1px 2px #222;
}

.swiper-pagination-bullet{
    width: 11px;
    height: 11px;
    background-color: #fff;
    margin-right: 20px;
}

.slider .swiper-slide h3{
    position: relative;
    display: inline-block;
    font-size: 62px;
    top: 150px;
    font-weight: bold;
    color: #fff;
    left: 60px;
    text-shadow: 3px 3px 5px #333;
}
.slider .swiper-slide h3::after{
    content: "";
    width: 100%;
    height: 1px;
    background-color: #fff;
    position: absolute;
    bottom: 5px;
    left: 2px;
}
.slider .swiper-slide p{
    font-size: 27px;
    color: #fff;
    /* container가 기준점 */
    position: absolute;
    left: 60px;
    top: 240px;
    font-weight: bold;
    text-shadow: 1px 1px 3px #333;
}

/* .movie */
.movie{
    padding: 100px 0;
}

.movie .movie_title{
    margin-bottom: 60px;
}
.movie .movie_title ul{
    margin: 0 auto;
    width: 900px;
}
.movie .movie_title ul li{
    float: left;
    width: 210px;
    text-align: center;
    border: 1px solid #c4c4c4;
    /* border 겹치는 부분 삭제 */
    margin-right: -1px;
}
.movie .movie_title ul li a{
    display: block;
    padding: 15px 0;
    font-size: 18px;
    color: #666;
    font-weight: 700;
}
.movie .movie_title ul li.active{}
.movie .movie_title ul li.active a{
    background-color: #666;
    color: #fff;
}

.movie .movie_chart{}

<media.css>

@charset "utf-8";
@media(max-width:1290px){
    .container{
        width: 100%;    
    }
    /* header */
    .header .nav ul li{width: 93px;}
    /* banner */
    .slider .swiper-slide h3{font-size: 62px;}
    .slider .swiper-slide p{font-size: 27px;}
}
@media(max-width:1060px){
    /* banner */
    .banner_menu .bm_right ul:first-child{display: none;}
}

/* 노트북 */
@media(max-width:1024px){
    .row{padding: 0 24px;}
    /* header */
    .header .nav{display: none;}
    #mNav{display: block;}
    /* banner */
    .slider .swiper-slide h3{font-size: 50px;}
    .slider .swiper-slide p{font-size: 24px; top:200px}
}

@media(max-width:960px){
    /* header */
    /* 로고 가운데 정렬하기 > float 해제 */
    .header .logo{float: none; text-align: center; width: 100%;}
    .header .logo a strong{left: 15px;}

    /* banner */
    .banner_menu .bm_left ul li.line{display: none;}
    .banner_menu .bm_left ul li:nth-of-type(3){display: none;}

    .slider .swiper-slide h3{font-size: 38px; top:165px}
    .slider .swiper-slide p{font-size: 20px; top:220px;}
    /* movie */
    .movie .movie_title ul{width: auto;}
    .movie .movie_title ul li{width: 25%; box-sizing: border-box; }


}
/* 태블릿 */
@media(max-width:768px){ 
    body{background-color: #d9d7e0;}
    #header{background-color: #fff;}
    .row{padding: 0 16px;}

   #movie .row{
    background-color: #fff;
    margin: 24px;
    padding: 24px;
   }
   #movie .ir_su{
    /* position의 기본(해제) */
    position: static;
    width: auto; 
    height: auto; 
    line-height: normal; 
    text-indent: 0px;
    font-size: 24px;
    font-weight: bold;
    padding-bottom: 24px;
   }
   
   .movie{
    /* .movie의 패딩값을 없애주면 위아래 여백이 없어진다. */
    padding: 0;
   }
   .movie .movie_title{
        margin-bottom: 30px;
   }
   .movie .movie_title ul{
        position: relative;
        padding-bottom: 10px;
   }
   .movie .movie_title ul::before{
        content: "";
        width: 100%;
        height: 1px;
        background-color: #aaa;
        position: absolute;
        left: 0;
        bottom: 0;
    }
   .movie .movie_title ul li{
        width: auto;
        border: 0;
   }
   .movie .movie_title ul li a{
        padding: 0;
        /* font-size: 18px;
        color: #666; */
        font-weight: 400;
        margin-right: 35px;
   }
   .movie .movie_title ul li.active a{
        background-color: #fff;
        color: #666;
   }
   .movie .movie_title ul li.active{
        position: relative;
   }
   .movie .movie_title ul li.active::after{
        content: "";
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: #333;
        transition: all 0.3s;
        left: 0;
        bottom: -10px;
   }
   



}

/* 모바일폰 */
@media(max-width:600px){
    /* header */
    .header .logo{float: none; text-align: left; width: 100%;}
    .header .logo a strong{display: none;}

    /* banner */
    .banner_menu .bm_right ul li.white a{padding: 3px 15px;}
    .banner_menu .bm_right ul li.purple a{padding: 3px 15px;}

    .slider .swiper-slide h3{font-size: 38px; top:165px}
    .slider .swiper-slide p{font-size: 20px; top:220px;}

    /* movie */
    #movie .row{background-color: #fff; margin: 8px; padding: 8px;}
    #movie .ir_su{font-size: 18px; padding-bottom: 16px;}
    .movie .movie_title{margin-bottom: 20px;}
    .movie .movie_title ul{padding-bottom: 3px;}
    .movie .movie_title ul li a{font-size: 14px;margin-right: 15px;}
    .movie .movie_title ul li.active::after{bottom: -3px; width: 90%; height: 2px;}
}
@media(max-width:480px){}
@media(max-width:360px){}

728x90

저작자표시 비영리 변경금지

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

비주얼 스튜디오 코드 66_ 사이드 닷 메뉴 (0)	2023.07.06
비주얼 스튜디오 코드 65_파노라마 회사 소개 (0)	2023.07.05
비주얼 스튜디오 코드 63_ parallax07 (0)	2023.07.05
비주얼 스튜디오 코드 62_ 하이시네마 웹사이트 만들기 02 (0)	2023.07.04
비주얼 스튜디오 코드 61 _ 비교연산자 (0)	2023.07.04

현재글비주얼 스튜디오 코드 64_ 하이시네마 웹페이지 03

조반짝의 도전일지

공부, 취미, 여행 모두 경험해보고 싶은 조반짝의 도전일지입니다. ✨contact_ looby777@naver.com ✨Instagram_holylovuuu_illust

Parallax, JavaScript, if문, position, HTML, offset, CSS, 자바, 자바스크립트, ACTIVE, 코딩테스트, float, media, 이클립스, SQL, 프론트엔드, Java, 비주얼스튜디오코드, For문, 웹디자인,

Today :
Yesterday :

조반짝의 도전일지