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

비주얼 스튜디오 코드 71_하이시네마_컨텐츠(유투브 영상 삽입)

조반짝 2023. 7. 10. 16:03
728x90
반응형

#contents openig 

html 마크업

opening css 편집

이미지를 포토샵에서 열어서 포토샵의 위치를 보고 background-position으로 좌표값 넣어주면 이미지가 나온다.

ir_pm으로 안에 글자를 없애준다.

바 이미지 넣기 (위치는 bottom center)

이미지 배율 100%로 하려면 background-size: 100%; 설정

opening 배경이미지 넣기

100%로 사용을 했으니 #opening에 배경을 넣는다.

.opening 에 padding:100으로 변경해준다.

div float 띄워서 옆으로 나열하기

h3

p태그 날짜 css 편집

반응형 넣기

화면크기960PX

화면크기780PX

화면크기600PX

새로운영화 컨텐츠 만들기

#new html 마크업

#new css편집

.new h2 편집

.new .new_left 편집

.new .new_right 편집

position으로 new_right 띄워주기

why? 반응형을 넣을 때 줄일 때 글자가 밑으로 떨어지는 것을 방지하기위함 

유튜브 영상 넣기

영상 오른쪽 버튼 클릭후 소스코드복사를 해서 html 태그 안에 넣기

html에서 width=100%; height=500px; 맞추기

css에서 width=100%를 막아주기

동영상이 들어갔다.

.new_right html mark up

.new_right css 편집

별점 넣기

new_right 추가 mark up

new_right 추가 css 편집

.new_right 추가 mark up 2

label과 input 세트로 input에 같은 아이디로 label for 이름과 맞추어주어야한다.

.s2안에 select문을 넣는다.

select 안에 option을 넣어서 시간을 적용

s3 추가(주소)

new_right 추가 css 편집2

s3 css 편집

버튼 html 마크업

버튼 css 편집

반응형 넣기

w 960px

w768px

w600px

