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


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

가변 그리드 레이아웃 - 화면 크기에 따라 요소의 크기가 자동으로 변하도록 함 · 전체를 감싸는 요소의 너비를 %로 변환 · 전체를 감싸는 요소의 너비를 기준으로 각 요소의 너비 계산 → width : ( 요소의 너비 / 전체 요소 너비 ) * 100 가변 이미지 # 부모 요소만큼만 크기가 변하도록 하기 선택자 { max-width : 100% } # 너비에 따라 다른 이미지 출력하기 - 최소 너비 미만이 되면 다른 이미지로 전환됨 ... 가변 비디오 /* 최대 너비는 원본과 같게, 브라우저 창을 작게 하면 고정 비율로 줄어듦 */ 비디오선택자 { max-width : 100% ; } /* 너비를 화면에 꽉 차게 */ 비디오선택자 { min-width : 100% ; } /* 높이를 화면에 꽉 차게 */..


원문링크 : [CSS] 가변 그리드 레이아웃