ul > li > a 태그
<body>
<!-- 상단바 시작 -->
<div class="top-bar">
<div class="container1">
<div class="logo-box">로고박스</div>
<nav class="menu-box">
<ul>
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
</ul>
</nav>
<div class="user-box">사용자 메뉴</div>
</div>
/* 노멀라이즈 */
body , ul , il {
margin: 0; padding: 0;
list-style: none;
}
a {
/* 기본컬러 */
color: inherit;
/*밑줄제거 */
text-decoration: none;
}
/* 폰트적용 */
body{
font-family: "Noto Sans KR", sans-serif;
}
/* 상단바 시작 */
.top-bar{
border: 1px solid #000;
display: flex;
}
.top-bar > .container1{
border: 1px solid orange;
width: 1440px; height: 60px;
margin-left: auto; margin-right: auto;
display: flex;
}
.container1 > .logo-box{
width: 280px;
border: 1px solid green;
background-color: #f0f0f0;
display: flex ; align-items: center;
justify-items: center;
}
.container1 > .menu-box{
border: 1px solid green;
background-color: #f0f0f0;
display: flex ;
}
.menu-box > ul {
border: 1px solid blue;
display: flex; align-items: center;
height: 100%;
gap: 40px; padding-left: 40px;
}
.menu-box > ul > li {
border: 1px solid red;
}
.menu-box > ul > li > a {
border: 1px solid pink;
}
.container1 > .user-box{
border: 1px solid green;
background-color: #f0f0f0;
flex-grow: 1;
display: flex ;
align-items: center; justify-content: flex-end;
}