Main Page
BOX 표시
1. HTML 코드
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel=stylesheet href="style.css">
<script src="https://kit.fontawesome.com/995f5ecdc8.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Silkscreen&display=swap" rel="stylesheet">
<title>nav_bar</title>
</head>
<body>
<!-- Header, nav 박스 시작 -->
<div class="nav_bar">
<!-- logo 박스 시작 -->
<div class="nav_bar__logo">
<a href=""><i class="fa-solid fa-snowman"></i>Snowulf</a>
</div>
<!-- menu 박스 시작 -->
<ul class="nav_bar__menu">
<li><a href="">Home</li>
<li><a href="">Gallery</li>
<li><a href="">Reservation</li>
<li><a href="">Around</li>
<li><a href="">FAQ</li>
</ul>
<!-- icon 박스 시작 -->
<ul class="nav_bar__icon">
<li><i class="fa-solid fa-comment"></i></li>
<li><i class="fa-solid fa-square-phone-flip"></i></li>
</ul>
</div>
<!-- 메인이미지 박스 시작 -->
<div class = "main_image">
<img src= "main.jpg">
<h2 class = "main_image_text">winter season</h2>
</div>
<div class = "main_image_menu">
<a href="">READ MORE</a>
</div>
</body>
<!-- footer 박스 시작 -->
<footer>
<p>Author: Bk</p>
</footer>
</html>
2. CSS 코드
/* nav var 꽉채우기, 폰트 전체 적용 */
body{
margin:0;
font-family: 'Silkscreen';
}
/* a 전체 태그 밑줄 제거, 색상 적용 */
a{
text-decoration: none;
color:white;
}
/* nav bar 나란히, 빈 공간 적용, 중앙 정렬 등 적용 */
.nav_bar{
display: flex;
justify-content: space-between;
align-items: center;
background: gray;
padding: 10px;
}
.nav_bar__logo{
font-size: 20px;
}
/* 리스트 아이콘 제거, 나란히 */
.nav_bar__menu{
list-style: none;
display: flex;
padding:0;
}
.nav_bar__menu li{
font-size: 17px;
padding: 15px;
}
/* 메뉴 클릭 시 배경색 변경, 모서리 반지름 적용 */
.nav_bar__menu li:hover{
background-color: #ff7f00;
border-radius: 5px;
}
/* 리스트 아이콘 제거, 나란히 배치 */
.nav_bar__icon {
list-style: none;
display: flex;
padding:0;
}
.nav_bar__icon li{
font-size: 22px;
padding:10px;
}
/* 사진 꽉 차게 */
.main_image img{
position: relative;
width : 100%;
height: 100%;
}
/* 사진 위에 글 작성 */
.main_image_text{
position: absolute;
font-size: 30px;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
color:gray;
}
.main_image_menu a{
background-color: gray;
position: absolute;
font-size: 30px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
footer{
text-align: center;
}
/* 반응형 디자인 적용(업데이트 예정) */
@media(max-width:850px){
.nav_bar{
flex-direction: column;
}
.nav_bar__menu{
flex-direction: column;
align-items: center;
width: 100%;
}
.nav_bar__menu li{
width: 100%;
text-align: center;
}
}
댓글