<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="container">
                <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 class="swiper-scrollbar"></div>
                </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">
                            <div class="swiper2">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <div class="poster">
                                            <figure>
                                                <img src="./image/poster01.jpg" alt="포스터1">
                                            </figure>
                                            <div class="rank">
                                                <strong>1</strong>
                                            </div>
                                            <div class="mx">
                                                <span class="m icon ir_pm">MX</span>
                                                <span class="b icon ir_pm">Boutique</span>
                                            </div>
                                        </div>
                                        <div class="info">
                                            <h3>
                                                <span class="icon all ir_pm">관람가</span>
                                                <strong>삼진그룹</strong>
                                            </h3>
                                            <div class="info_btn">
                                                <a href="#">상세정보</a>
                                                <a href="#">예매하기</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="poster">
                                            <figure>
                                                <img src="./image/poster02.jpg" alt="포스터1">
                                            </figure>
                                            <div class="rank">
                                                <strong>2</strong>
                                            </div>
                                            <div class="mx">
                                                <span class="m icon ir_pm">MX</span>
                                                <span class="b icon ir_pm">Boutique</span>
                                            </div>
                                        </div>
                                        <div class="info">
                                            <h3>
                                                <span class="icon a12 ir_pm">관람가</span>
                                                <strong>동굴</strong>
                                            </h3>
                                            <div class="info_btn">
                                                <a href="#">상세정보</a>
                                                <a href="#">예매하기</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="poster">
                                            <figure>
                                                <img src="./image/poster04.jpg" alt="포스터1">
                                            </figure>
                                            <div class="rank">
                                                <strong>3</strong>
                                            </div>
                                            <div class="mx">
                                                <span class="m icon ir_pm">MX</span>
                                                <span class="b icon ir_pm">Boutique</span>
                                            </div>
                                        </div>
                                        <div class="info">
                                            <h3>
                                                <span class="icon a15 ir_pm">관람가</span>
                                                <strong>내가죽던날</strong>
                                            </h3>
                                            <div class="info_btn">
                                                <a href="#">상세정보</a>
                                                <a href="#">예매하기</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="poster">
                                            <figure>
                                                <img src="./image/poster05.jpg" alt="포스터1">
                                            </figure>
                                            <div class="rank">
                                                <strong>4</strong>
                                            </div>
                                            <div class="mx">
                                                <span class="m icon ir_pm">MX</span>
                                                <span class="b icon ir_pm">Boutique</span>
                                            </div>
                                        </div>
                                        <div class="info">
                                            <h3>
                                                <span class="icon a19 ir_pm">관람가</span>
                                                <strong>검객</strong>
                                            </h3>
                                            <div class="info_btn">
                                                <a href="#">상세정보</a>
                                                <a href="#">예매하기</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="poster">
                                            <figure>
                                                <img src="./image/poster06.jpg" alt="포스터1">
                                            </figure>
                                            <div class="rank">
                                                <strong>5</strong>
                                            </div>
                                            <div class="mx">
                                                <span class="m icon ir_pm">MX</span>
                                                <span class="b icon ir_pm">Boutique</span>
                                            </div>
                                        </div>
                                        <div class="info">
                                            <h3>
                                                <span class="icon a15 ir_pm">관람가</span>
                                                <strong>1987</strong>
                                            </h3>
                                            <div class="info_btn">
                                                <a href="#">상세정보</a>
                                                <a href="#">예매하기</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="poster">
                                            <figure>
                                                <img src="./image/poster07.jpg" alt="포스터1">
                                            </figure>
                                            <div class="rank">
                                                <strong>6</strong>
                                            </div>
                                            <div class="mx">
                                                <span class="m icon ir_pm">MX</span>
                                                <span class="b icon ir_pm">Boutique</span>
                                            </div>
                                        </div>
                                        <div class="info">
                                            <h3>
                                                <span class="icon a15 ir_pm">관람가</span>
                                                <strong>검사외전</strong>
                                            </h3>
                                            <div class="info_btn">
                                                <a href="#">상세정보</a>
                                                <a href="#">예매하기</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-pagination"></div>
                                <div class="swiper-button-prev"></div>
                                <div class="swiper-button-next"></div>
                            </div>

                        </div>
                        <div class="chart2">
                            <div class="swiper2">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <div class="poster">
                                            <figure>
                                                <img src="./image/new1.jpg" alt="인디아나존스">
                                            </figure>
                                            <div class="rank">
                                                <strong>1</strong>
                                            </div>
                                            <div class="mx ir_pm">
                                                <span class="m icon">mx</span>
                                                <span class="b icon">Boutique</span>
                                            </div>
                                        </div>
                                        <div class="info">
                                            <h3>
                                                <span class="icon all ir_pm">관람가</span>
                                                <strong>인디아나존스</strong>
                                            </h3>
                                            <div class="info_btn">
                                                <a href="#">상세보기</a>
                                                <a href="#">예매하기</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="poster">
                                            <figure>
                                                <img src="./image/new2.jpg" alt="스파이더맨">
                                            </figure>
                                            <div class="rank">
                                                <strong>2</strong>
                                            </div>
                                            <div class="mx ir_pm">
                                                <span class="m icon">mx</span>
                                                <span class="b icon">Boutique</span>
                                            </div>
                                        </div>
                                        <div class="info">
                                            <h3>
                                                <span class="icon all ir_pm">관람가</span>
                                                <strong>스파이더맨</strong>
                                            </h3>
                                            <div class="info_btn">
                                                <a href="#">상세보기</a>
                                                <a href="#">예매하기</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="poster">
                                            <figure>
                                                <img src="./image/new3.jpg" alt="엘리멘탈">
                                            </figure>
                                            <div class="rank">
                                                <strong>3</strong>
                                            </div>
                                            <div class="mx ir_pm">
                                                <span class="m icon">mx</span>
                                                <span class="b icon">Boutique</span>
                                            </div>
                                        </div>
                                        <div class="info">
                                            <h3>
                                                <span class="icon all ir_pm">관람가</span>
                                                <strong>엘리멘탈</strong>
                                            </h3>
                                            <div class="info_btn">
                                                <a href="#">상세보기</a>
                                                <a href="#">예매하기</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="poster">
                                            <figure>
                                                <img src="./image/new4.jpg" alt="범죄도시3">
                                            </figure>
                                            <div class="rank">
                                                <strong>4</strong>
                                            </div>
                                            <div class="mx ir_pm">
                                                <span class="m icon">mx</span>
                                                <span class="b icon">Boutique</span>
                                            </div>
                                        </div>
                                        <div class="info">
                                            <h3>
                                                <span class="icon a19 ir_pm">관람가</span>
                                                <strong>범죄도시3</strong>
                                            </h3>
                                            <div class="info_btn">
                                                <a href="#">상세보기</a>
                                                <a href="#">예매하기</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="poster">
                                            <figure>
                                                <img src="./image/new5.jpg" alt="악마들">
                                            </figure>
                                            <div class="rank">
                                                <strong>5</strong>
                                            </div>
                                            <div class="mx ir_pm">
                                                <span class="m icon">mx</span>
                                                <span class="b icon">Boutique</span>
                                            </div>
                                        </div>
                                        <div class="info">
                                            <h3>
                                                <span class="icon a19 ir_pm">관람가</span>
                                                <strong>악마들</strong>
                                            </h3>
                                            <div class="info_btn">
                                                <a href="#">상세보기</a>
                                                <a href="#">예매하기</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="poster">
                                            <figure>
                                                <img src="./image/new6.jpg" alt="귀공자">
                                            </figure>
                                            <div class="rank">
                                                <strong>6</strong>
                                            </div>
                                            <div class="mx ir_pm">
                                                <span class="m icon">mx</span>
                                                <span class="b icon">Boutique</span>
                                            </div>
                                        </div>
                                        <div class="info">
                                            <h3>
                                                <span class="icon a15 ir_pm">관람가</span>
                                                <strong>귀공자</strong>
                                            </h3>
                                            <div class="info_btn">
                                                <a href="#">상세보기</a>
                                                <a href="#">예매하기</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="chart3">chart3</div>
                        <div class="chart4">chart4</div>
                    </div><!--movie_chart-->
                </div><!--movie-->
            </div>
        </div>
    </section><!--//탭메뉴,movie-->
    <section id="event">
        <div class="container">
            <div class="row">
                <div class="event">
                    <h2>새로운 이벤트</h2>
                    <div class="event_left">
                        <div class="event_slide">
                            <img src="./image/eve1.png" alt="이벤트이미지">
                        </div>
                        <div class="event_box1">
                            <img src="./image/eve2.png" alt="관람권런칭">
                        </div>
                        <div class="event_box2">
                            <img src="./image/event2.png" alt="부평점 시즌할인권">
                        </div>
                    </div>
                    <div class="event_right">
                        <img src="./image/event0.png" alt="사표대신 영화표">
                    </div>
                </div>
            </div>
        </div>
    </section><!--//event-->
  
    <section id="opening">
        <div class="container">
            <div class="row">
                <div class="opening">
                    <h2><span class="icon2 grand ir_pm">Grand Opening</span></h2>
                    <strong class="icon2 date ir_pm">2023. 07.~ 2023. 09</strong>
                    <p class="desc">LIFE THEATER로 새로운 하이시네마를 만나보세요!</p>
                    <div class="open_box">
                        <div>
                            <h3>리뉴얼 오픈</h3>
                            <p>
                                <em>경기도</em>
                                <strong>안양</strong>
                                7월 15일
                            </p>
                        </div>
                        <div>
                            <h3>리뉴얼 오픈</h3>
                            <p>
                                <em>경기도</em>
                                <strong>인덕원 사거리</strong>
                                7월 30일
                            </p>
                        </div>
                        <div>
                            <h3>리뉴얼 오픈</h3>
                            <p>
                                <em>경기도</em>
                                <strong>구리역점</strong>
                                7월 28일
                            </p>
                        </div>
                    </div>
                </div><!--//opening-->
            </div>
        </div>
    </section>
    <div id="new">
        <div class="container">
            <div class="row">
                <div class="new">
                    <h2><em>새로운 영화</em></h2>
                    <div class="new_left"><iframe width="100%" height="500" src="https://www.youtube.com/embed/_-nMy2goCnI" title="[스타워즈: 라이즈 오브 스카이워커] 메인 예고편" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
                    <div class="new_right">
                        <h3 class="title">스타워즈: <span>라이즈 오브 스카이워커<span></h3>
                        <span class="release">2020년1월개봉</span>
                        <div class="star">
                            <span class="icon star1"></span>
                            <span class="icon star1"></span>
                            <span class="icon star1"></span>
                            <span class="icon star2"></span>
                            <span class="icon star0"></span>
                            <strong>7.5/10</strong>
                        </div>
                        <ul class="summary">
                            <li class="genre">
                                <span>액션 </span>
                                <span>미국, 오스트레일리아</span>
                            </li>
                            <li class="age">
                                <span>142분 </span>
                                <span>12세 관람가</span>
                            </li>
                            <li class="desc">
                                더욱 강력해진 포스로 돌아온 ‘레이’는 전 우주를 어둠의 힘으로 지배하려는 ‘카일로 렌’에게 대적할 유일한 히로인으로 거듭난다. 미래의 운명을 쥔 ‘레이’는 든든한 조력자이자 친구인 ‘핀’, ‘포’와 함께 새로운 미래를 위한 험난한 여정을 떠나고, 선과 악의 거대한 전쟁을 마주하게 된다. 또한 ‘카일로 렌’과의 피할 수 없는 운명적 대결을 펼치게 되는데… 전쟁을 끝내고 새로운 전설로 탄생할 선택받은 영웅은 누가 될 것인가?!
                            </li>
                        </ul>
                        <div class="select">
                           <div class="s1">
                                <label for="udate" class="ir_pm">날짜</label>
                                <input type="text" id="udate" name="udate" value="2016년 1월 25일 " class="ui_select1">
                           </div>
                           <div class="s2">
                                <label for="utime" class="ir_pm">시간</label>
                                <select name="utime" id="utime" class="ui_select2">
                                    <option value="오전 0:00">오전 0:00</option>
                                    <option value="오전 1:00">오전 1:00</option>
                                    <option value="오전 3:00">오전 3:00</option>
                                    <option value="오전 5:00">오전 5:00</option>
                                    <option value="오전 7:00">오전 7:00</option>
                                    <option value="오전 9:00">오전 9:00</option>
                                    <option value="오전 11:00">오전 11:00</option>
                                    <option value="오후 13:00">오후 13:00</option>
                                </select>
                           </div>
                           <div class="s3">
                                <label for="utext" class="ir_pm">주소 또는 도로명을 입력해주세요.</label>
                                <input type="text" id="utext" name="utext" class="ui_input" placeholder="주소 또는 도로명을 입력해주세요.">
                           </div>
                        </div>
                        <div class="btn">
                            <a href="#" class="white">좌석확인</a>
                            <a href="#" class="purple">예매하기</a>
                           </div>
                    </div>
                </div><!--//new-->
            </div>
        </div>
    </div>


    <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>



        //영화차트 스와이퍼
        let swiper = new Swiper('.swiper2', {
            //화면상에 보여지는 swiper-slide 갯수
            slidesPerView: 4,
            //슬라이드와 슬라이드 사이 간격
            spaceBetween: 10,
            // swiper 초기화
            observeParents: true,
            observer: true,

            // Responsive breakpoints >> 반응형
            breakpoints: {
                // when window width is >= 10px
                10: {
                    slidesPerView: 1.4,
                    spaceBetween: 20
                },
                // when window width is >= 600px
                600: {
                    slidesPerView: 2,
                    spaceBetween: 20
                },
                // when window width is >= 960px
                960: {
                    slidesPerView: 3,
                    spaceBetween: 24
                },
                // when window width is >= 1024px
                1024: {
                    slidesPerView: 4,
                    spaceBetween: 24
                },
            }
        });

        //영화차트 탭메뉴
        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();
        });





        swiper = new Swiper('.swiper', {
            loop: true,

            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            mousewheel: true,
            scrollbar: {
                el: '.swiper-scrollbar',
            },
            keyboard: {
                enabled: true,
            },
            // autoplay: {
            //     delay: 2500,
            // },
            // swiper 초기화
            observeParents: true,
            observer: true,

        });
    </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{}

