카테고리 없음
홈페이지로 확인하는 CSS코드
Isaac01
2023. 7. 29. 18:08
반응형
홈페이지로 확인하는 CSS코드
html 코트
<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>DECIGN YOUT HOUSE</h2>
<p>Subscribe Easy Youtube Channel watch more videos,<br>press t he bell icon t</p>
<button>WATCH VIDEOS</button>
</div>
</div>
</body>
css코드
* {
margin:0;
padding:0;
list-style: none; /*list 기본 속석 ● 제거*/
text-decoration: none; /*a태그 밑줄제거*/
color:black;
}
.cantainer {
width: 100%;
height: 100vh;
}
.header {
width: 80%;
height: 100px;
display: flex;
margin: 0 auto;
align-items: center; /*header안에 있는 텍스트가 header높이 기준으로 정중앙에 온다*/
justify-content: space-between; /*header안에 있는 h1태그, div태그를 왼쪽 오른쪽 끝으로 보냄*/
border-radius: 20px;
border: 2px solid skyblue;
}
.nav ul li {
display: inline;
margin: 10px;
}
.nav ul li a:hover {
color:aquamarine;
}
.hero {
position: absolute; /*다음가 같이 설정하면 .hero안에 있는 텍스트는 정중앙으로 온다*/
left: 50%;
top: 50%;
transform:translate(-50%, -50%);
text-align: center;
}
.hero h2 {
font-size: 60px;
margin-bottom: 10px;
}
.hero p {
font-size: 22px;
margin-bottom: 20px;
}
.hero button {
border: 2px solid skyblue;
border-radius: 22px;
background: none;
padding: 20px;
cursor: pointer;
}
.hero button:hover { /*hover속성 마우스 이동시 나타나는 효과*/
background-color: aquamarine;
transition: all .4s;
}
// left, top의 기준으로만 움직인다. transform: translate(-50%, -50%)를 사용하면 페이지 정중앙에 텍스트가 온다.
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
// justify-content 속성은 브라우저가 콘텐츠 항목 사이와 주변 공간을 어떻게 정렬할 것인지를 정의한다.