🐾 width
max-width와 min-width 속성은 요소의 최대 및 최소 가로 크기를 제한하는 데 사용됩니다. 비슷하게, max-height와 min-height 속성은 요소의 최대 및 최소 세로 크기를 제한합니다.
이러한 속성들은 반응형 디자인 및 미디어 쿼리와 함께 사용하여 다양한 디바이스 및 화면 크기에 맞추어 웹 페이지를 조절하는 데 도움이 됩니다. 이들을 통해 유연하고 사용자 친화적인 디자인을 구현할 수 있습니다.
max-width요소의 최대 가로 너비를 지정
min-width요소의 최소 가로 너비를 지정
max-height요소의 최대 세로 너비를 지정
min-height요소의 최소 세로 너비를 지정
<style>
/* 이미지의 최대 가로 크기 제한 */
.image {
max-width: 100%; /* 부모 요소에 맞춰 최대 가로 크기 설정 */
max-height: 400px; /* 최대 세로 크기 제한 */
min-width: 200px; /* 최소 가로 크기 제한 */
min-height: 100px; /* 최소 세로 크기 제한 */
}
</style>
<body>
<img class="image" src="https://hips.hearstapps.com/hmg-prod/images/popular-puppy-questions-1639736471.jpg" alt="Cute Puppy">
</body>이 코드를 실행하면 이미지가 부모 요소에 맞춰 최대 가로 크기로 표시되며, 세로 및 가로 크기가 주어진 최소 및 최대 값으로 제한됩니다.
나를위한 노트필기 📒🔎📝