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

비주얼 스튜디오 코드 62_ 하이시네마 웹사이트 만들기 02

by 조반짝 2023. 7. 4.
728x90
반응형

html 마크업

css 편집

.container 편집

.header html 세부 마크업

.header css 편집

.nav html 세부 마크업

 

pc .nav css 편집

**로고와 네비를 꼭 float을 띄워야한다.

모바일 nav 만들기

햄버거 메뉴 만들기

 

반응형 화면

media css 만들기

 

▼

.row 값을 화면 크기가 축소될 때마다 치수를 줄여준다.

banner .nav 편집

media 편집

 

 

◆ slick 

슬릭을 2개 이상 사용시에 충돌이 나서 오류가 생긴다.

슬릭 여러개 사용시 슬릭 중 하나를 초기화 시키기

 

슬릭 초기화 코드

// $('.review').get(0).slick.setPosition()

 

◇ swiper

https://swiperjs.com/

 

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

css, script 에 링크걸기

복사해서 슬라이더 밑에 붙여넣기

복사해서 script에 넣기

swiper-slide class 이름 추가하기

slide ss1-3 세부 마크업

#bannder_slider css 편집

 

css에서 backgroud: url 로 이미지를 넣어준다.

<html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>하이시네마</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"
/>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="shortcut icon" href="./image/ICON.png">
    <link rel="stylesheet" href="./css/media.css">
</head>
<body>
    <header id="header">
        <div class="container">
            <div class="row">
                <div class="header clearfix">
                    <h1>
                        <!-- 로고를 클릭하면 홈으로 가도록 링크 -->
                        <a href="index.html">
                            <em><img src="./image/logo.png" alt="하이시네마"></em>
                            <strong><img src="./image/logo_sub.png" alt="하이미디어 영화관"></strong>
                        </a>
                    </h1>
                    <!-- pc nav -->
                    <nav class="nav">
                        <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>
                    <!-- mobile nav -->
                    <nav id="mNav">
                        <h2 class="ir_su">모바일 전체 메뉴</h2>
                        <a href="#" class="ham"><span></span></a>
                    </nav>
                </div><!--//header-->
            </div><!--//row-->
        </div><!--//container-->
    </header>
    <section id="banner">
        <h2 class="ir_su">배너메뉴 영역</h2>
        <div class="container">
            <div class="banner_menu">
                <div class="row">
                    <div class="bm_left">
                        <ul>
                            <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">
                        <ul>
                            <li class="line"><a href="#">고객센터</a></li>
                            <li class="line"><a href="#">멤버쉽</a></li>
                            <li><a href="#">VIP</a></li>
                        </ul>
                        <ul>
                            <li class="white"><a href="#">상영시간표</a></li>
                            <li class="purple"><a href="#">빠른예매</a></li>
                        </ul>
                    </div>
                </div><!--//row-->
            </div><!--//container-->
        </div>
        <div id="banner_slider">
            <div class="swiper">
                <div class="swiper-wrapper">
                <div class="swiper-slide ss1">
                    <div class="container">
                        <div class="row">
                            <h3>도굴</h3>
                            <p>천만관객 돌파</p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide ss2">
                    <div class="container">
                        <div class="row">
                            <h3>Inception</h3>
                            <p>13년만에 돌아온 명작</p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide ss3">
                    <div class="container">
                        <div class="row">
                            <h3>헬기를 타는 여자</h3>
                            <p>그녀가 헬기를 타는 이유는?</p>
                        </div>
                    </div>
                </div>
                </div>
                
                <div class="swiper-pagination"></div> <!-- 닷메뉴 -->         
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>

            </div>
        </div>
    </section><!--//banner-->

    <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>

    <script>
        const swiper = new Swiper('.swiper', {
        loop: true, //무한반복
        
        pagination: {
            el: '.swiper-pagination',
            clickable: true, //닷버튼 클릭시 페이지 이동
        }, //닷메뉴

        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }, //이전단추, 다음단추

        autoplay: {
            delay : 3000,
        } //자동재생
        });


    </script>
</body>
</html>

<reset css>

@charset "utf-8";

@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);

