2022_summer_frontend

hocheol0303 · Jul 8, 2024 · 2521001 · 2521001
commit 2521001
Show file tree

Hide file tree

Showing 111 changed files with 5,672 additions and 0 deletions.
diff --git a/A.실습/A.실습/movie_img/arr_lf_19_wht.png b/A.실습/A.실습/movie_img/arr_lf_19_wht.png
diff --git a/A.실습/A.실습/movie_img/arr_rg_19_wht.png b/A.실습/A.실습/movie_img/arr_rg_19_wht.png
diff --git a/A.실습/A.실습/movie_img/heart_rnd_16_off.png b/A.실습/A.실습/movie_img/heart_rnd_16_off.png
diff --git a/A.실습/A.실습/movie_img/ic_star.png b/A.실습/A.실습/movie_img/ic_star.png
diff --git a/A.실습/A.실습/movie_img/time2.png b/A.실습/A.실습/movie_img/time2.png
diff --git a/A.실습/A.실습/movie_img/멘.jpg b/A.실습/A.실습/movie_img/멘.jpg
diff --git a/A.실습/A.실습/movie_img/미니언즈.jpg b/A.실습/A.실습/movie_img/미니언즈.jpg
diff --git a/A.실습/A.실습/movie_img/비상선언.jpg b/A.실습/A.실습/movie_img/비상선언.jpg
diff --git a/A.실습/A.실습/movie_img/썸머필름을타고.jpg b/A.실습/A.실습/movie_img/썸머필름을타고.jpg
diff --git a/A.실습/A.실습/movie_img/아이언크로스.jpg b/A.실습/A.실습/movie_img/아이언크로스.jpg
diff --git a/A.실습/A.실습/movie_img/외계인.jpg b/A.실습/A.실습/movie_img/외계인.jpg
diff --git a/A.실습/A.실습/movie_img/코난.jpg b/A.실습/A.실습/movie_img/코난.jpg
diff --git a/A.실습/A.실습/movie_img/탑건.jpg b/A.실습/A.실습/movie_img/탑건.jpg
diff --git a/A.실습/A.실습/movie_img/토르.jpg b/A.실습/A.실습/movie_img/토르.jpg
diff --git a/A.실습/A.실습/movie_img/한산.jpg b/A.실습/A.실습/movie_img/한산.jpg
diff --git a/A.실습/A.실습/movie_img/헤어질결심.jpg b/A.실습/A.실습/movie_img/헤어질결심.jpg
diff --git a/A.실습/A.실습/메인2.css b/A.실습/A.실습/메인2.css
@@ -0,0 +1,175 @@
+*{margin: 0; padding: 0;}
+
+html,
+body {
+    position: relative;
+    height: 100%;
+    padding-top: 50px;
+  }
+
+body {
+    background: #000;
+    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    color: #fff;
+    margin: 0;
+    padding: 0;
+
+  }
+
+.time-t{
+    float: right;
+    cursor: pointer;
+  }
+.time-t i{
+    background-image: url(movie_img/time2.png);
+    background-repeat: no-repeat;
+    background-position:  0px 4.4px;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    text-indent: -9999px;
+    overflow: hidden;
+
+  }
+
+.mv-text i{
+    background-image: url(movie_img/ic_star.png);
+    background-repeat: no-repeat;
+    display: inline-block;
+    cursor: pointer;
+  }
+
+ #icon-heart{
+    background-image: url(movie_img/heart_rnd_16_off.png);
+    width: 15.99px;
+    height: 15.99px;
+    background-position:  0px 0px;
+    background-repeat: no-repeat;
+    display: inline-block;
+    cursor: pointer;
+  }
+
+.mySwiper {
+  overflow: hidden;
+}
+
+
+.swiper {
+    height: 385.59px;
+    width: 80%;
+    padding-left: 50px;
+    padding-right: 50px;
+    top:680px;
+  }
+
+  .swiper-button-prev{
+    /* --swiper-theme-color: #ffffff; */
+    background: url(movie_img/arr_lf_19_wht.png) no-repeat 50% 50%;
+  }
+  .swiper-button-next{
+    /* --swiper-theme-color: #ffffff; */
+    background: url(movie_img/arr_rg_19_wht.png) no-repeat 50% 50%;
+  }
+  .swiper-button-next::after,
+  .swiper-button-prev::after{
+    display: none;
+  }
+
+
+.swiper-slide {
+    text-align: center;
+    font-size: 18px;
+    background: #000;
+
+/* Center slide text vertically */
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+    }
+
+.swiper-slide img {
+    margin-bottom: 60px;
+    display: inline;
+    width: 100%;
+    height: 262.85px;
+    object-fit: cover;
+    position: absolute;
+    border-radius: 4px;
+    }
+
+.mv-text {
+    margin-top: 40px;
+    margin-bottom: 10px;
+    display: inline-block;
+    position: relative;
+    top: 120px;
+    font-size: 11px;
+    font-weight: bold;
+  }
+  .mv-text>strong{
+    font-size: 13px;
+    margin-top:6px;
+  }
+
+  .mv-text>.star{
+    background-image: url(movie_img/ic_star.png) no-repeat;
+    cursor: pointer;
+}
+.fs{
+    color: red;
+  }
+.darkness {
+    position:absolute;
+    top:0;
+    left:0;
+    width:inherit;
+    height:300px;
+    background: rgba(0, 0, 0 , 0.8);
+    opacity:0;
+    transition:all .1s linear;
+  }
+
+  .swiper-slide:hover .darkness{
+    opacity: 1; 
+  }
+  .swiper-slide:hover .btn-plus{
+    opacity: 1;
+  }
+  .btn-plus {
+    margin-bottom: 50px;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    position:absolute;
+    background:transparent;
+    text-align:center;
+    cursor: pointer;
+    opacity: 0;
+  }
+
+  .btn-plus a {
+    font-size: 14px;
+    text-align: center;
+    vertical-align: middle;
+    color:#ffffff;
+    user-select:none;
+    border: 1px solid #fff;
+    border-radius: 4px;
+    width:100px;
+    height:30px;
+    line-height: 30px;
+
+  }
+  .btn-plus a:last-child {
+    margin-top: 5px;
+  }
diff --git a/A.실습/A.실습/메인2.html b/A.실습/A.실습/메인2.html
@@ -0,0 +1,197 @@
+<title><html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>메인2</title>
+
+        <!-- Link Swiper's CSS -->
+        <link
+        rel="stylesheet"
+        href="https://unpkg.com/swiper/swiper-bundle.min.css"
+  />
+        <!-- Demo styles -->
+        <link rel="stylesheet" href="메인2.css">
+
+</head>
+<body>
+
+    <!-- Swiper -->
+    <div class="swiper mySwiper">
+        <div class="tmie">
+            <p class="time-t"><i class="icon_clock">백그라운드</i>07.21 15:00 기준</p>
+        </div>
+
+        <div class="swiper-wrapper">
+          <div class="swiper-slide xx">
+            <img src="movie_img/미니언즈.jpg" alt="미니언즈">
+            <span><p class="mv-text">
+                <strong>미니언즈2</strong>
+                <br><span>예매율 31.8% |&nbsp;<i class="icon_star">&nbsp;&nbsp;&nbsp;9</i>  |&nbsp;</span>
+                <span id="icon-heart">&nbsp;&nbsp;&nbsp;</span>
+            </p></span>
+            <div class="darkness"></div>
+            <div class="btn-plus">
+                <a draggable="false">예매하기</a>
+                <a draggable="false">상세정보</a>
+
+            </div>
+          </div>
+
+          <div class="swiper-slide xx">
+            <img src="movie_img/외계인.jpg" alt="외계인">
+            <span><p class="mv-text">
+                <strong>외+계인 1부</strong>
+                <br><span>예매율 24.6% |&nbsp;<i class="icon_star">&nbsp;&nbsp;&nbsp;8.4</i>  |</span>
+                <span id="icon-heart">&nbsp;&nbsp;&nbsp;</span>
+            </p></span>
+            <div class="darkness"></div>
+            <div class="btn-plus">
+                <a draggable="false">예매하기</a>
+                <a draggable="false">상세정보</a>
+            </div>
+          </div>
+
+          <div class="swiper-slide xx">
+            <img src="movie_img/탑건.jpg" alt="탑건">
+            <span><p class="mv-text">
+                <strong>탑건:매버릭</strong>
+                <br><span>예매율 17.7% |&nbsp;<i class="icon_star">&nbsp;&nbsp;&nbsp;9.8</i>  |</span>
+                <span id="icon-heart">&nbsp;&nbsp;&nbsp;</span>
+            </p></span>
+            <div class="darkness"></div>
+            <div class="btn-plus">
+                <a draggable="false">예매하기</a>
+                <a draggable="false">상세정보</a>
+            </div>
+          </div>
+
+          <div class="swiper-slide xx">
+            <img src="movie_img/한산.jpg" alt="한산">
+            <span><p class="mv-text">
+                <strong>한산:용의 출현</strong>
+                <br><span>예매율 12.4% | <span class="fs">D-6</span>  |</span>
+                <span id="icon-heart">&nbsp;&nbsp;&nbsp;</span>
+            </p></span>
+            <div class="darkness"></div>
+            <div class="btn-plus">
+                <a draggable="false">예매하기</a>
+                <a draggable="false">상세정보</a>
+            </div>
+          </div>
+
+          <div class="swiper-slide xx">
+            <img src="movie_img/헤어질결심.jpg" alt="헤어질결심">            <span><p class="mv-text">
+                <strong>헤어질 결심</strong>
+                <br><span>예매율 3.9% |&nbsp;<i class="icon_star">&nbsp;&nbsp;&nbsp;9.1</i> |</span>
+                <span id="icon-heart">&nbsp;&nbsp;&nbsp;</span>
+            </p></span>
+            <p class="mv-text"><strong></strong></p>
+            <div class="darkness"></div>
+            <div class="btn-plus">
+                <a draggable="false">예매하기</a>
+                <a draggable="false">상세정보</a>
+            </div>
+          </div>
+
+          <div class="swiper-slide xx">
+            <img src="movie_img/비상선언.jpg" alt="비상선언">
+            <p class="mv-text">
+                <strong>비상선언</strong>
+                <br><span>예매율 2.1% | <span class="fs">D-13</span>  |</span>
+                <span id="icon-heart">&nbsp;&nbsp;&nbsp;</span>
+            </p></span>
+            <div class="darkness"></div>
+            <div class="btn-plus">
+                <a draggable="false">예매하기</a>
+                <a draggable="false">상세정보</a>
+            </div>
+          </div>
+
+          <div class="swiper-slide xx">
+            <img src="movie_img/토르.jpg" alt="토르">
+            <span><p class="mv-text">
+                <strong>토르:러브 앤 썬더</strong>
+                <br><span>예매율 2.0% |&nbsp;<i class="icon_star">&nbsp;&nbsp;&nbsp;7.9</i>  |</span>
+                <span id="icon-heart">&nbsp;&nbsp;&nbsp;</span>
+            </p></span>
+            <p class="mv-text"><strong></strong></p>
+            <div class="darkness"></div>
+            <div class="btn-plus">
+                <a draggable="false">예매하기</a>
+                <a draggable="false">상세정보</a>
+            </div>
+          </div>
+
+          <div class="swiper-slide xx">
+            <img src="movie_img/코난.jpg" alt="코난">
+            <span><p class="mv-text">
+                <strong>명탐정 코난:할로윈의 신부</strong>
+                <br><span>예매율 31.8% |&nbsp;<i class="icon_star">&nbsp;&nbsp;&nbsp;9</i>  |</span>
+                <span id="icon-heart">&nbsp;&nbsp;&nbsp;</span>
+                </p></span>
+            <p class="mv-text"><strong></strong></p>
+            <div class="darkness"></div>
+            <div class="btn-plus">
+                <a draggable="false">예매하기</a>
+                <a draggable="false">상세정보</a>
+            </div>
+          </div>
+
+          <div class="swiper-slide xx">
+            <img src="movie_img/멘.jpg" alt="멘">
+            <p class="mv-text"><strong>멘</strong>
+                <br><span>예매율 1.3% |&nbsp;<i class="icon_star">&nbsp;&nbsp;&nbsp;7.2</i>  |</span>
+                <span id="icon-heart">&nbsp;&nbsp;&nbsp;</span>
+            </p></span>
+            <div class="darkness"></div>
+            <div class="btn-plus">
+                <a draggable="false">예매하기</a>
+                <a draggable="false">상세정보</a>
+            </div>
+          </div>
+
+          <div class="swiper-slide xx">
+            <img src="movie_img/썸머필름을타고.jpg" alt="썸머">
+            <p class="mv-text"><strong>썸머 필름을 타고!</strong>
+                <br><span>예매율 0.6% |&nbsp;<i class="icon_star">&nbsp;&nbsp;&nbsp;8.6</i>  |</span>
+                <span id="icon-heart">&nbsp;&nbsp;&nbsp;</span>
+            </p></span>
+            <div class="darkness"></div>
+            <div class="btn-plus">
+                <a draggable="false">예매하기</a>
+                <a draggable="false">상세정보</a>
+            </div>
+          </div>
+        </div>
+        <div class="swiper-pagination "></div>
+        <div class="swiper-button-next"></div>
+        <div class="swiper-button-prev" ></div>  
+    </div>
+
+
+    <!-- Swiper JS -->
+    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+
+    <script>
+        var swiper = new Swiper(".mySwiper", {
+          // Optional parameters
+          direction: 'horizontal', /* 수직, 수평 */
+          loop: true, /* 무한루프 */
+          slidesPerView: 5,
+          spaceBetween: 50,
+          pagination: {
+            el: ".swiper-pagination",
+            clickable: true,
+            type: 'none',
+          },
+          // Navigation arrows
+          navigation: {
+                nextEl: '.swiper-button-next',
+                prevEl: '.swiper-button-prev',
+            },
+        });
+
+    </script>
+</body>
+</html></title>