[CSS] 가변 그리드 레이아웃

가변 그리드 레이아웃

  - 화면 크기에 따라 요소의 크기가 자동으로 변하도록 함

      · 전체를 감싸는 요소의 너비를 %로 변환

      · 전체를 감싸는 요소의 너비를 기준으로 각 요소의 너비 계산

          → width : ( 요소의 너비 / 전체 요소 너비 ) * 100

 

가변 이미지

#  부모 요소만큼만 크기가 변하도록 하기

선택자 { max-width : 100% }

#  너비에 따라 다른 이미지 출력하기

    - 최소 너비 미만이 되면 다른 이미지로 전환됨

 

<picture>
    <source srcset = "경로/이미지파일.jpg" media = "(min-width : 최소너비)">
    <source srcset = "경로/이미지파일.jpg" media = "(min-width : 최소너비)">
    ...
    <img src = "경로/이미지파일.jpg" style = "width:100%;">
</picture>

 

가변 비디오

/* 최대 너비는 원본과 같게, 브라우저 창을 작게 하면 고정 비율로 줄어듦 */
비디오선택자 { max-width : 100% ; }

/* 너비를 화면에 꽉 차게 */
비디오선택자 { min-width : 100% ; }

/* 높이를 화면에 꽉 차게 */
비디오선택자 { min-height : 100% ; }