728x90
728x90
가변 그리드 레이아웃
- 화면 크기에 따라 요소의 크기가 자동으로 변하도록 함
· 전체를 감싸는 요소의 너비를 %로 변환
· 전체를 감싸는 요소의 너비를 기준으로 각 요소의 너비 계산
→ 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% ; }
320x100
반응형
'HTML & CSS' 카테고리의 다른 글
[CSS] 플렉스 박스 레이아웃 (0) | 2023.02.12 |
---|---|
[CSS] 미디어 쿼리 (0) | 2023.02.12 |
[CSS] 애니메이션 스타일 (animation) (0) | 2023.02.12 |
[CSS] 트랜지션 스타일 (transition) (0) | 2023.02.12 |
[CSS] 변형 스타일 (transform) (0) | 2023.02.12 |