#opening{
    background: url(../image/bg01.jpg) no-repeat center top;
    background-size: cover;
    /* padding: 50px 0; */
}
#new{}
.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_chart */
.movie_chart{
    /* 자식태그에서 float해서 hidden 적용 */
    overflow: hidden;
}
.movie_chart > .chart1{}
.movie_chart > .chart1 > div{}
.movie_chart > .chart1 > div > div{}
.movie_chart > .chart1 > div > div > div{}
.movie_chart > .chart1 > div > div > div > .poster{
    position: relative;
}
.movie_chart > .chart1 > div > div > div > .poster img{width: 100%;}
/* 포스터를 기준으로 rank가 움지역야함 */
.movie_chart > .chart1 > div > div > div > .poster .rank{
    position: absolute;
    top: 17px;
    left: 0;
    width: 50px;
    height: 50px;
    background-color: #6e40c4;
    text-align: center;
    line-height: 50px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}
.movie_chart > .chart1 > div > div > div > .poster .rank strong{
    font-size: 20px;
    color: #fff;
    
}
.movie_chart > .chart1 > div > div > div > .poster .mx{
    position: absolute;
    top: 17px;
    right: 0;
}
.movie_chart > .chart1 > div > div > div > .poster .mx span{
    display: block;
    width: 103px;
    height: 25px;
}
.movie_chart > .chart1 > div > div > div > .poster .mx span.m{
    background-position: 0 -75px;
}
.movie_chart > .chart1 > div > div > div > .poster .mx span.b{
    background-position: 0 -100px;
}

