#navi1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.navi {
width: 1000px;
margin: 100px;
}
/*li태그만 변경하면 빨간색 앞에 기호가 있는 ul은 파랑색이다. 이 파랑색 부분은 padding이다.*/
/*margin과 padding 부분을 0으로 해서 없애주기.*/
.navi>ul {
list-style: none;
margin: 0;
padding: 0;
/*float사용 시 부모요소의 마지막에 overflow*/
overflow: hidden;
}
.navi>ul>li {
float: left;
/*width에 산술식 활용하기 -> 전체에서 1/8사용*/
width: calc(100%/8);
height: 50px;
}
.navi>ul>li>a {
/*a태그 밑줄 삭제*/
text-decoration: none;
/*a태그는 인라인 속성 -> 블럭 속성으로 변경하여 글씨가 아닌 칸을 선택해도 이동할 수 있도록 만듦*/
display: block;
width: 100%;
height: 100%;
text-align: center;
line-height: 48px;
color: #f5ad28;
background-color: #2e2f2f;
border-right: 2px solid #eb8921;
box-sizing: border-box;
text-shadow: 1px 1px 1px 1px #eb8921;
box-shadow: 1px 1px 1px #1e1e1e;
}
.navi>ul>li>a:hover {
background-color: #eb8921;
color: #2e2f2f;
font-weight: bold;
}
/*첫번째 a태그 -> JAVA*/
.navi>ul>li:first-child>a{
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
/*마지막 a태그 -> Framework*/
.navi>ul>li:last-child>a{
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
/*가장 끝칸의 right선 없애주기*/
border: none;
}
</style>
</head>
<body>
<h1>기본메뉴 만들기</h1>
<hr>
<div class="navi">
<ul>
<li><a href="#">JAVA</a></li>
<li><a href="#">ORACLE</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">서버</a></li>
<li><a href="#">Framework</a></li>
</ul>
</div>
</body>
</html>'CSS' 카테고리의 다른 글
| 문제 및 실습 (navi(3)-가로탭 메뉴) (0) | 2020.10.15 |
|---|---|
| 문제 및 실습 (navi(2)-드롭다운 메뉴) (0) | 2020.10.15 |
| 문제 및 실습 (갤러리) (0) | 2020.10.15 |
| Brackets 기능 추가 (Emmet) (0) | 2020.10.15 |
| 문제 및 실습 (폴라로이드) (0) | 2020.10.15 |