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

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

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

조반짝 2023. 7. 4. 16:12

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>

@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

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

조반짝의 도전일지

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

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

Today :
Yesterday :

조반짝의 도전일지