<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ํํฐ</title>
</head>
<style>
div{
/*
blur(x): ํ๋ฆฌ๊ฒํจ, x๋ ๊ธธ์ด. ์์์๋ก ๋ ํ๋ ค์ง๋ค
brightness(x): x๋ ๋น์จ. 100%๋ฅผ ๊ธฐ์ค์ผ๋ก ์ด๋ก๊ฒ ํน์ ๋ฐ๊ฒ
contrast(x): x๋ ๋น์จ. 100%๋ฅผ ๊ธฐ์ค์ผ๋ก ๋๋น ์กฐ์ (์ ์งํ๊ธฐ ์ ๋)
grayscale(x): x๋ ๋น์จ. 0~100%๊น์ง ํ์กฐ์ฌ์ง์ผ๋ก ๋ง๋ ๋ค
invert(x): x๋ ๋น์จ. ์ด๋ฏธ์ง์ ์์ ๋ฐ์
*/
/* (์ฃผ์)ํฌ๋ช
๋๋ ํํฐ ๋ฑ์ ๋ด๋ถ ์์๋ค๋ ์ ์ฉ ๋ค๋จ */
filter: blur(3px);
opacity: 0.7; /* ํฌ๋ช
๋ ์กฐ์ . 0~1๊น์ง */
}
</style>
<body>
<div>
์๋
ํ์ธ์
<img src="cat.jpg" alt="#">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>๋ฐ์ํ์น</title>
</head>
<style>
body {
background-image: url("https://images.unsplash.com/photo-1710390916960-3047fcdf561e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* ๊ฐ๋ก ๊ฐ์ด 1800px ์ดํ๋ผ๋ฉด ์ด๊ฑฐ ์ ์ฉํ์ธ์ */
@media screen and (max-width: 1800px) {
body {
background-image: url("https://images.unsplash.com/photo-1707147231430-7870dda96138?q=80&w=1171&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
}
}
/* ๊ฐ๋ก ๊ฐ์ด 1200px ์ดํ๋ผ๋ฉด ์ด๊ฑฐ ์ ์ฉํ์ธ์ */
@media screen and (max-width: 1200px) {
body {
background-image: url("https://images.unsplash.com/photo-1710610383283-37ecdf156c60?q=80&w=869&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
}
}
</style>
<body>
</body>
</html>