/* .info */
.movie_chart > .chart1 > div > div > div > .info{
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 17px;
}
.movie_chart > .chart1 > div > div > div > .info h3{
    font-size: 26px;
    color: #333;
    font-weight: bold;
    margin-bottom: 20px;
}
.movie_chart > .chart1 > div > div > div > .info h3 strong{}
.movie_chart > .chart1 > div > div > div > .info h3 span{
    display: inline-block;
    width: 29px;
    height: 29px;
    vertical-align: -5px;
}
/* 관람가 이미지_ icon */
.movie_chart > .chart1 > div > div > div > .info h3 span.all{
    background-position: -87px -125px;
}
.movie_chart > .chart1 > div > div > div > .info h3 span.a12{
    background-position: 0px -125px;
}
.movie_chart > .chart1 > div > div > div > .info h3 span.a15{
    background-position: -29px -125px;
}
.movie_chart > .chart1 > div > div > div > .info h3 span.a19{
    background-position: -59px -125px;
}

/* .info_btn */
.movie_chart > .chart1 > div > div > div > .info .info_btn{
    overflow: hidden;
}
.movie_chart > .chart1 > div > div > div > .info .info_btn a{
    float: left;
    display: block;
    width: 49%;
    height: 50px;
    background-color: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 2%;
    font-size: 16px;
    font-weight: bold;

}
.movie_chart > .chart1 > div > div > div > .info .info_btn a:last-child{
    margin-right: 0;
}

