CSS min() 함수를 사용하여 웹 페이지에 반응형 로고를 만들 수 있습니다. CSS 속성에 최소값을 지정할 수 있습니다.
구문
CSS min() 속성의 구문은 다음과 같습니다 -
Selector {
attribute: min(/*value*/,/*value*/);
} 예시
다음 예는 CSS min() 속성을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
height: min(40vw, 384px);
margin: 3%;
}
</style>
</head>
<body>
<div>
<img src="https://images.unsplash.com/photo-1610672777263-9bab3d7947f0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=384&ixlib=rb-1.2.1&q=80&w=384" alt="bride-logo" />
<h3>Responsive LOGO!</h3>
<p>Donec consectetur, magna nec rhoncus sodales, erat dui suscipit est, sit amet aliquam justo metus eu est. Praesent eleifend sodales orci, vel ornare sapien porta id. Pellentesque ipsum sem, aliquam vitae venenatis quis, lobortis vitae est. Proin a semper lectus. Nam rhoncus ipsum quis nisl porta pretium. Fusce pharetra sem in tortor aliquet fermentum. Ut facilisis luctus ipsum eu mattis.</p>
<p>
Vivamus quis velit diam. Curabitur tempus diam nec enim tincidunt posuere. Nulla nec nunc in dui aliquam congue. Nulla commodo tincidunt iaculis. Nulla egestas odio et arcu elementum euismod.
</p>
</div>
</body>
</html> 이것은 다음과 같은 출력을 제공합니다.
예시
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 2%;
float: left;
box-shadow: inset 0 0 22px green;
}
img {
width: min(45vw, 512px);
margin: 3%;
}
</style>
</head>
<body>
<div>
<img src="https://images.unsplash.com/photo-1611589694870-377ee3903be0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=512&ixlib=rb-1.2.1&q=80&w=512" alt="home" />
</div>
<h3>Another Responsive LOGO!</h3>
<p>Donec consectetur, magna nec rhoncus sodales, erat dui suscipit est, sit amet aliquam justo metus eu est. Fusce pharetra sem in tortor aliquet fermentum. Ut facilisis luctus ipsum eu mattis.</p>
</body>
</html> 이것은 다음과 같은 출력을 제공합니다.