@font-face {
    font-family: 'NEXON Lv1 Gothic OTF';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.nanumgothic * {
 font-family: 'Nanum Gothic', sans-serif;
}

/* 여백 초기화 */
body,div,ul,li,dl,dt,ol,h1,h2,h3,h4,h5,h6,input,fieldset,legend,p,select,table,
th,td,tr,textarea,button,form{margin: 0; padding: 0;}

/* a 링크 초기화 */
a {color: #222; text-decoration: none;}
a:hover {color: #390;}

/* 폰트 초기화 */
body, input, textarea, select, button, table {
    font-family: 'NEXON Lv1 Gothic OTF',AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;
    color: #222; font-size: 13px; line-height: 1.5;}

/* 폰트 스타일 초기화 */
em,address {font-style: normal;}

/* 블릿기호 초기화 */
dl,ul,li,ol,menu {list-style: none;}

/* 제목 태그 초기화 */
h1,h2,h3,h4,h5,h6 {font-size: 13px; color:#222; font-weight: normal;}

/* 테두리 초기화 */
img,fieldset {border:0 none;}

/* 버튼 초기화 */
button {border:0;}

/* IR 효과 */
.ir_pm {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;} /* 의미있는 이미지의 대체 텍스트를 제공하는 경우 */
.ir_wa {display: block; overflow: hidden; position: relative; z-index: -1; width: 100%; height: 100%;} /* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고하 할 때 */
.ir_su {overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px;} /* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */

/* margin, padding */
.mt10 {margin-top: 10px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}
.mt25 {margin-top: 25px !important;}
.mt30 {margin-top: 30px !important;}
.mt35 {margin-top: 35px !important;}
.mt40 {margin-top: 40px !important;}
.mt45 {margin-top: 45px !important;}
.mt50 {margin-top: 50px !important;}

.clearfix::before,.clearfix::after{
    content: "";
    display: block;
    clear: both;
}

<style.css>

@charset "utf-8";

#header{
    width: 100%;
    border-bottom: 1px solid #c6c6c6;
}

.header .ham{
    display: block;
    width: 25px;
    height: 10px;
    /* background-color: rgba(0, 0, 0, 0.3); */
    padding: 15px 10px 10px 10px;
}
.header .ham span{
    position: relative;
    display: block;
    width: 25px;
    height: 4px;
    background-color: #39106a;
}

.header .ham span::before{
    content: "";
    width: 25px;
    height: 4px;
    background-color: #39106a;
    position: absolute;
    top: -7px;
    left: 0;
}
.header .ham span::after{
    content: "";
    width: 25px;
    height: 4px;
    background-color: #39106a;
    position: absolute;
    left: 0;
    bottom: -7px;
}

#banner{
    /* height: 600px; */
    /* banner_menu의 기준점 */
    position: relative;
}
#banner img{
    width: 100%;
}

#mNav{
    position: absolute;
    right: 14px;
    top: 14px;
    display: none;
}

.container{
    width: 1280px;
    /* height: inherit; */
    /* container가 감싸고 있기 때문에 하위 태그의 기준점이 됨 */
    position: relative;
    margin: 0 auto;
}

/* PC에는 필요하지 않지만 모바일크기에 왼쪽,오른쪽 여백 주기 */
.row{
    padding: 0 28px;
}

/* header */
.header{}
.header h1{
    float: left;
}
.header h1 em{
    display: inline-block;
    padding: 15px 5px 5px 0;
}
.header h1 em img{
    width: 155px;
}
.header h1 strong{
    display: block; 
    position: absolute;
    /* container: 기준점 */
    left: 195px;
    top: 23px;
}
.header h1 strong img{
    width: 126px;
}

/* .nav */
.header .nav{
    float: right;
}
.header .nav ul{
    border-left: 1px solid #c6c6c6;
}
.header .nav ul li{
    /* nav 메뉴 옆으로 나열 */
    float: left;
    width: 103px;
    text-align: center;
    border-right: 1px solid #c6c6c6;
    height: 65px;
    line-height: 65px;
}
.header .nav ul li a{
    display: block;
    font-size: 17px;
    color: #444;
}

/* banner_menu */
.banner_menu{
    position: absolute;
    left: 0;
    top: 20px;
    width: 100%;
    overflow: hidden;
    z-index: 10;
}

.banner_menu a{
    color: #fff;
    transition: all 0.5s;
}
.banner_menu a:hover{
    color: #c6c6c6;
}

.banner_menu .bm_left{
    float: left;
    padding-top: 9px;
}
.banner_menu .bm_left ul{}
.banner_menu .bm_left ul li{
    display: inline;
    margin-right: 30px;
    position: relative;
}

.banner_menu .bm_left ul li.total{

}
.banner_menu .bm_left ul li.total a{
    font-size: 12px;
    display: inline-block;
    border: 1px solid #fff;
    padding: 3px 10px;
    transition: all 0.3s;
    
}
.banner_menu .bm_left ul li.total a:hover{
    background-color: #fff;
    color: #000;
}
.banner_menu ul li.line::after{
    content: "";
    width: 1px;
    height: 14px;
    background-color: #fff;
    position: absolute;
    top: 0;
    right: -18px;
}
.banner_menu .bm_left ul li.line{}
.banner_menu .bm_left ul li.line::after{
    
}
.banner_menu .bm_left ul li a{}

.banner_menu .bm_right{
    float: right;
    overflow: hidden;
}
.banner_menu .bm_right ul{
    float: left;
}
.banner_menu .bm_right ul:nth-of-type(1){
    padding-top: 9px;
}
.banner_menu .bm_right ul li{
    display: inline;
    position: relative;
    margin-right: 20px;
}
.banner_menu .bm_right ul li a{}
.banner_menu .bm_right ul li.line{
    margin-right: 30px;
}
.banner_menu .bm_right ul li.white{
    margin-right: 10px;
}
.banner_menu .bm_right ul li.white a,.banner_menu .bm_right ul li.purple a{
    display: inline-block;
    width: 80px;
    padding: 7px 25px;
    background-color: #39106a;
    text-align: center;
    border: 1px solid #451d76;
}
.banner_menu .bm_right ul li.purple{
    margin-right: 0;
}
.banner_menu .bm_right ul li.purple a{
  background-color: #fff;
  border: 1px solid #39106a;
  color: #39106a;
}

/* banner_slider */

#banner_slider{
    width: 100%;
    height: 600px;
}

