웹디자인 기능사 실기 탭 메뉴 구현 / html css jQuery
웹디 기능사에서 css 소스가 제일 복잡한 구간이 바로 탭 메뉴입니다.
하지만 jQuery 소스가 그만큼 쉬우니 잘 따라오실 수 있습니다!
html 소스
<body>
<div class="tab">
<dl>
<dt class="on"><a href="#">공지사항</a></dt>
<dd>
<ul class="notice">
<li><a href="#">공지1</a></li>
<li><a href="#">공지2</a></li>
<li><a href="#">공지3</a></li>
<li><a href="#">공지4</a></li>
<li><a href="#">공지5</a></li>
</ul>
</dd>
<dt><a href="#">갤러리</a></dt>
<dd class="hidden">
<ul class="gallery">
<li><a href="#"><img src="http://placehold.it/80x100/335566?text=gall1" alt="gall1"></a></li>
<li><a href="#"><img src="http://placehold.it/80x100/112244?text=gall2" alt="gall2"></a></li>
<li><a href="#"><img src="http://placehold.it/80x100/552244?text=gall3" alt="gall3"></a></li>
</ul>
</dd>
</dl>
</div>
</body>
html부터 조금 복잡하죠?
tab이라는 박스로 감싸주고 제목이 있기 때문에 <dl> , <dt> , <dd>를 사용해 주었습니다.
<dt>는 제목 <dd>는 내용 이 둘을 감싸는 <dl>이 있다고 생각하면 쉽습니다.
먼저 "공지사항"과 "갤러리" 두 가지의 제목을 탭 했을 때 내용들이 나올 것이기 때문에 <dt>에 공지사항과 갤러리를 만들어 주었습니다.
공지사항과 갤러리 둘 중 하나를 눌렀을 때, on이라는 클래스를 이용해 배경색의 변화를 줄 것이기 때문에 첫 번째 <dt>에 on 클래스를 주었습니다.
공지사항의 내용을 <dd> 안에 <ul>, <li>를 사용하여 넣어주었고 <ul>에 각 공지사항과 갤러리의 내용에 맞게 클래스 명을 주어 구분해 주었습니다.
같은 공간 안에 두 개의 내용을 넣고, <dt>를 탭 하였을 때 내용을 숨겼다가 보였다가 하게끔 만들 것이기 때문에 갤러리의 내용인 <dd>에 class="hidden"을 넣어주었습니다.
html부터 조금 복잡하긴 한데 이렇게 풀어서 이해를 하나씩 하나씩 해보면 생각보다 쉽습니다!
css 소스
div.tab {
width: 400px;
height: 200px;
}
div.tab dl {
width: 400px;
height: 200px;
position: relative;
}
div.tab dl dt {
width: 200px;
height: 50px;
font-size: 18px;
font-weight: bold;
text-align: center;
line-height: 50px;
float: left;
}
div.tab dl dt.on {
background-color: lightgray;
color: white;
}
div.tab dl dd {
width: 400px;
height: 150px;
position:absolute;
top: 50px;
left: 0;
}
div.tab dl dd.hidden {
display: none;
}
div.tab dl dd ul.notice {
width: 400px;
height: 150px;
}
div.tab dl dd ul.notice li {
margin: 10px;
list-style: square;
list-style-position: inside;
}
div.tab dl dd ul.gallery {
width: 400px;
height: 150px;
}
div.tab dl dd ul.gallery li {
width: 80px;
height: 100px;
margin-left: 40px ;
margin-top: 25px;
float: left;
}
내용과 제목을 감싸는 <dl>에 position: relative를 주었고
<dt>에 폰트 사이즈와 폰트 위치를 정렬해 준 뒤 넓이 값 200씩 주어서 float: left로 한 줄 정렬해주었습니다.
중요한 dt.on은 공지사항에만 주었죠! 나중에 jQuery를 사용해서 클릭했을 때 background-color와 color를 없어졌다 만들었다를 동작하기 위해 배경색, 폰트 색을 바꿔주었습니다.
<dt>를 클릭했을 때 <dd>가 나타나고 사라지고 해야 하기 때문에 position: absolute를 주어 공간을 띄워주었고 <dt>의 높이 값인 50만큼 top 50을 주어 위치해주었습니다.
여기서 갤러리의 내용인 <dd>가 처음엔 보이지 않아야 하기 때문에. hidden에 display: none을 넣어주었습니다.
공지사항의 내용을 이쁘게 꾸미기 위해서 글자 간격을 10씩 띄워 주었으며 list-style: square을 주어서 글자 앞에 네모난 점을 만들어 주었습니다.
list-style: square만 준다면 네모난 점이 박스 밖으로 빠져나가기 때문에 list-style-position: inside를 줘서 박스 안으로 점과 글씨가 들어오게 만들어주었습니다.
갤러리 <li>들도 간격을 맞추고 float: left를 줘서 한 줄로 위치 조정을 해주었고, 이제 jQuery를 사용해서 동작을 시켜보도록 하겠습니다.
jQuery 소스
$(document).ready(function(){
$('div.tab dl dt').click(function(){
$('div.tab dl dt').removeClass('on');
$(this).addClass('on');
$('div.tab dl dd').addClass('hidden');
$(this).next().removeClass('hidden');
})
})
제이쿼리 시작을 알리고
선택자 <dt>를 클릭했을 때 (할 일
선택자 <dt>는 클래스를 빼준다('on클래스를');
this는 클래스를 더해준다 ('on클래스를'); //this는 부모 요소의 선택자를 그대로 가져온다.
선택자 <dd>는 클래스를 더해준다('hidden클래스를');
this의 next는 클래스를 빼준다 ('hidden클래스를'); //next는 선택자의 바로 다음 요소를 말한다.
})
탭 메뉴는 html, css가 조금 복잡한 대신 jQuery가 조금 간편하죠?
다 이해하면서 넘어간다면 다들 쉽게 할 수 있을 거라고 생각합니다!
마지막으로 영상 첨부하면서 마치도록 하겠습니다.
'디노 code.html' 카테고리의 다른 글
| 웹디자인 기능사 실기 modal layer popup(레이어 팝업) / html css jQuery (0) | 2021.08.10 |
|---|---|
| 반응형 웹 메뉴 만들기 @media css / html css (0) | 2021.08.09 |
| 웹디자인 기능사 실기 슬라이드 fade / html css jQuery (0) | 2021.08.06 |
| 웹디자인 기능사 실기 자동 슬라이드 top / html css jQuery (0) | 2021.08.05 |
| 웹디자인 기능사 실기 전체메뉴 슬라이드 다운 / html css jQuery (0) | 2021.08.05 |
댓글