CSS 가상 선택자 활용 예제_CSS
2021. 12. 15. 12:09ㆍksmart_html_css_js/css
728x90
탭 구성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<style>
ul {
list-style: none;
margin:0;
padding:0;
}
.tab{
position:relative;
}
.tab-btn {
overflow: hidden;
border-bottom: 1px solid #000;
}
.tab-btn li {
float: left;
padding: 5px 10px;
border: 1px solid #000;
margin-right: 3px;
border-bottom: 0;
}
.tab-contant {
position: absolute;
top:45px;
left:10px;
display:none;
}
/* .tab-btn li:first-child .tab-contant{
display:block;
} */
.tab-btn li:hover .tab-contant{
display:block;
}
</style>
<h2>탭 구성</h2>
<div class="tab">
<ul class="tab-btn">
<li>탭1
<div class="tab-contant">탭1 콘텐츠</div>
</li>
<li>탭2
<div class="tab-contant">탭2 콘텐츠</div>
</li>
<li>탭3
<div class="tab-contant">탭3 콘텐츠</div>
</li>
</ul>
</div>
</body>
</html>728x90
'ksmart_html_css_js > css' 카테고리의 다른 글
| CSS 가상 선택자_CSS (0) | 2021.12.15 |
|---|---|
| CSS 속성 종류 _float_nav 만들기_CSS (0) | 2021.12.15 |
| CSS 속성 종류 5_CSS (0) | 2021.12.15 |
| CSS 속성 종류 4_CSS (0) | 2021.12.15 |
| CSS 속성종류 3_CSS (0) | 2021.12.15 |