.swiper2 .swiper-button-prev,.swiper2 .swiper-button-next{
    display: none;
}

/* movie_chart2 */
.movie_chart > .chart2{
    overflow: hidden;
}
.movie_chart > .chart2 > div{}
.movie_chart > .chart2 > div > div{}
.movie_chart > .chart2 > div > div > div{}
.movie_chart > .chart2 > div > div > div .poster{
    position: relative;
}
.movie_chart > .chart2 > div > div > div .poster img{
    width: 100%;
    
}
.movie_chart > .chart2 > div > div > div .poster .rank{
    position: absolute;
    background-color: #6e40c4;
    width: 50px;
    height: 50px;
    left: 0;
    top: 17px;
    text-align: center;
    line-height: 50px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}
.movie_chart > .chart2 > div > div > div .poster .rank strong{
    color: #fff;
    font-size: 20px;
}

.movie_chart > .chart2 > div > div > div .mx{
    position: absolute;
    right: 0;
    top: 17px;
}
.movie_chart > .chart2 > div > div > div .mx span{
    display: block;
    width: 103px;
    height: 25px;
}
.movie_chart > .chart2 > div > div > div .mx .m{
    background-position: 0px -75px;
}
.movie_chart > .chart2 > div > div > div .mx .b{
    background-position: 0 -100px;
}

.movie_chart > .chart2 > div > div > div .info{
    border: 1px solid #ccc;
    padding: 17px;
}

.movie_chart > .chart2 > div > div > div .info h3{
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}
.movie_chart > .chart2 > div > div > div > .info h3 span{
    display: inline-block;
    width: 29px;
    height: 29px;
    vertical-align: -5px;
}
.movie_chart > .chart2 > div > div > div > .info h3 span.all{
    background-position: -87px -125px;
}
.movie_chart > .chart2 > div > div > div > .info h3 span.a12{
    background-position: 0px -125px;
}
.movie_chart > .chart2 > div > div > div > .info h3 span.a15{
    background-position: -29px -125px;
}
.movie_chart > .chart2 > div > div > div > .info h3 span.a19{
    background-position: -59px -125px;
}
.movie_chart > .chart2 > div > div > div > .info h3 span strong{}

