์ ์ฌ์ง์ฒ๋ผ ๋ฐฐ๊ฒฝํ๋ฉด์ ๊ฐ๋์ฑ์ฐ๊ณ ํ๋ฆฌ๊ฒ ๋ง๋ค๊ณ ์ถ์ด์ ์๋ฃ๋ฅผ ์ฐพ์๋ณด์๋ค.
๋ค์ด๊ฐ๊ธฐ
CSS์ opacity๋ฅผ ์ด์ฉํ์ฌ HTML์ ์์๋ฅผ ํฌ๋ช ํ๊ฒ ๋ง๋๋ ๋ฐฉ๋ฒ๊ณผ
์์ ์์๋ ์ ์ธํ๊ณ ๋ฐฐ๊ฒฝํ๋ฉด๋ง ํฌ๋ช ํ๊ฒ ๋ง๋๋ ๋ฐฉ๋ฒ์ ์์๋ณธ๋ค.
๐ opacity
< HTML ์ฝ๋ >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IR.Write</title>
<link rel="stylesheet" href="style copy.css">
</head>
<style>
</style>
<body>
<div class="back_container">
<h1 class="head">IR.Write</h1>
</div>
</body>
</html>< CSS ์ฝ๋ >
html,body{
width: 100%;
height: 100%;
margin: 0;
}
body{
overflow: hidden;
}
.back_container{
width: 100%;
height: 100%;
background: url("./images/forest.png");
background-size: cover;
opacity: 0.5;
}
.head{
margin: 0;
text-align: center;
padding: 30px;
color: black;
}
โ opacity
0 ~ 1 ์ฌ์ด์ ๊ฐ์ ๊ฐ์ง๋ฉฐ, 1์ผ ๋๋ ๋ณํ๊ฐ ์๊ณ 0์ผ๋ก ๊ฐ์๋ก ํฌ๋ช ํด์ง๋ค.
์ ์ฌ์ง์ ํ์์์ ( h1 ) ์ ํ ์คํธ๋ฅผ ํฌํจํ๊ณ ์์ด์ ํ ์คํธ๊น์ง ๊ฐ์ด ํ๋ฆฟํด์ก๋ค.
์ด์ฒ๋ผ ํ์์์๋ฅผ ๊ฐ์ง ๋ฐฐ๊ฒฝํ๋ฉด์ ํ๋ฆฌ๊ฒ ํ ๋์๋ opacity ๋ก ์ธํด ์์์์๋ค๋ ๋ชจ๋ ํฌ๋ช ํด์ง๊ธฐ ๋๋ฌธ์ ๋ค๋ฅธ ๋ฐฉ๋ฒ์ ์ฌ์ฉํด์ผ ํ๋ค.
๐ค ๊ฐ์ ์์ ( ::after ) ์ฌ์ฉ
๋ฐฐ๊ฒฝํ๋ฉด๋ง ํฌ๋ช ํ๊ฒ ๋ง๋ค๊ธฐ ์ํด์๋ ๋ฐฐ๊ฒฝํ๋ฉด์ ๊ฐ์์์๋ฅผ ์์ฑํ์ฌ ์ฌ๊ธฐ์ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง์ ํฌ๋ช ๋๋ฅผ ์ง์ ํด์ฃผ๋ฉด ๋๋ค.
< HTML ์ฝ๋ >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IR.Write</title>
<link rel="stylesheet" href="style.css">
</head>
<style>
</style>
<body>
<div class="back_container">
<h1 class="head">IR.Write</h1>
</div>
</body>
</html>< CSS ์ฝ๋ >
html,body{
width: 100%;
height: 100%;
margin: 0;
}
body{
overflow: hidden;
}
.back_container{
width: 100vw;
height: 100vh;
position: relative;
z-index: 1;
}
.back_container::after{
margin: 0;
width: 100vw;
height: 100vh;
background: url("./images/forest.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: absolute;
content: "";
top: 0;
left: 0;
z-index: -1;
opacity: 0.8;
}
.head{
margin: 0;
text-align: center;
padding: 30px;
color: white;
}1. .back_container ํด๋์ค์์ opacity๋ฅผ ์ง์ฐ๊ณ background ์์ฑ์ ๊ฐ์์์๋ก ์ฎ๊ธด๋ค.
๊ฐ์์์์ ํฌ๊ธฐ๋ ์๋ณธ ( .back_container ) ๊ณผ ๋์ผํ๊ฒ ์ค์ ํ๊ณ
์ด ์์๋ ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง๋ก ์ฑ์์ง ๊ฒ์ด๋ฏ๋ก content ๋ ๋น ๋ฌธ์์ด ( " " ) ๋ก ์ค์ ํ๋ค.
2. ์๋ณธ๊ณผ ๊ฐ์์์์ position์ ์ค์ ํ๋ค.
๊ฐ์์์๊ฐ ์๋ณธ์ ์ ์ฒด๋ฅผ ์ฐจ์งํ๋๋ก position, top, left ์์ฑ์ ์ง์ ํด์ค๋ค.
3. z-index ์ค์ ์ผ๋ก ๊ฐ์์์๋ฅผ ์๋ณธ์ ๋ค๋ก ๋ฐ์ด์ค๋ค.
๊ฐ์์์๊ฐ ํ๋ฉด ์์ชฝ์ผ๋ก ๋ฐ๋ฆฌ๋ฉด์ ์๋ณธ๊ณผ ์๋ณธ์ ์์ ์์ ( h1 ) ์ด ํ๋ฉด์ ๋ํ๋ฌ๋ค.
( ๋ํ๋ฌ๋ค๋ผ๊ณ ํํํ์ง๋ง ์๋ณธ์ background ์์ฑ์ ์ง์ ๊ธฐ ๋๋ฌธ์ ์ฌ๊ธฐ์์ ์๋ณธ์ ๋์ ๋ณด์ด๋ ์์๊ฐ ์๋๋ค )
๐ div ์์๋ฅผ ์ ์ฒดํ๋ฉด์ผ๋ก ์ค์
๋๋ถ๋ถ ์ ์ฉ์๋๋ ๋ฌธ์
html์์ ์ต์์ div๋ฅผ ํ๋ฉด ์ ์ฒด๋ก ์ค์ ํ๋ ๋ฐฉ๋ฒ์ ์์๋ณธ๋ค.
๐ค 1. % ์ฌ์ฉ
width ์ height๋ฅผ 100%๋ก ์ค์ ํ๋ฉด ์ ์ฒดํ๋ฉด์ด ๋ ๊ฒ๋ง ๊ฐ์๋ณด์ด์ง๋ง?
๊ทธ๋ ์ง ์๋ค.
%๋ ๋ถ๋ชจ ์์ ๊ธธ์ด์ ๋ช %๋ฅผ ์ฐจ์งํ ๊ฒ์ธ์ง ๋ํ๋ด๊ธฐ ๋๋ฌธ์
๋จผ์ ๋ถ๋ชจ ์์์ ๊ธธ์ด๊ฐ ์ค์ ๋์ด ์์ด์ผ ํ๋ค.
์ฆ, ๋ค์๊ณผ ๊ฐ์ด ํด๋น ์์๋ง 100%๋ก ์ค์ ํด์๋ ์ ์ฒดํ๋ฉด์ด ๋์ง ์๋๋ค.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 100%;
height: 100%;
background: pink;
}
</style>
</head>
<body>
<div class="container">Hello</div>
</body>
</html>
//์ฝ๋ ์ถ์ฒ : https://codingbroker.tistory.com/56?category=799839
container์ ๋ถ๋ชจ ์์์ธ body์ html์ width, height ๋ฅผ ์ง์ ํด์ค์ผ ํ๋ค.
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
background: pink;
}
</style>
</head>
<body>
<div class="container">Hello</div>
</body>
</html>
//์ฝ๋ ์ถ์ฒ : https://codingbroker.tistory.com/56?category=799839๐ค 2. vw ์ฌ์ฉ ( viewport width, viewport height )
%๊ฐ ๋ถ๋ชจ ์์์ ๊ธธ์ด์ ๋ฐ๋ผ ๊ณ์ฐ๋๋ค๋ฉด vw, vh ๋ ๋ทฐํฌํธ์ ๊ธธ์ด์ ์ํฅ์ ๋ฐ๋๋ค.
๊ฐ๊ฐ ๋ทฐํฌํธ ๊ฐ๋ก๊ธธ์ด์ ๋ช%์ธ์ง์ ์ธ๋ก๊ธธ์ด์ ๋ช%์ธ์ง๋ฅผ ์ ์ด์ฃผ๋ฉด ๋๋ค.
โ ๋ทฐํฌํธ
ํด๋น ์นํ์ด์ง๋ฅผ ์คํํ๊ณ ์๋ ๊ธฐ๊ธฐ ( ๋ ธํธ๋ถ, ์ค๋งํธํฐ ๋ฑ )์ ํ๋ฉดํฌ๊ธฐ๋ฅผ ๋งํ๋ค.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 100vw;
height: 100vh;
background: pink;
}
</style>
</head>
<body>
<div class="container">Hello</div>
</body>
</html>
//์ฝ๋ ์ถ์ฒ : https://codingbroker.tistory.com/56?category=799839< ํ์ฉํ CSS ์ฝ๋ >
body{
overflow: hidden; //์คํฌ๋กค๋ฐ ์์ ๋ ๊ธฐ๋ฅ.
}
.back_container{
width: 100vw;
height: 100vh;
position: relative;
z-index: 1;
}
.back_container::after{
margin: 0;
width: 100vw;
height: 100vh;
background: url("./images/forest.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: absolute;
content: "";
top: 0;
left: 0;
z-index: -1;
opacity: 0.8;
}
.head{
margin: 0;
text-align: center;
padding: 30px;
color: white;
}
๋ถ๋ชจ ์์์ ์ค์ ์์ด๋ vw, vh ๋ง์ผ๋ก ํ๋ฉด ์ ์ฒด๋ฅผ ์ฐจ์งํ๋ค.
๐ค 3. ๋๋ถ๋ถ ์ ์ฉ ์๋๋ ๋ฌธ์
์ ์ฌ์ง์ ์์ธํ ๋ณด๋ฉด ํ๋ฉด ์ ์ฒด๋ฅผ ์ฐจ์งํ์ง ์๊ณ ๋๋ถ๋ถ์ ์ฌ๋ฐฑ์ด ์๋ค.
( ์๋ ์คํฌ๋กค๋ฐ๋ ์๊ธฐ์ง๋ง body ๋ด overflow : hidden ์ ํตํด ์๋ณด์ด๊ฒ ํ์๋ค. )
๋๋ถ๋ถ์ ์ฌ๋ฐฑ์ด ๋ณด์ด๋ ๊ฒ์ HTML ํ๊ทธ์ ๊ธฐ๋ณธ margin ๋๋ฌธ์ด๋ค.
HTML ํ๊ทธ์๋ ์ฐ๋ฆฌ๊ฐ ๋ฐ๋ก ์ค์ ํด์ฃผ์ง ์์๋ default๋ก ์ค์ ๋์ด ์๋ ๊ฐ๋ค์ด ์๋ค.
๊ทธ ์ค ๋ํ์ ์ธ ๊ฒ์ด margin์ด๋ค.
div ๋ฟ๋ง ์๋๋ผ h1, p ์๋ ๋ถ์ด์๋ค.
( ๊ทธ๋์ h1์ ๋ํ๋ด๋ .head ํด๋์ค์๋ margin : 0 ์ ์ฃผ์๋ค. )
HTML ์ด์ฐฝ๊ธฐ์ ๋ฌธ์์ ์์ ์ฝ๊ฒํ๊ธฐ ์ํด default ๊ฐ์ ์ ์ ํ๊ฒ ์ค์ ํ์ง๋ง ์คํ์ผ ๊ธฐ์ ์ด ํฅ์๋ ์์ฆ์๋ ๊ฑธ๋ฆฌ์ ๊ฑฐ๋ฆฐ๋ค๊ณ ํ๋ค.
( ์ง๊ธ ๊ฑธ๋ฆฌ์ ๊ฑฐ๋ฆผ.. )
body์ margin์ด ์ํ์ข์ฐ 8px์ฉ ๋ ๋ถ์ด๋ฒ๋ ธ๋ค.
< ํ์ฉํ CSS ์ฝ๋ >
body{
margin: 0;
}
/* body{
overflow: hidden;
} */
.back_container{
width: 100vw;
height: 100vh;
position: relative;
z-index: 1;
}
.back_container::after{
margin: 0;
width: 100vw;
height: 100vh;
background: url("./images/forest.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: absolute;
content: "";
top: 0;
left: 0;
z-index: -1;
opacity: 0.8;
}
.head{
margin: 0;
text-align: center;
padding: 30px;
color: white;
}์๋ body ์ margin :0์ผ๋ก ํด๋ ์คํฌ๋กค๋ฐ๊ฐ ์๊ธฐ๊ธธ๋ ๋ฐ๋ก ์์ ๋ ๊ธฐ๋ฅ ( overflow : hidden ) ์ ์ค์ ํ์๋๋ฐ
๋ค์ ์๋ฒ ์คํ์ํค๋ overflow ๊ธฐ๋ฅ์ด ์์ด๋ ์คํฌ๋กค๋ฐ๊ฐ ์์ด์ง๋ค.
๊ฒฐ๋ก
body์ margin :0 ์ ์ ์ฉํ๋ฉด ์ฌ๋ฐฑ์ด ์ฌ๋ผ์ง๊ณ , ์คํฌ๋กค๋ฐ๋ ์ฌ๋ผ์ง๋ค.
๋ค ๋ง๋ค๊ณ ๋ด๊ฐ ๊ตฌ์ํ ํผ๊ทธ๋ง ์ค์ ๊ฐ์ ๋ณด๋ ๋๋ ๋ฐฐ๊ฒฝํ๋ฉด์ ํฌ๋ช ๋๋ก ์ค์ ํ ๊ฒ์ด ์๋๋ผ ๋ธ๋ฌ๋ก ์ค์ ํ์๋ค.
๐ filter ์์ฑ : blur
filter ์์ฑ์ ์ด์ฉํ์ฌ blur ๋ฅผ ์ถ๊ฐ์ํค๋ฉด ๋ธ๋ฌ๋๋ ์ ๋๋ฅผ ์ ์ฉํ ์ ์๋ค.
img {
filter: blur(radius);
}radius์ ๊ฐ์ ์๊ณก๋๋ ์ ๊ณ , blur ์ ๋๋ฅผ ๋งํ๋ค.
๊ฐ์ด ์ปค์ง์๋ก ํ๋ฆฟํ๊ฒ ๋ณด์ธ๋ค.
< HTML ์ฝ๋ >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IR.Write</title>
<link rel="stylesheet" href="style.css">
</head>
<style>
</style>
<body>
<div class="back_container">
<h1 class="head">IR.Write</h1>
</div>
</body>
</html>< CSS ์ฝ๋ >
html,body{
margin: 0;
}
.back_container{
width: 100vw;
height: 100vh;
position: relative;
z-index: 1;
}
.back_container::after{
margin: 0;
width: 100vw;
height: 100vh;
background: url("./images/forest.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: absolute;
content: "";
top: 0;
left: 0;
z-index: -1;
filter: blur(5px);
}
.head{
margin: 0;
text-align: center;
padding: 30px;
color: white;
}
์ํ๋ ๋๋ก ๋์๋ค.
- opacity ๋ก ์์, ๋ฐฐ๊ฒฝํ๋ฉด์ ํฌ๋ช ํ๊ฒ ( ํ๋ฆฌ๊ฒ ) ํ๋ ๋ฐฉ๋ฒ ์ค๋ช
https://codingbroker.tistory.com/58?category=799839
[HTML, CSS] opacity๋ก ์์, ๋ฐฐ๊ฒฝํ๋ฉด ํฌ๋ช ํ๊ฒ(ํ๋ฆฌ๊ฒ)ํ๋ ๋ฐฉ๋ฒ, ์์ ์์์ ๊ฐ์ด ์ ์ฉ๋๋ ๋ฌธ์
CSS์ opacity๋ฅผ ์ด์ฉํ์ฌ HTML์ ์์๋ฅผ ํฌ๋ช ํ๊ฒ ๋ง๋๋ ๋ฐฉ๋ฒ๊ณผ ์์ ์์๋ ์ ์ธํ๊ณ ๋ฐฐ๊ฒฝํ๋ฉด๋ง ํฌ๋ช ํ๊ฒ ๋ง๋๋ ๋ฐฉ๋ฒ์ ๋ํด์ ์ดํด๋ณด๊ฒ ์ต๋๋ค. div์ ๊ทธ ์์ ์์ h1์ด ์์ต๋๋ค. <!DOCTYPE html> H
codingbroker.tistory.com
- div ์์๋ฅผ ์ ์ฒดํ๋ฉด์ผ๋ก ์ค์ ํ๋ ๋ฐฉ๋ฒ ์ค๋ช
https://codingbroker.tistory.com/56?category=799839
[HTML, CSS] div ์์๋ฅผ ์ ์ฒดํ๋ฉด์ผ๋ก ์ค์ ํ๊ธฐ, ๋๋ถ๋ถ ์ ์ฉ์๋๋ ๋ฌธ์ , css reset
HTML์์ ์ต์์ div๋ฅผ ํ๋ฉด ์ ์ฒด๋ก ์ค์ ํ๋ ๋ฐฉ๋ฒ์ ๋๋ค. 1. % ์ฌ์ฉ width์ height๋ฅผ 100%๋ก ์ค์ ํ๋ฉด ์ ์ฒดํ๋ฉด์ด ๋ ๊ฒ๋ง ๊ฐ์ต๋๋ค๋ง ๊ทธ๋ ์ง ์์ต๋๋ค. %๋ ๋ถ๋ชจ ์์ ๊ธธ์ด์ ๋ช%๋ฅผ ์ฐจ์งํ ๊ฒ์ธ์ง ๋
codingbroker.tistory.com
- filter ํ๋กํผํฐ๋ฅผ ์ฌ์ฉํ์ฌ blur ํจ๊ณผ ์ฃผ๋ ๋ฐฉ๋ฒ ์ค๋ช
CSS filter ํ๋กํผํฐ ์ฌ์ฉํ์ฌ ๋ธ๋ฌ ํจ๊ณผ ์ ์ฉํ๊ธฐ, blur
CSS์ filter ํ๋กํผํฐ๋ฅผ ์ฌ์ฉํ์ฌ ๋ธ๋ฌ ํจ๊ณผ(Blur effect)๋ฅผ ์ ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ํ์ฌ ์์๋ด ๋๋ค.
webisfree.com
