<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
<style>
nav {
width: 1166px;
border: 1px solid #000;
background: yellow;
margin: 20px 30px;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
.gnb,.tnb {
height: 70px;
box-sizing: border-box;
border: 1px solid #000;
}
.gnb {
width: 570px;
margin-right: 10px;
background: green;
float: left;
}
.tnb {
width: 346px;
background: gray;
float:right;
}
.gnb a{
width: 100px;
margin-left: 10px;
}
.tnb a{
width: 100px;
margin-left: 10px;
}
.gnb a:first-child{
margin-left: 10px;
}
a {
height: 50px;
box-sizing: border-box;
border: 1px solid #000;
float: left;
margin-right: 0px;
text-decoration: none;
margin-top: 10px;
background: white;
/* text 정중앙 정령(x축,y축) */
text-align: center;
/*(x축)*/
line-height: 70px;
/* y축 : 줄높이를 세로길이와 동일하게*/
}
</style>
</head>
<body>
<nav class="clearfix">
<ul class="gnb">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">BOARD</a></li>
<li><a href="#">LOGIN</a></li>
<li><a href="#">JOIN</a></li>
</ul>
<ul class="tnb">
<li><a href="#">검색</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</nav>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
<style>
nav {
}
.gnb {
float: left;
width: 55%;
}
.tnb {
float: right;
width: 40%;
}
ul li {
float: left;
/* border-bottom: 2px solid red; */
box-sizing: border-box;
text-align: center;
padding: 10px;
}
.gnb li {
width: 18%;
margin-right: 2%;
}
.tnb li {
width: 31%;
margin-right: 2%;
}
ul li a {
color: #000;
text-decoration: none;
}
ul li:hover {
border-bottom: 2px solid red;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<!-- nav>(ul.gnb>li*5>a)+(ul.tnb>li*3>a) -->
<nav class="clearfix">
<ul class="gnb clearfix">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">BOARD</a></li>
<li><a href="#">LOGIN</a></li>
<li><a href="#">JOIN</a></li>
</ul>
<ul class="tnb clearfix">
<li><a href="#">검색</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</nav>
</body>
</html>
'CSS입문' 카테고리의 다른 글
| CSS_박스띄우기(실습3)_22.04.12(Tue) (0) | 2022.04.12 |
|---|---|
| CSS_박스띄우기(실습2)_22.04.12(Tue) (0) | 2022.04.12 |
| CSS_박스나열(중첩,마진 계산하기)_연습문제_22.04.11(mon) (0) | 2022.04.11 |
| CSS_박스 띄우기_중첩레이아웃(float)_22.04.11(mon) (0) | 2022.04.11 |
| CSS_박스 띄우기_수평배치(float)_22.04.11(mon) (0) | 2022.04.11 |