커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
가로가운데 정렬
undefined주차
북마크
이*오
댓글
6
・
추천
1
・
조회수
31
조회수
31
답변 완료
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Swiper demo</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>
    <!-- Link Swiper's CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
    />
     <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

    <!-- Demo styles -->
    <style>
        .mytitle {
            width: 100%;
            height: 250px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://i.esdrop.com/d/f/GYVxSLda8V/FHdpGMcfQ7.jpg');
            background-position: center;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .mytitle > button {
            width: 200px;
            height: 50px;

            background-color: transparent;
            color: white;

            border-radius: 50px;
            border: 1px solid white;

            margin-top: 10px;
        }
         .mytitle > button:hover {
            border: 2px solid white;
        }


        /*css*/




      .mypost{
        max-width:500px;
        width: 95%;
        margin: 30px auto 0px auto;
        box-shadow: 0px 0px 3px 0px gray;
          box-shadow:3px 0px 20px lightcyan;
         opacity: .8;
          display: none;
      }
      .mybtns{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        margin-top: 10px;
      }
      .mybtn > button{
        margin-right: 10px;
      }
        h1{
        color:white;
       display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }

        @font-face {
            font-family: 'Cafe24Oneprettynight';
            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Oneprettynight.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }


        .row{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        p {
            color: #aaa;
            margin-bottom: 10px;
        }

        p:hover {
            color: #fff
        }

        span {
            position: relative;
            font-weight: bold;
            color: #fff;
        }

        span::after {
            content: '';
            display: block;
            width: 0;
            height: 5px;
            position: absolute;
            left: 0;
            bottom: 0px;
            background: rgba(200, 125, 220, .6);
        }

        p:hover span::after {
            width: 100%;
            transition: width .3s;
        }

      .media-1 {
         position: relative;
         display: block;
         overflow: hidden;
         margin-bottom: 30px;
      }

      .media-1:after {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: rgba(0, 0, 0, 0.8);
         content: "";
         -webkit-transition: .3s all ease;
         -o-transition: .3s all ease;
         transition: .3s all ease;
         opacity: 0;
         visibility: hidden;
      }

      .media-1 img {
         -o-object-fit: cover;
         object-fit: cover;
         -webkit-transition: .3s all ease;
         -o-transition: .3s all ease;
         transition: .3s all ease;
      }

      .media-1 .media-1-content {
         z-index: 4;
         top: 50%;
         position: absolute;
         width: 100%;
         text-align: center;
         -webkit-transform: translateY(-50%);
         -ms-transform: translateY(-50%);
         transform: translateY(-50%);
      }

      .media-1 .media-1-content h2, .media-1 .media-1-content .h2 {
         position: relative;
         color: #fff;
         font-size: 1.5rem;
         -webkit-transition: .4s all ease-in-out;
         -o-transition: .4s all ease-in-out;
         transition: .4s all ease-in-out;
         opacity: 0;
         visibility: hidden;
         bottom: -10px;
         margin-bottom: 0px;
      }

      .media-1 .media-1-content .category {
         position: relative;
         -webkit-transition: .3s all ease-in-out;
         -o-transition: .3s all ease-in-out;
         transition: .3s all ease-in-out;
         opacity: 0;
         bottom: -10px;
         visibility: hidden;
         color: #999999;
         font-size: 13px;
         text-transform: uppercase;
         letter-spacing: .2em;
      }

      .media-1:hover:after {
         opacity: 1;
         visibility: visible;
      }

      .media-1:hover h2, .media-1:hover .h2 {
         bottom: 0px;
         opacity: 1;
         visibility: visible;
      }

      .media-1:hover .category {
         opacity: 1;
         visibility: visible;
         bottom: 0px;
         -webkit-transition-delay: 0.09s;
         -o-transition-delay: 0.09s;
         transition-delay: 0.09s;
      }

      .media-1:hover img {
         -webkit-transform: scale(1.05);
         -ms-transform: scale(1.05);
         transform: scale(1.05);
      }
    </style>
  </head>

  <body>
    <div class="mytitle">
    <button onclick="open_box()">영화 기록하기</button>
    </div>


    <div class="mypost" id="post-box">
    <div class="form-floating mb-3">
        <input id="url" type="email" class="form-control" placeholder="name@example.com">
        <label>영화URL</label>
    </div>
    <div class="input-group mb-3">
        <label class="input-group-text" for="inputGroupSelect01">별점</label>
        <select class="form-select" id="star">
            <option selected>-- 선택하기 --</option>
            <option value="1">⭐</option>
            <option value="2">⭐⭐</option>
            <option value="3">⭐⭐⭐</option>
            <option value="4">⭐⭐⭐⭐</option>
            <option value="5">⭐⭐⭐⭐⭐</option>
        </select>
    </div>
    <div class="form-floating">
        <textarea id="comment" class="form-control" placeholder="Leave a comment here"></textarea>
        <label for="floatingTextarea2">코멘트</label>
    </div>
    <div class="mybtns">
        <button onclick="posting()" type="button" class="btn btn-dark">기록하기</button>
       <button onclick="close_box()"type="button" class="btn btn-outline-light">닫기</button>
    </div>
</div>

   <div class="row">
      <div class="container-fluid">
         <div class="row">
            <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
               <a href="../images/img_v_1-min.jpg" class="media-1 glightbox">
                  <img src="../images/img_v_1-min.jpg" alt="Image" class="img-fluid">
                  <div class="media-1-content">
                     <h2>Bonzai Tree</h2>
                     <span class="category">Web Application</span>
                  </div>
               </a>
            </div>


         </div>
      </div>
      <div class="container-fluid">
         <div class="row">
            <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
               <a href="../images/img_v_1-min.jpg" class="media-1 glightbox">
                  <img src="../images/img_v_1-min.jpg" alt="Image" class="img-fluid">
                  <div class="media-1-content">
                     <h2>Bonzai Tree</h2>
                     <span class="category">Web Application</span>
                  </div>
               </a>
            </div>


         </div>
      </div>
      <div class="container-fluid">
         <div class="row">
            <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
               <a href="../images/img_v_1-min.jpg" class="media-1 glightbox">
                  <img src="../images/img_v_1-min.jpg" alt="Image" class="img-fluid">
                  <div class="media-1-content">
                     <h2>Bonzai Tree</h2>
                     <span class="category">Web Application</span>
                  </div>
               </a>
            </div>


         </div>
      </div>
        <div class="container-fluid">
         <div class="row">
            <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
               <a href="../images/img_v_1-min.jpg" class="media-1 glightbox">
                  <img src="../images/img_v_1-min.jpg" alt="Image" class="img-fluid">
                  <div class="media-1-content">
                     <h2>Bonzai Tree</h2>
                     <span class="category">Web Application</span>
                  </div>
               </a>
            </div>


         </div>
      </div>
        <div class="container-fluid">
         <div class="row">
            <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
               <a href="../images/img_v_1-min.jpg" class="media-1 glightbox">
                  <img src="../images/img_v_1-min.jpg" alt="Image" class="img-fluid">
                  <div class="media-1-content">
                     <h2>Bonzai Tree</h2>
                     <span class="category">Web Application</span>
                  </div>
               </a>
            </div>


         </div>
      </div>
        <div class="container-fluid">
         <div class="row">
            <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
               <a href="../images/img_v_1-min.jpg" class="media-1 glightbox">
                  <img src="../images/img_v_1-min.jpg" alt="Image" class="img-fluid">
                  <div class="media-1-content">
                     <h2>Bonzai Tree</h2>
                     <span class="category">Web Application</span>
                  </div>
               </a>
            </div>


         </div>
      </div>

   </div>
이미지가 가로가운데로정렬이안되네요 ㅜ  방법이있을까요??
취소
 공유
취소
댓글 0
댓글 알림
나의얼굴