.movie_chart > .chart2 > div > div > div .info .info_btn{
    overflow: hidden;
}
.movie_chart > .chart2 > div > div > div .info .info_btn a{
    float: left;
    display: block;
    background-color: #ccc;
    width: 49%;
    height: 50px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 2%;
    font-size: 16px;
    font-weight: bold;
}
.movie_chart > .chart2 > div > div > div .info_btn a:last-child{
    margin-right: 0;
}

.swiper .swiper-scrollbar-drag{background-color: #fff;}

/* event */
.event{
    overflow: hidden;
    padding-bottom: 100px;
}

.event h2{
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 20px;
} 
.event img{width: 100%; display: block;}  
.event .event_left{
    overflow: hidden;
    float: left;
    width: 66%;
    margin-right: 2%;
} 

.event .event_left .event_slide{
    width: 100%;
    float: left;
} 
.event .event_left .event_box1{
    float: left;  
    width: 50%;
} 
.event .event_left .event_box2{
    float: left;
    width: 50%;
} 
.event .event_left .event_slide img{} 
.event .event_right{
    width: 32%;
    float: right;
    margin-right: 0;
} 

/* opening */
.opening{
    padding: 100px;
    text-align: center;
    color: #bb9b51;
}
.opening h2{
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.opening h2 .grand{
    width: 330px;
    height: 50px;
    display: block;
    background-position:  0 -176px;
}

.opening .date{
    width: 310px;
    height: 36px;
    display: inline-block;
    background-position: 0 -226px;
}
.opening .desc{
    font-size: 35px;
    font-weight: 400;
    background: url(../image/bar.png) no-repeat bottom center;
    background-size: 100%;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.opening .open_box{
    padding: 20px -3% 0 3%;
    overflow: hidden;
}
.opening .open_box > div{
    width: 27.33%;
    margin: 4% 3% 0 3%;
    float: left;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid #3e4b44;
}
.opening .open_box > div h3{
    color: #fff;
    border: 1px solid #6e3abb;
    margin-top: -24px;
    font-size: 19px;
    padding: 10px 20px;
    background-color: #551e9b;
    /* inline-block 글씨 있는 칸만 채워진다. */
    display: inline-block;
}
.opening .open_box > div p{
    font-size: 17px;
    color: #fff;
    font-weight: 300;
    padding: 6% 0 10% 0;
}
.opening .open_box > div p em{
    display: block;
}
.opening .open_box > div p strong{
    display: block;
    font-weight: bold;
    text-shadow: 0 0 20px #fff;
}

/* new */
.new{
    padding: 100px 0;
    position: relative;
}
.new h2{
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 20px;
}
.new .new_left{
    /* width: 100%; */
    height: 500px;
    background-color: #ccc;
    margin-right: 420px;
    /* 영상크기 넘쳤을 때 보이지 않게해주기 */
    overflow: hidden;
    background-size: cover;
}
.new .new_right{
    width: 400px;
    height: 500px;
    background-color: #f0f0f0;
    /* position으로 옆으로 띄워주기 */
    position: absolute;
    right: 0;
    top: 165px;
    padding: 34px;
    /* border와 padding 값이 합쳐서 width 400px가 됨 */
    box-sizing: border-box;
}
.new .new_right .title{
    font-size: 28px;
    color: #000;
}
.new .new_right .title span{
    font-size: 20px;
}
.new .new_right .release{
    font-size: 15px;
    color: #333;
}
.new .new_right .star{
    padding: 13px 0;
}
.new .new_right .star span{
    display: inline-block;
    /* 별 이미지 사이즈 */
    width: 20px;
    height: 20px;
    vertical-align: -3px;
}
.new .new_right .star1{
    background-position: -395px 0 ;
}
.new .new_right .star2{
    background-position: -413px 0 ;
}
.new .new_right .star0{
    background-position: -375px 0 ;
}
.new .new_right .star strong{
    font-size: 18px;
    margin-left: 10px;
}

.new .new_right .summary{
    font-size: 14px;
}
.new .new_right .summary .genre{
    padding-bottom: 3px;
}
.new .new_right .summary .age{
    padding-bottom: 10px;
}
.new .new_right .summary .desc{
    /* 양쪽정렬 */
    text-align: justify;
    height: 108px;
    overflow: hidden;
    margin-bottom: 20px;
}

.new .new_right .select{
    overflow: hidden;
}
.new .new_right .select .s1{
    width: 49%;
    float: left;
    margin-right: 2%;
}
.new .new_right .select .s2{
    width: 49%;
    float: left;
}
.new .new_right .select .s3{
    width: 100%;
    float: left;
    margin-top: 2%;
}

.new .new_right .s1 .ui_select1, .new .new_right .s2 .ui_select2{
    width: 100%;
    background-color: #2c2f34;
    color: #fff;
    height: 36px;
    display: inline-block;
    margin: 0;
    /* 글자 정렬 */
    text-align: left;
    /* padding을 주면 안쪽 여백이 생김 */
    padding: 0 10px;
    box-sizing: border-box;
    border: 0;
    outline: none;
}
.new .new_right .s3 .ui_input{
    background-color: #2c2f34;
    color: #fff;
    width: 100%;
    height: 36px;
    padding: 0 10px;
    outline: none;
    border: 0;
}

.new .new_right .btn{
    margin-top: 2%;
    /* background-color: #30106a; */
    overflow: hidden;
}
.new .new_right .btn a{
    margin-top: 10px;
    display: inline-block;
    text-align: center;
    width: 49%;
    float: left;
    padding: 10px 0;
}
.new .new_right .btn a.white{
    background-color: #fff;
    border: 1px solid #6e3abb;   
    font-size: 18px;
    color: #6e3abb;
    margin-right: 2%;
    font-weight: bold;
    box-sizing: border-box;
}
.new .new_right .btn a.purple{
    background-color: #3a0e6a;
    border: 1px solid #6e3abb;
    font-size: 18px;
    color: #fff;
    font-weight: bold;
    margin-right: 0;
    box-sizing: border-box;
}

<reset.css>

@charset "utf-8";

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

.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,figure,figcaption{margin: 0; padding: 0;}

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

/* 폰트 초기화 */
body, input, textarea, select, button, table {
    font-family:'Nanum Gothic',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;
}

.icon{
    background: url(../image/KakaoTalk_20230706_141256154.png);
}
.icon2{
    background: url(../image/icon2.png);
}

img{
    display: block;
}

<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; }

    /* opening */
    .opening .open_box{display: none;}
    .opening .desc{font-size: 25px;}

    /* new */
    .new{padding: 50px 0;}
    .new .new_left{margin-right: 0;height: 400px;}
    .new .new_right{
     height: auto; 
     position: relative;
     width: 100%;
     top: 0;
}
}
/* 태블릿 */
@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;
   }
   
   /* event */

   #event .row{
     padding: 0 24px 24px 24px;
   }
   .event{
     background-color: #fff;
     padding: 24px;
   }
   .event .event_left{width: 100%;}
   .event .event_right{display: none;}
   .event h2{font-size: 24px;}

    /* opening */
    .opening{padding: 24px;}
    .opening .desc{font-size: 20px;}

    /* new */
    .new{padding: 24px; margin: 24px 8px; background-color: #fff;}
    .new h2{font-size: 24px; margin-bottom: 10px;}
    .new .new_right .title{font-size: 24px;}
    .new .new_right .title span{font-size: 24px;}
}

