<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link rel="stylesheet" href="reset.css">
</head>
<style>
/* #container 요소의 높이를 뷰포트의 높이만큼 설정하기 위해 먼저 html 요소와 body 요소의
높이부터 설정해야 한다. */
/* body 요소의 높이의 100%는 부모 요소인 html의 컨텐츠 영역의 높이의 100%
html에 담고 있는 컨텐츠는 없기 때문에 body 요소에만 높이를 100%로 설정하면 높이가 제대로
설정되지 않는다. */
/* 이때 html 요소에 높이를 100%로 설정하면 html의 부모 요소는 없기 때문에 담고 있는 컨텐츠에
의해 높이가 결정된다. 이때 html의 컨텐츠 영역의 높이를 100%로 설정하면 높이가 뷰포트
전체를 차지한다. */
html, body { height: 100% ;} /* % 단위의 기준: 부모 요소 컨텐츠 영역의 크기 */
#container {
height: 100%;
/* 요소의 최소 너비를 설정
→ 뷰포트를 아무리 줄여도 너비가 700px 미만으로 줄어들지 않고 스크롤바가 생긴다. */
min-width: 700px;
}
#left-menu, #right-menu {
/* float 속성을 적용했는데도 가상 요소 선택자를 주지 않는 이유?
→ 부모 요소인 #container의 높이가 고정되어 있기 때문에
(float 속성을 설정했을때 발생하는 문제점을 해결하는 방법 중 첫 번째 방법) */
float: left;
width: 50%;
height: 100%;
}
#left-menu {
background: url("images/bg-chocolate.jpg") 50% 50% /cover no-repeat;
/* h1 요소가 이 요소의 영역을 기준으로 배치되도록 */
position: relative;
}
#left-menu > h1 {
/* #left-menu 요소를 기준으로 중앙에 배치 */
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
/* 크기 및 색상 설정 */
width: 250px;
height: 250px;
border-radius: 50%;
background-color: rgba(31, 17, 43, 0.9);
color: #e1bcb4;
font-size: 40px;
font-weight: 900;
letter-spacing: -1px;
line-height: 250px;
text-align: center;
}
#right-menu > li {
/* 0.001% 오차는 육안으로 보이지 않기 때문에 무시해도 되는 작은 값이다. */
height: 33.333%;
background-color: #1f112b;
/* 스크롤바가 생성되지 않게 하기 위해 */
box-sizing: border-box;
}
#right-menu > li:not(:last-child) {
/* border-bottom으로 인해 #left-menu와 높이를 똑같이 설정을 했어도 #left-menu의
높이보다 더 높게 설정되어 스크롤바가 생기게 된다. */
border-bottom: 1px solid #e1bcb4;
}
#right-menu > li > a {
/* 메뉴 바의 a 요소는 버튼 형태로 표시 */
display: block;
/* a 요소에 기본적으로 적용되는 스타일 속성 초기화 */
text-decoration: none;
color: #e1bcb4;
/* a 요소의 높이를 li 요소의 높이만큼 설정 */
height: 100%;
background-color: #1f112b;
font-size: 20px;
text-align: center;
transition: 0.4s;
/* line-height의 %의 기준: 적용하려는 요소의 font-size의 값
→ 그러므로 100%는 가변적인 값이기 때문에 높이의 100%가 아닌
font-size인 20px의 100%로 설정된다. */
/* line-height: 100%; */
/* span 요소가 이 요소를 기준으로 배치되도록 */
position: relative;
}
#right-menu > li > a:hover {
letter-spacing: 25px;
background-color: #0f0616;
/* hover되었을 때 letter-spacing 속성이 중심을 기준으로 변하지 않는 문제가 생긴다.
letter-spacing을 확인해보면 마지막 글자에도 25px만큼 여백이 생기기 때문이다.
→ 개발자도구의 오른쪽 마우스 → forse state → :hover를 클릭하면 확인 가능하다.
이를 해결할 수 있는 방법은 총 2가지가 있다. */
/* 방법 (1): 25px만큼 들여쓰기 */
text-indent: 25px;
}
/* line-height 속성을 주지 않고 글자를 Y축을 기준으로 중앙에 배치하는 방법 */
#right-menu > li > a > span {
/* a 요소의 영역을 기준으로 중앙에 배치 */
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
/* 방법 (2): 25px만큼 안쪽 여백을 주는 방법 */
/* padding-left: 25px; */
}
</style>
<body>
<div id="container">
<div id="left-menu">
<h1>Chocolate</h1>
</div>
<ul id="right-menu">
<li><a href="#about"><span>ABOUT</span></a></li>
<li><a href="#shop"><span>SHOP</span></a></li>
<li><a href="#blog"><span>BLOG</span></a></li>
</ul>
</div>
</body>
</html>
