반응형 / acro 코드 재분석 및 복습

 $(".ham").click(function(){
        $(".mgnb_wrap").animate({
           right: '0'
        });
    });
   
    $(".mgnb_close").click(function(){
        $(".mgnb_wrap").animate({
           right: '100%'
        });
    });
   

/*모바일 메뉴 애니메이션 효과로 나타내기 */

마치 왼쪽에 숨겨져있다가 나오는거처럼

= wrap자체를 구문작성전에 right 100%로 안보이게 처리한다고 생각하면 됨 

 

#header .mgnb_wrap { z-index:999999; position:fixed; right:100%; top:0; width:100%; height:100%; padding:100px 0; background:#000; }
#header .mgnb_wrap:before { content: ''; width: 1px; height: 100%; background: rgba(255,255,255,0.3); position: absolute; left: 10.416%; top: 0; }
#header .mgnb_wrap:after { content: ''; width: 1px; height: 100%; background: rgba(255,255,255,0.3); position: absolute; right: 10.416%; top: 0; } 양 옆 일정한 값은 퍼센트 !!#header .mgnb_logo { position: absolute; left: calc(10.416% + 55px); top: 50px; }
#header .mgnb { border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(255,255,255,0.3); padding: 50px 10.416%; }
#header .mgnb li { padding: 20px 50px; font-size: 5.0rem; }
#header .mgnb li a { color: #fff; }
#header .mgnb li span { display: inline-block; padding-left: 20px; font-size: 2.0rem; font-family: 'DM Serif Text'; opacity: 0.3; letter-spacing: 1px; }

/*나는 비포로 만들었는데 그냥 스팬으로 하고 글자크기랑 패딩 넣어 위치 잡으면 됨*/
#header .mgnb_close { font-size: 0; position:absolute; right: calc(10.416% + 55px); top:30px; width: 30px; height: 30px; cursor: pointer; }
#header .mgnb_close:before { content: ''; position:absolute; left: 0; top: 25px; background:#fff; width: 30px; height: 1px; transform: rotate(135deg); }
#header .mgnb_close:after { content: ''; position:absolute; left: 0; top: 25px; background:#fff; width: 30px; height: 1px; transform: rotate(-135deg); }/*x자 아이콘쓰지않고 비포애프터로 만들어줌*/

 

--------------------------------------------------------------------------------------------------------------------------

 

 

/*동영상과 이미지를 겹쳐서 버튼을 누르면 플레이/포즈 */

 <article id="main_visual">
            <div class="inner ani-start-fadeUp">
                <h2>The Only One</h2>
                <p>모두의 선망의 대상이자 시간이 흘러도 변하지 않는 랜드마크가 되는 곳<br>
                    ONE &amp; ONLY, ACRO 그 컬렉션의 가치를 소유하세요.</p>
                <div class="pr_movie">
                    <img src="images/img_visual.jpg" alt="ACRO 영상이미지">
                    <a href="#" class="btn_play"><img src="images/play.svg" alt="영상재생"></a>

                    <div class="movie_play">
                        <video src="images/acro_brand.mp4" muted autoplay controls></video>
                        <a href="#" class="movie_close">영상닫기</a>
                    </div>
                </div>
            </div>
        </article>

#main_visual .pr_movie { position: relative; }  /*큰 틀 하나 묶어서 relative줌 */
#main_visual .pr_movie .btn_play { display: inline-block; border: 1px solid #fff; border-radius: 50%;position: absolute; z-index: 9; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100px; height: 100px; }

#main_visual .movie_play { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; z-index: 99; } /*무비는 무비끼리 정하는데 큰 틀에 앱솔을 줘서 비디오가 이미지와 겹치도록 */
#main_visual .movie_play video { height: 100%; }
#main_visual .movie_play .movie_close { position: absolute; right: 0; top: 0; font-size: 0; width: 60px; height: 65px; background: url('../images/btn_close.jpg') no-repeat; }

------------------------------------------------------------------------------------------------------------------------

 

 

#brand { padding: 5.208% 0; border-bottom: 1px solid #ddd; text-align: center; position: relative; } /* padding: 60px; */
#brand:after { content: ''; width: 1px; background: #ddd; height: 100%; position: absolute; left: 50%; top: 0; }
#brand .inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
#brand .inner > div { width: calc((100% - 100px)/2); }
#brand .brand_list img { width: 100%; }

/*border-left가 아니라 애프터로 선 만들면 패딩 걱정 안해도됨 */

/*slick쓰면 거기 자체 div요소때문에 사이즈가 이상하게 된다 > 이걸로 내가 원하는 요소 지정을 잘 해야함*/

@media (max-width : 1200px) {
    #brand .inner { max-width: calc(100% - 20.833%); }
    #brand .inner > div { width: 100%; } /*줄내림*/
    #brand .brand_txt { margin-bottom: 50px; }
    #brand:after { display: none; }
}

 

 

#gallery { padding: 5.208% 0; border-bottom: 1px solid #ddd; text-align: center; } /* padding: 100px 0; */
#gallery .inner { max-width: calc(100% - 20.833%); }
#gallery .banner { overflow: hidden; position: relative; }
#gallery .banner img { transition: transform 1s; width: 100%; }
#gallery .banner:hover img { transform: scale(1.1,1.1); }
#gallery .banner h3 { position: absolute; left: 50%; top: 50%; color: #fff; transform: translate(-50%,-50%); font-family: 'DM Serif Text'; font-size: 5.0rem; }
/*갤러리 사진 호버하면 커지게 만들기*/



#footer { text-align: center; color: #999; padding: 5.208% 0; } /* padding: 100px 0; */
#footer .footer_link { display: flex; justify-content: center; }
#footer .footer_link li:after { content: ''; width: 1px; height: 10px; position: absolute; left: -15px; top: 5px; background: #ddd; }
#footer .footer_link li:nth-child(1):after { display: none; }
/*푸터 사이트맵에 가상요소 보더선 만들어주기 */