공지사항 내용과 갤러리 내용을 둘 다 css에 position: absolute 값을 줘서 겹쳐놓고,
둘중에 하나만 보이게끔 설정하면 됩니다.
버튼의 경우 CSS를 2가지 버전(on/off)으로 만들어서 설정해놨습니다.
시험장에서 CSS까지 똑같이 구현하라고 할지 안할지 모르겠어서 일단 해봤는데,
이렇게까지 구현할 필요가 있을까 싶기도... =_=;
(자잘하게 몇가지 사항을 더 추가하는게 너무 귀찮!!!!)
맨날 박스에 border 설정 넣으면 border만큼 width/height 값 줄여서 쓰느라 귀찮았는데...
알고보니 box-sizing: border-box 값을 넣어주면 안해도 되더라구요?...
하 왜 책에는 이런거 안써있었냐...
갤러리에 사용된 이미지는 여기서 가져왔습니다 ^^;
(blog.naver.com/webazit/221493802730)
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>탭메뉴 구현</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="tab_wrap">
<div class="tab_title">
<div class="notice_on">공지사항</div>
<div class="gallery_off">갤러리</div>
</div>
<div class="contents_box">
<ul class="notice_letter">
<li><a href="#">1번 공지사항을 써주세요</a><span>20-05-18</span></li>
<li><a href="#">2번 공지사항을 써주세요</a><span>20-05-17</span></li>
<li><a href="#">3번 공지사항을 써주세요</a><span>20-05-16</span></li>
<li><a href="#">4번 공지사항을 써주세요</a><span>20-05-15</span></li>
</ul>
<ul class="gallery_img">
<li><a hef="#"><img src="img/thumb1.png" alt="이미지1"></a></li>
<li><a hef="#"><img src="img/thumb2.png" alt="이미지2"></a></li>
<li><a hef="#"><img src="img/thumb3.png" alt="이미지3"></a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
CSS
@charset "UTF-8";
*{
padding: 0;
margin: 0;
color: #333333;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
#tab_wrap{
width: 380px;
height: 180px;
padding: 10px;
border: 1px solid blue;
}
.tab_title{
position: absolute;
width: 100%;
font-size: 0;
z-index: 2;
cursor: pointer;
}
.notice_on{
display: inline-block;
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 1rem;
background: white;
border: 1px solid grey;
border-bottom: none;
background: white;
z-index: 3;
}
.notice_off{
display: inline-block;
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 1rem;
background: lightgrey;
border: 1px solid grey;
z-index: 3;
}
.gallery_off{
display: inline-block;
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 1rem;
background: lightgrey;
border-top: 1px solid grey;
border-right: 1px solid grey;
border-bottom: 1px solid grey;
}
.gallery_on{
display: inline-block;
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 1rem;
background: white;
border-top: 1px solid grey;
border-right: 1px solid grey;
border-bottom: none;
}
.contents_box{
position: absolute;
margin-top: 29px;
width: 355px;
height: 125px;
border: 1px solid grey;
z-index: 1;
}
.notice_letter{
display: block;
position: fixed;
padding: 10px;
width: 355px;
}
.notice_letter>li{
line-height: 27px;
font-size: 0.9rem;
}
.notice_letter>li>a{
float: left;
}
.notice_letter>li>span{
float: right;
}
.gallery_img{
display: none; /*활성시 flex*/
justify-content: space-between;
padding: 10px;
width: 355px;
height: 125px;
font-size: 0;
}
.gallery_img>li{
display: inline-block;
overflow: hidden;
background: black;
width: 100px;
height: 100px;
}
.gallery_img>li>a>img{
width: 100px;
height: 100px;
}
Java Script
//갤러리 버튼 클릭
$('.gallery_off').click(function(){
$('.notice_letter').hide(); //공지사항 내용 숨기기
$('.gallery_img').css({'display' : 'flex',}); //갤러리 내용 나타내기
$(this).attr('class','gallery_on'); //갤러리 버튼 CSS 변경
$('.notice_on').attr('class','notice_off'); //공지사항 버튼 CSS 변경
});
//공지사항 버튼 클릭
$('.notice_on').click(function(){
$('.notice_letter').show(); //공지사항 내용 나타내기
$('.gallery_img').hide(); //갤러리 내용 숨기기
$(this).attr('class','notice_on'); //공지사항 버튼 CSS변경
$('.gallery_on').attr('class','gallery_off'); //갤러리 버튼 CSS 변경
});
'꿀팁 공유 > └ 웹디자인기능사' 카테고리의 다른 글
| 슬라이드 이미지 구현 (좌우/상하/페이드인아웃) (5) | 2020.06.03 |
|---|---|
| JUST 쇼핑몰 두번째 연습 (0) | 2020.05.30 |
| 메뉴 네비게이션 만들기 (가로) (0) | 2020.05.18 |
| 웹디자인 기능사 공개문제 B-4 : 산업대학교 (0) | 2020.05.14 |
| 웹디자인기능사 공개도면 B-3 : 세계의 미술작품 (0) | 2020.05.12 |
댓글