#banner_slider .ss1{
    background: url(../image/banner2.jpg) no-repeat center center;
    background-size: cover;
    height: 600px;
}

#banner_slider .ss2{
    background: url(../image/banner3.png) no-repeat center center;
    background-size: cover;
    height: 600px;
}

#banner_slider .ss3{
    background: url(../image/banner4.png) no-repeat center center;
    background-size: cover;
    height: 600px;
}

#banner_slider h3{
    font-size: 6vw;
    color: #fff;
    margin-top: 160px;
    font-weight: bold;
}

#banner_slider p{
    font-size: 4vw;
    color: #dbdbdb;
    font-weight: 200;
    text-shadow: 2px 2px 2px #000;
}

<media.css>

@charset "utf-8";

@media(max-width:1290px){
    .container{width: 100%;}
    .row{padding: 0 28px;}

    .header h1 em{padding: 11px 0 5px 0;}
    .header h1 strong{top: 18px;}
    .header .nav ul li{width: 93px;}
    .header .nav ul li a{font-size: 15px;}
}
@media(max-width:1024px){
    .row{padding: 0 24px;}
    .header .nav ul li{width: 83px;}
    .header .nav ul li a{font-size: 14px;}
}
@media(max-width:960px){
    .row{padding: 0 20px;}
    .header .nav{display: none;}
    #mNav{display: block;}
    .header h1{width: 100%;text-align: center;}
    .header h1 strong{left: 14px;}
    /* banner */
    /* left li 2,3번째 지우기 */
    .banner_menu .bm_left ul li:nth-of-type(2){display: none;}
    .banner_menu .bm_left ul li:nth-of-type(3){display: none;}
}
@media(max-width:768px){
    .row{padding: 0 16px;}
    /* banner */
    /* right 첫번째 ul 지우기*/
    .banner_menu .bm_right ul:nth-of-type(1){display: none;}
}
@media(max-width:600px){
    .row{padding: 0 12px;}
    .header h1{text-align: left;}
    .header h1 strong{display: none;}

    /* banner */
    /* white, purple 사이즈 축소 */
    .banner_menu .bm_right ul li.white a,
    .banner_menu .bm_right ul li.purple a{
        width: 60px; 
        padding: 3px 12px;
        white-space: nowrap;
        font-size: 13px;
    }
}
@media(max-width:480px){
    .row{padding: 0 8px;}
}
@media(max-width:360px){}
728x90
반응형
저작자표시 비영리 변경금지

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

비주얼 스튜디오 코드 64_ 하이시네마 웹페이지 03  (0) 2023.07.05
비주얼 스튜디오 코드 63_ parallax07  (0) 2023.07.05
비주얼 스튜디오 코드 61 _ 비교연산자  (0) 2023.07.04
비주얼 스튜디오 코드 60_ parallax 06  (0) 2023.07.04
비주얼 스튜디오 코드 59_하이시네마 웹페이지 만들기  (0) 2023.07.03

관련글

티스토리툴바