프론트엔드 개발자/CSS
html css Tab Contents와 Slides Contents css 구성하기 (js X) +code 클론코딩
신디블로그
2023. 3. 24. 15:43
SMALL
1.Tab Contents
----논리적인 마크업--- (권장)
제목
내용
제목
내용
--- 디자인 우선시 + 스크립트 우선
메뉴나열
내용
2.Slides Contents
3.Before, After => Ridio Chekbox
뉴스
내용
연예
내용
스포츠
내용
/////css 계산함수
width: calc(100% - 20px);
값과 값사이는 무조건 띄어쓰기 해야함.
width: calc(100% - 20px);
///슬라이드 기본구조
박스1 (슬라이드가 보여질 영역)
박스2 (이미지를 묶어서 좌우로 움직이는 박스)
박스3 - 개별이미지
div
ul
li
div
div
div
<!DOCTYPE html>
<html lang="en">
<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>
<link rel="stylesheet" href="css/reset.css">
<style>
body {
padding:50px;
}
.tab1 {
width: 500px;
border-bottom: 10px solid #000;
background: #ccc;
position: relative;
/* 타이틀이 올라가는 영역 */
padding-top: 50px;
}
.tab1 .tit {
background: #fc0;
line-height: 50px;
position:absolute;
top:0;
}
.tab1 .tit1 {
left:0;
}
.tab1 .tit2 {
left:100px;
}
.tab1 .tit3 {
left:200px;
}
.tab1 .cont {
height: 250px;
font-size: 100px;
background: #f20;
}
.tab1 .cont2,
.tab1 .cont3 {
display: none;
}
/* 국민연금공단 탭박스 */
.tab2 {
width: 1220px;
margin: 0 auto;
border-bottom: 10px solid #000;
position: relative;
padding-top: 60px;
}
.tab2::before {
content: '';
width: 365px;
height: 44px;
border-radius: 22px;
background: #aaa;
position: absolute;
left:0; top:0;
}
.tab2 .tit {
position: absolute;
top:0;
}
.tab2 .news {
left:0;
width: 81px;
}
.tab2 .press {
left:81px;
width: 95px;
}
.tab2 .job {
left:176px;
width: 94px;
}
.tab2 .bid {
left:270px;
width: 95px;
}
.tab2 .tit a {
font-size: 14px;
display: block;
line-height: 44px;
border-radius: 22px;
text-align: center;
letter-spacing: -1px;
color:#111;
font-weight: 400;
}
.tab2 .news a {
background: #ef7e4e;
}
.tab2 .press:hover a {
background: #5199dd;
}
.tab2 .job:hover a {
background: #28aa4c;
}
.tab2 .bid:hover a {
background: #838bd0;
}
.tab2 .cont {
height: 165px;
background: #fa0;
}
.tab2 .cont2,
.tab2 .cont3,
.tab2 .cont4 {
display: none;
}
/*kt*/
.kt {
width: 1080px;
height: 400px;
margin: 0 auto;
border-bottom: 10px solid #000;
background: #aaa;
position: relative;
}
.kt .tit {
padding-top: 60px;
margin-bottom: 30px;
font-size: 18px;
}
.kt .sub-tit {
background: #0f0;
width: 339px;
margin-bottom: 15px;
}
.kt .cont {
width: 741px;
height: 400px;
background: #fc0;
position: absolute;
right:0; top:0;
line-height: 25px;
}
.kt .sub-tit a {
background-color: #28aa4c;
padding-right: 20px;
font-size: 18px;
position: relative;
}
.kt .sub-tit a::before {
content: '';
width: calc(100% - 20px);
height: 20px;
background-color: rgba(0, 113, 255, .5);
position: absolute;
left: 0; bottom: 0;
opacity: 0;
}
.kt .sub-tit:hover a::before {
opacity: 1;
}
.kt .sub-tit a::after {
content: '';
width: 0px;
height: 2px;
background-color: #f00;
position: absolute;
top: 50%;
left: 137px;
z-index: 100;
margin-top: -1px;
transition: width 0.3s ease-in-out;
}
.kt .sub-tit:hover a::after {
width: 233px;
}
/*moon*/
.moon {
width: 1285px;
height: 381px;
margin: 0 auto;
background: #aaa;
position: relative;
}
.moon .sub-tit {
margin-left: 320px;
width: 90px;
position: absolute;
top: 0;
left: 30;
background-color: #0f0;
}
.moon .sub-tit a {
position: relative;
display: block;
height: 63px;
line-height: 63px;
}
.moon .cont {
width: 1285px;
height: 313px;
background: rgb(250, 247, 235);
padding-top: 63px;
line-height: 25px;
border-top: 1px solid #b31010;
}
.moon .sub-tit2 {
left: 90px;
}
.moon .sub-tit3 {
left: 180px;
}
.moon .sub-tit4 {
left: 270px;
}
.moon .sub-tit5 {
left: 360px;
}
.moon .sub-tit6 {
left: 450px;
}
.moon .sub-tit a::before {
content: '';
position: absolute;
border-bottom: 1px solid #f00;
bottom: 1px;
width: 55px;
opacity: 0;
}
.moon .sub-tit:hover a::before {
opacity: 1;
}
.moon .cont .menu {
display: flex;
background-color: #0f0;
justify-content: center;
gap: 100px;
}
.moon .cont .menu > li {
flex: none;
position: relative;
}
.moon .cont .menu > li a{
font-size: 16px;
text-decoration: none;
color:#111;
display: block;
padding-top: 145px;
height: 10px;
}
.moon .cont .menu > li a::before{
content: '';
width: 90px;
height: 90px;
background-color: #ccc;
position: absolute;
top: 50%;
left: 50%;
margin: -45px;
margin-left: -45px;
border-radius: 50px;
margin-bottom: 20px;
background-repeat: no-repeat;
background-position: center;
}
.moon .cont .menu > li:nth-child(1) a::before{
background-image: url(nps/i_favor_branch.svg);
}
.moon .cont .menu > li:nth-child(2) a::before{
background-image: url(nps/i_favor_calc.svg);
}
.moon .cont .menu > li:nth-child(3) a::before{
background-image: url(nps/i_favor_doc.svg);
}
.moon .cont .menu > li:nth-child(4) a::before{
background-image: url(nps/i_favor_my.svg);
}
.moon .cont .more {
width: 299px;
height: 36px;
margin-top: 44px;
margin-left: 450px;
border-radius: 40px;
}
.moon .cont .more a {
display: block;
padding: 20px;
background-color: #28aa4c;
border-radius: 40px;
text-align: center;
line-height: 30px;
}
.moon .cont .menu> li:hover a {
color: #b31010;
}
.moon .cont2,
.moon .cont3,
.moon .cont4,
.moon .cont5,
.moon .cont6,
.moon .cont7 {
display: none;
}
</style>
</head>
<body>
<!-- tab Type 1 -->
<div class="tab1">
<h2 class="tit tit1">뉴스</h2>
<div class="cont cont1">내용1</div>
<h2 class="tit tit2">연예</h2>
<div class="cont cont2">내용2</div>
<h2 class="tit tit3">스포츠</h2>
<div class="cont cont3">내용3</div>
</div>
<div class="spacer"></div>
<div class="tab2">
<h2 class="tit news"><a href="">새소식</a></h2>
<div class="cont cont1">새소식</div>
<h2 class="tit press"><a href="">보도자료</a></h2>
<div class="cont cont2">보도자료</div>
<h2 class="tit job"><a href="">채용공고</a></h2>
<div class="cont cont3">채용공고</div>
<h2 class="tit bid"><a href="">입찰공고</a></h2>
<div class="cont cont4">입찰공고</div>
</div>
<div class="spacer"></div>
<div class="kt">
<h2 class="tit">산업별 솔루션</h2>
<h3 class="sub-tit sub-tit1"><a href="">01 금융</a></h3>
<div class="cont cont1">금융</div>
<h3 class="sub-tit sub-tit2"><a href="">02 물류</a></h3>
<div class="cont cont2">물류</div>
<h3 class="sub-tit sub-tit3"><a href="">03 의료</a></h3>
<div class="cont cont3">의료</div>
<h3 class="sub-tit sub-tit4"><a href="">04 공공/국방</a></h3>
<div class="cont cont4">공공/국방</div>
<h3 class="sub-tit sub-tit5"><a href="">05 프랜차이즈</a></h3>
<div class="cont cont5">프랜차이즈</div>
</div>
<div class="spacer"></div>
<div class="moon">
<h3 class="sub-tit sub-tit1"><a href="">일반인</a></h3>
<div class="cont cont1">
<ul class="menu">
<li><a href="#">전체</a></li>
<li><a href="#">전체</a></li>
<li><a href="#">전체</a></li>
<li><a href="#">전체</a></li>
</ul>
<div class="more"><a>지원사업 더보기</a></div>
</div>
<h3 class="sub-tit sub-tit2"><a href="">일반인</a></h3>
<div class="cont cont2">
<ul class="menu">
<li><a href="#">전체</a></li>
<li><a href="#">전체</a></li>
<li><a href="#">전체</a></li>
<li><a href="#">전체</a></li>
</ul>
</div>
<h3 class="sub-tit sub-tit3"><a href="">일반인</a></h3>
<div class="cont cont3">금융</div>
<h3 class="sub-tit sub-tit4"><a href="">일반인</a></h3>
<div class="cont cont4">금융</div>
<h3 class="sub-tit sub-tit5"><a href="">일반인</a></h3>
<div class="cont cont5">금융</div>
<h3 class="sub-tit sub-tit6"><a href="">일반인</a></h3>
<div class="cont cont6">금융</div>
</div>
</body>
</html>
LIST