<!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>Design House</title>
<link href="./css/style.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="header">
<h1><a href="#">DESIGN</a></h1>
<div class="nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">BEDROOM</a></li>
<li><a href="#">DINING</a></li>
<li><a href="#">KITCHEN</a></li>
<li><a href="#">BACKYARD</a></li>
</ul>
</div>
</div>
<div class="hero">
<h2>DESIGN YOUR HOUSE</h2>
<p>
Subscribe Easy Youtube Channel to watch more videos,<br />press
t he bell icon to get latest updates.
</p>
<button>WATCH VIDEOS</button>
</div>
</div>
</body>
</html>
@font-face {
font-family: abster;
src: url(../font/abster-webfont.woff) format("woff");
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
url(../images/room.jpg) no-repeat;
background-size: cover;
}
.container .header {
width: 80%;
height: 80px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.container .header h1 a {
text-decoration: none;
color: black;
font-family: abster;
z-index: 2;
}
.container .nav ul li {
display: inline-block;
margin: 0 10px;
z-index: 2;
}
.container .nav ul li a {
text-decoration: none;
color: #fff;
}
.container .nav ul li a:hover {
color: #1fdfdf;
}
.container .hero {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.container .hero h2 {
font-size: 60px;
margin-bottom: 20px;
}
.container .hero p {
font-size: 22px;
}
.container .hero button {
background: none;
border: 2px solid darkseagreen;
color: #fff;
padding: 15px 20px;
border-radius: 20px;
margin-top: 30px;
outline: none;
cursor: pointer;
transition: all 0.4s;
}
.container .hero button:hover {
background-color: darkslategray;
}
여기서 background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
url(../images/room.jpg) no-repeat;가 나오는데 이렇게 코드를 주면 이미지에 검은색으로 덮히는데 완전 검은색이 아니라 투명도있는 검은색이 덮힌다.
linear-gradient란?
- 선형 그래디언트(linear gradient)는 적용된 HTML 요소에 선형으로 그래디언트(gradient) 효과를 적용시켜 줍니다.
- 선형 그래디언트를 만들기 위해서는 최소한 두 개 이상의 색상 지정점이 필요합니다.
문법:
background: linear-gradient(진행방향, 색상지정점1, 색상지정점2, ...);색상 지정점에는 그래디언트 효과로 그 사이의 색상 표현을 부드럽게 전환해주고 싶은 색상을 명시합니다.
가장 먼저 정의된 색상 지정점이 시작점이 되며, 그 후로는 마지막 지정점까지 차례대로 그래디언트 효과가 적용됩니다.
발전하기 위한 공부