/* 모바일폰 */
@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: 16px; padding: 16px;}
    #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;}

    /* event */
    #event .row{padding: 0 16px 16px 16px;}
   .event{padding: 16px;}
   .event h2{font-size: 18px; margin-bottom: 16px;}

   /* opening */
   .opening .desc{font-size: 18px;}
   .opening .date{display: none;}

   /* new */
   .new{padding: 16px; margin: 16px 0px; background-color: #fff;}
   .new h2{font-size: 18px; margin-bottom: 10px;}
   .new .new_right .title{font-size: 16px;}
   .new .new_right .title span{font-size: 16px;}
}
@media(max-width:480px){}
@media(max-width:360px){}

 

728x90
반응형
저작자표시 비영리 변경금지

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

비주얼 스튜디오 코드 73_animation 화면이 움직이면 글자가 바운딩해서 나타남  (0) 2023.07.11
비주얼 스튜디오 코드 72_parallax08  (0) 2023.07.11
비주얼 스튜디오 코드 70_parallax07  (0) 2023.07.10
비주얼 스튜디오 코드 69_파노라마 회사소개02  (0) 2023.07.07
비주얼 스튜디오 코드 68_ 하이시네마 탭메뉴_02  (0) 2023.07.07

'☭DEVELOPER/#2 웹개발(자바기반 풀스택)'의 다른글

  • 현재글비주얼 스튜디오 코드 71_하이시네마_컨텐츠(유투브 영상 삽입)

관련글

티스토리툴바