ksw_devlog
TIL 2일차 본문
팀 소개 메인페이지를 만들기로 했다.
팀별로 구역을 나눠서 만들기로 하였는데 나는 '방명록' 위 쪽 '프로젝트 소개 영역'을 맡기로 했다.
탭 메뉴를 이용하여 내용을 채우고 싶었고 구글링해서 이용할 수 있는 코드를 사용했다.
<style>
.tab_menu{
position:relative;
}
.tab_menu .list{
overflow:hidden;
}
.tab_menu .list li{
float:left; margin-right:14px;
}
.tab_menu .list .btn{
font-size:13px;
}
.tab_menu .list .cont{
display:none; position:absolute; background:#555; color:#fff; text-align:center; width:250px; height:100px; line-height:100px;
}
.tab_menu .list li.is_on .btn{
font-weight:bold; color:green;
}
.tab_menu .list li.is_on .cont{display:block;
}
</style>
<div class="tab_menu">
<ul class="list">
<li class="is_on">
<a href="#tab1" class="btn">Tab Button1</a>
<div id="tab1" class="cont">Tab Content1</div>
</li>
<li>
<a href="#tab2" class="btn">Tab Button2</a>
<div id="tab2" class="cont">Tab Content2</div>
</li>
<li>
<a href="#tab3" class="btn">Tab Button3</a>
<div id="tab3" class="cont">Tab Content3</div>
</li>
</ul>
</div>
<script> const tabList = document.querySelectorAll('.tab_menu .list li');
for(var i = 0; i < tabList.length; i++){
tabList[i].querySelector('.btn').addEventListener('click', function(e)
{ e.preventDefault(); for(var j = 0; j < tabList.length; j++)
{ tabList[j].classList.remove('is_on');
}
this.parentNode.classList.add('is_on');
});
}
</script>
위 코드로 웹페이지를 띄우면
이렇게 나온다.
화면에 표시할 내용이 5가지가 되고 좀 더 깔끔하게 디자인하고 싶어서
Tab button 부분은 왼쪽, Tab Content 부분은 오른쪽으로 배치했다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.tab_menu{position:static;}
.tab_menu .list{
overflow:hidden;
}
.tab_menu .list li{
float:left;
margin-right:14px;
}
.tab_menu .list li.is_on .btn{
font-weight:bold;
color:green;
}
.tab_menu .list .btn{
font-size:13px;
}
.tab_menu .cont_area .cont{
position:absolute;
top:20px; left:200px;
background: darkgrey;
font-size: 20px;
color:black;
text-align:left;
width:1000px;
height:500px;
line-height:50px;
}
ul {
border-right: 1px solid gray;
width: 100px;
height: 400px;
margin:0;
padding:20px;
}
</style>
</head>
<body>
<div class="tab_menu">
<ul class="list">
<li class="is_on">
<a href="#tab1" class="btn">개발 인원 및 역할</a>
</li>
<li>
<a href="#tab2" class="btn">프로젝트 소개</a>
</li>
<li>
<a href="#tab3" class="btn">구현된 api</a>
</li>
<li class="is_on">
<a href="#tab4" class="btn">사용된 기술</a>
</li>
<li class="is_on">
<a href="#tab5" class="btn">데이터베이스 구조</a>
</li>
</ul>
<div class="cont_area">
<div id="tab1" class="cont">
김승우 : ~~~<br>
김유안 : ~~~<br>
김예슬 : ~~~~<br>
김태욱 : ~~~~<br>
송원석 : ~~~~<br>
</div>
<div id="tab2" class="cont">
팀 소개하기
</div>
<div id="tab3" class="cont">
api.............
</div>
<div id="tab4" class="cont">
HTML / CSS / Javascript
</div>
<div id="tab5" class="cont">
데이터베이스~~~
</div>
<script>
const tabList = document.querySelectorAll('.tab_menu .list li');
const contents = document.querySelectorAll('.tab_menu .cont_area .cont')
let activeCont = ''; // 현재 활성화 된 컨텐츠 (기본:#tab1 활성화)
for(var i = 0; i < tabList.length; i++){
tabList[i].querySelector('.btn').addEventListener('click', function(e){
e.preventDefault();
for(var j = 0; j < tabList.length; j++){
// 나머지 버튼 클래스 제거
tabList[j].classList.remove('is_on');
// 나머지 컨텐츠 display:none 처리
contents[j].style.display = 'none';
}
// 버튼 관련 이벤트
this.parentNode.classList.add('is_on');
// 버튼 클릭시 컨텐츠 전환
activeCont = this.getAttribute('href');
document.querySelector(activeCont).style.display = 'block';
});
}
</script>
</div>
</div>
</body>
</html>
이런 형태에서 디자인을 더 수정할 생각이다.
CSS style 부분을 계속 수정해봐야 될 것 같다.
