[CSS] [jQuery] 화면스크롤에 따라 위치가 고정되는 스크립트

최초 position: relative;

이동 position: fixed;

/* Javascript */
jQuery(document).ready(function(){
    var wrap = jQuery(window);
    // 페이지로딩, 새로고침
    var sct = jQuery(this).scrollTop();
    console.log("scroll = " + sct);
    if(sct>140) {
        jQuery("#contents_left").addClass("fixed");
    } else {
        jQuery("#contents_left").removeClass("fixed");
    }
    // scroll 반응
    wrap.on("scroll", function(e){
        var sct = jQuery(this).scrollTop();
        console.log("scroll = " + sct);
        if(sct>140) {
            jQuery("#contents_left").addClass("fixed");
        } else {
            jQuery("#contents_left").removeClass("fixed");
        }
    });
});

/* CSS */
#contents_left.fixed { position:fixed; top:0px; }

[CSS] 이미지의 가로/세로 비율을 유지하기(반응형)

<!-- HTML -->
<div class="d-img">
    <div class="d-img-inner">
        <img />
    </div>
</div>

/* CSS */
.d-img { 
    position:relative; 
    width:100%/* 상위 엘리먼트에 의존하여 계산 */ ; 
    height:0; 
    padding-bottom:70% /* 가로크기에 비례함 */; 
}
.d-img-inner { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
}
.d-img-inner img { width:100%; height:100%; }

[CSS] 부모 Element보다 더 넓은 크기를 가진 자식 Element

배너 등을 표시하기 위해 부모 Element보다 넓은 자식 Element가 때로 필요하다.

<!-- HTML -->
<div id="parent">
    <div id="child"></div>
</div>

이때 사용할 수 있는 크기 단위가 바로 vw, vh

/* CSS */
#contents_left.fixed { position:fixed; top:0px; }

vw는 viewport 가로 100%를 기준으로 한다. 

100vw = 가로폭 전체.

[CSS] Youtube유튜브 영상(iframe)을 모바일기기에 맞게 출력하기(반응형)

<iframe> 태그의 바깥에 <div class="videowrapper"> 로 감싼다.

/* CSS */
.videowrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 비율인 경우 */
  /* 4:3 비율인 경우 75%로 설정합니다 */
  padding-top: 25px;
  height: 0;
}

.videowrapper > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}