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
'프로젝트 및 실습 > 웹 따라 만들기' 카테고리의 다른 글
| 실무실습) sitemap 따라 만들기 (진행중) (0) | 2020.05.19 |
|---|---|
| 실무실습) 간단한 카테고리 만들기 (0) | 2020.05.15 |
| 실무실습) 조직도 만들기 (0) | 2020.05.13 |
| 실무실습) 로그인 페이지 만들기 (0) | 2020.05.12 |
| 실무실습) 이벤트 게시판 (0) | 2020.05.09 |