프로젝트 및 실습/웹 따라 만들기
실무실습) 탭 메뉴 만들기
takudaddy
2020. 5. 17. 02:42
html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>shopping-mall</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="default.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="tab_type1">
<ul>
<li><a href="#a" class="on">브랜드별</a></li>
<li><a href="#a">일반기능도료</a></li>
<li><a href="#a">특수기능도료</a></li>
<li><a href="#a" >DIY(가정용)</a></li>
<li><a href="#a">KS규격도료</a></li>
</ul>
</nav>
</body>
</html>
css
body { padding: 50px;}
.tab_type1 ul { display: flex; height: 60px; border-bottom: 1px solid #5da62d;}
.tab_type1 ul li { flex: 1;}
.tab_type1 ul li:first-child a { border-left: 1px solid #ddd;}
.tab_type1 ul li a { display:block; height: 59px; border: 1px solid #ddd; border-bottom: none; border-left: none; font-size: 14px; color: #505050; text-align: center; line-height: 59px;}
.tab_type1 ul li a.on { position: relative; height:58px; border-color: #5da62d; border-top-width: 2px; line-height: 57px; border-bottom: 1px solid #fff; }
.tab_type1 ul li a.on:before {content:""; position: absolute; left:-1px; top:-2px; width: 1px; height: 100%; background: #5da62d; border-top:2px solid #5da62d;}
도움 : 유튜브 리베하얀님
https://www.youtube.com/watch?v=JDxIq9LQc90&list=PL_6yF2upGJYtE8CWiTRu7qvRSSzFy4Hzd&index=20
728x90