탭메뉴구조
- 탭메뉴는 1개의 영역에 여러가지 컨텐츠가 들어가는 구조
대표적인 탭메뉴로 네이버의 뉴스탭이 있다. 정해진영역에 탭메뉴를 이용해 여러가지 컨텐츠를 나타낼 수 있다.
<!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" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>Document</title>
<style>
.tab-link {
display: inline-block;
cursor: pointer;
}
.tab-link-2 {
display: inline-block;
cursor: pointer;
}
.tab-content {
display: none;
}
.tab-content.on {
display: block;
}
.tab-content-2 {
display: none;
}
.tab-content-2.on {
display: block;
}
</style>
</head>
<body>
<a class="tab-link on" data-type="tab-1">첫번째 탭</a>
<a class="tab-link" data-type="tab-2">두번째 탭</a>
<a class="tab-link" data-type="tab-3">세법째 탭</a>
<hr />
<div id="tab-1" class="tab-content on">첫번째 탭 내용</div>
<div id="tab-2" class="tab-content">두번째 탭 내용</div>
<div id="tab-3" class="tab-content">
세번째 탭 내용
<div>
<a class="tab-link-2 on" data-type="tab-3-1">3-1 탭</a>
<a class="tab-link-2" data-type="tab-3-2">3-2 탭</a>
<a class="tab-link-2" data-type="tab-3-3">3-3 탭</a>
</div>
<div id="tab-3-1" class="tab-content-2 on">첫번째 탭 내용</div>
<div id="tab-3-2" class="tab-content-2">두번째 탭 내용</div>
<div id="tab-3-3" class="tab-content-2">세번째 탭 내용</div>
</div>
<script>
$('.tab-link').click(function () {
var tab_id = $(this).attr('data-type');
$('.tab-link').removeClass('on');
$('.tab-content').removeClass('on');
$(this).addClass('on');
$('#' + tab_id).addClass('on');
});
$('.tab-link-2').click(function () {
var tab_id = $(this).attr('data-type');
$('.tab-link-2').removeClass('on');
$('.tab-content-2').removeClass('on');
$(this).addClass('on');
$('#' + tab_id).addClass('on');
});
</script>
</body>
</html>탭메뉴의 스크립트 구조
반응형(responsive) 웹
- css의 미디어쿼리 속성을 이용하여 1개의 웹사이트를 pc,태블릿,모바일등 해상도가 다른 여러기기를 기기의 디스플에이에 맞춰 화면이 자동을 조정되게 하는 속성
기본구문
- max-width: 800px: 해상도가 800px 이하일때 미디어쿼리 속성 적용.
- min-width: 760px: 해상도가 760px 이상일때 미디어쿼리 속성 적용
@media (max-width: 800px) {
}예시) 넷플릭스
넷플릭스 웹사이트는 @media (min-width:740px)구문을 이용하여 해상도가 740px 이상일때와 이하일때 다른속성을 적용하는 css를 나눠서 사용한다.
오늘 느낀점:프로그래밍언어에 대한 이해도를 올리기 위해서 특정한 작업이나 서비스를 목표로 잡고 목표한 프로젝트를 만들어가면서 모르는부분을 찾고 고민하는 순간 실력을 올릴 수 있다 ex)특정 웹 사이트 코딩하기 코딩할 때는 키보드를 먼저 누르기전에 기능들을 어떻게 구현할 것 인지 먼저 노트에 정리하고 정리한 내용을 바탕으로 구현한 기능들을 하나씩 만들어가는 방법으로 한다.
