이미지 요소에도...
상대단위 em, vw, % 등을 얼마든지 사용할 수 있다.
이때 주의 해야할 점은 브라우저가 대개 이미지의 비율을 유지한다는 점,
그리고 이미지가 무작정 커지는 것을 경계해야 한다는 점이다.
max-width
CSS의 max-width 속성은 너비의 최대값을 지정하여
요소의 너비가 그 이상 커지지 않게 한다.
*width와 max-width의 차이
- width: 너비 지정
- max-width: 제한 길이 지정 (이보다 커질 수 없다~)
picture
HTML의 picture 요소를 이용하면 뷰포트의 너비 등
브라우저의 특정 조건에 따라 이미지를 반응형으로 불러올 수 있다.
주로, 해상도 별로 이미지의 비율을 바꾸고 싶을 때 사용!
<picture>
// source: 이미지를 미디어 조건에 맞게 선택적으로 불러올 수 있는 요소
<source srcset="desktop.png" media="(min-width: 1200px)">
<source srcset="tablet.png" media="(min-width: 800px)">
<img src="mobile.png">
</picture>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가변 이미지</title>
<style>
div{
width: 50%;
}
img{
max-width: 100%;
}
</style>
</head>
<body>
<div>
<img src="./images.jpeg">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가변 이미지</title>
<style>
</style>
</head>
<body>
<picture>
<source srcset="./미모티콘2.png" media="(min-width: 800px)"> <!--조건 해당 경우 대체(변경)-->
<img src="./images.jpeg"> <!--기본-->
</picture>
</body>
</html>
'Web > HTML+CSS+JS' 카테고리의 다른 글
| 반응형 웹 기초: 가변 동영상 (0) | 2023.12.24 |
|---|---|
| 반응형 웹 기초: 미디어쿼리 (0) | 2023.12.24 |
| 반응형 웹 기초: CSS 함수 개념과 calc() (0) | 2023.12.24 |
| 반응형 웹 기초: 가변 레이아웃 (가변 그리드) (0) | 2023.12.24 |
| 반응형 웹 기초: 뷰포트 단위 vw vh vmin vmax (0) | 2023.12.24 |