연습문제
: 메뉴 아이콘을 클릭했을 때 사이드바 메뉴가 화면 왼쪽에서 나타나도록 하는 JavaScript 프로그램을 작성하라.
① 닫기 버튼을 눌렀을 때 사이드바 메뉴가 사라지는 Version
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<title>demo</title>
<link rel="stylesheet" href="reset.css">
<style>
/* button 요소에 기본적으로 적용되는 스타일 속성 초기화 */
body {
background-color: black;
}
button {
background-color: transparent;
padding: 0;
border: none;
outline: none;
cursor: pointer;
}
/* 웹 접근성 향상을 위해 넣어준 span 요소를 화면에 보이지 않도록 설정 */
button > span { display: none; }
#menu {
/* 포지션 속성을 지정하지 않게 되면 #menu 요소가 화면에 보이지 않는다. */
/* HTML 문서를 기준으로 좌상단에 배치해도 되므로 기준이 되는 포지션 속성을
굳이 주지 않아도 된다. */
position: absolute;
top: 50px; left: 50px;
/* 크기 설정 */
width: 36px; height: 36px;
/* 배경 이미지를 이용해서 아이콘 표시 */
background: url("outline_menu_white_icon_36px.png") no-repeat center / cover;
/* 배경 이미지를 이용해서 아이콘 표시 */
/* z-index: 1; */
}
#sidebar {
/* 포지션 속성을 지정하지 않게 되면 #sidebar 요소가 화면에 보이지 않는다. */
/* 화면을 기준으로 왼쪽에 배치 */
position: fixed;
top: 0; bottom: 0;
/* 여기에서 left값을 주지 않게 되면 변화하는 값이 없게 되므로
transition 속성이 적용되지 않는다. */
left: 0;
/* 요소가 처음에는 화면 바깥쪽에 배치되도록 설정 */
/* → left 스타일 속성 값을 요소의 크기(width)만큼 음수로 지정 */
left: -500px;
/* 너비 설정 */
width: 500px;
background-color: rgb(178, 92, 212);
/* 요소의 움직임을 만들어주기 위해 transition 설정 */
transition: 0.4s;
}
#close {
/* #sidebar 요소의 영역을 기준으로 우상단에 배치
#sidebar에는 이미 포지션 속성일 설정되어 있으므로 기준으로 삼을 수 있다 */
position: absolute;
top: 50px; right: 50px;
/* 크기 설정 */
width: 36px; height: 36px;
/* 배경 이미지를 이용해 아이콘 표시 */
background: url("outline_close_white_icon_36px.png") no-repeat center /cover;
}
</style>
<script>
window.addEventListener("load", function () {
// 이벤트 핸들러: window 객체에 load 이벤트가 발생하면 실행할 기능
// → 브라우저가 HTML 문서의 내용을 모두 읽고 해석한 다음 발생하는 이벤트
// → 따라서 이 이벤트 핸들러에서는 DOM에 있는 요소들에 정상적으로 접근할 수 있다.
//---------------------------------------------------------------------------
// 1. #menu 요소를 클릭하면
// 1.1. #sidebar 요소가 화면에 나타나도록 한다.
// 2. #close 요소를 클릭하면
// 2.1. #sidebar 요소가 화면에 사라지도록 한다.
//---------------------------------------------------------------------------
// 프로그램에서 여러 번 참조하는 요소를 미리 탐색
var sidebar = document.querySelector("#sidebar");
// 1. #menu 요소를 클릭하면
document.getElementById("menu").addEventListener("click", function () {
// 이벤트 핸들러: #menu 요소에 click 이벤트가 발생하면 실행할 기능
// 1.1. #sidebar 요소가 화면에 나타나도록 한다.
sidebar.style.left = "0";
});
// 2. #close 요소를 클릭하면
document.getElementById("close").addEventListener("click", function() {
// 이벤트 핸들러: #close 요소에 click 이벤트가 발생하면 실행할 기능
// 2.1. #sidebar 요소가 화면에 사라지도록 한다.
// → #sidebar 요소에 설정했던 left 스타일 속성을 제거한다.
// sidebar.style.left = "";
sidebar.removeAttribute("style");
});
}); //window.onload
</script>
</head>
<body>
<!-- 웹 접근성 향상을 위해 span 태그로 텍스트 입력 -->
<button id="menu"><span>Menu</span></button>
<aside id="sidebar">
<button id="close"><span>Close</span></button>
</aside>
</body>
</html>
② 메뉴 버튼을 다시 눌렀을 때 사이드바 메뉴가 사라지는 Version
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<title>demo</title>
<link rel="stylesheet" href="reset.css">
<style>
/* button 요소에 기본적으로 적용되는 스타일 속성 초기화 */
body {
background-color: black;
}
button {
background-color: transparent;
padding: 0;
border: none;
outline: none;
cursor: pointer;
}
/* 웹 접근성 향상을 위해 넣어준 span 요소를 화면에 보이지 않도록 설정 */
button > span { display: none; }
#menu {
/* 포지션 속성을 지정하지 않게 되면 #menu 요소가 화면에 보이지 않는다. */
/* HTML 문서를 기준으로 좌상단에 배치해도 되므로 기준이 되는 포지션 속성을
굳이 주지 않아도 된다. */
position: absolute;
top: 50px; left: 50px;
/* 크기 설정 */
width: 36px; height: 36px;
/* 배경 이미지를 이용해서 아이콘 표시 */
background: url("outline_menu_white_icon_36px.png") no-repeat center / cover;
/* 배경 이미지를 이용해서 아이콘 표시 */
z-index: 1;
}
#sidebar {
/* 포지션 속성을 지정하지 않게 되면 #sidebar 요소가 화면에 보이지 않는다. */
/* 화면을 기준으로 왼쪽에 배치 */
position: fixed;
top: 0; bottom: 0;
/* 여기에서 left값을 주지 않게 되면 변화하는 값이 없게 되므로
transition 속성이 적용되지 않는다. */
left: 0;
/* 요소가 처음에는 화면 바깥쪽에 배치되도록 설정 */
/* → left 스타일 속성 값을 요소의 크기(width)만큼 음수로 지정 */
left: -500px;
/* 너비 설정 */
width: 500px;
background-color: rgb(178, 92, 212);
/* 요소의 움직임을 만들어주기 위해 transition 설정 */
transition: 0.4s;
}
</style>
<script>
window.addEventListener("load", function () {
// 이벤트 핸들러: window 객체에 load 이벤트가 발생하면 실행할 기능
// → 브라우저가 HTML 문서의 내용을 모두 읽고 해석한 다음 발생하는 이벤트
// → 따라서 이 이벤트 핸들러에서는 DOM에 있는 요소들에 정상적으로 접근할 수 있다.
//---------------------------------------------------------------------------
// 1. #menu 요소를 클릭하면
// 1.1. #sidebar 요소가 화면에 보이지 않는 상태이면
// 1.2. #sidebar 요소가 화면에 나타나도록 한다.
// 1.3. 그렇지 않으면
// 1.4. #sidebar 요소가 화면에 사라지도록 한다.
//---------------------------------------------------------------------------
// 프로그램에서 여러 번 참조하는 요소를 미리 탐색
var sidebar = document.querySelector("#sidebar");
// 1. #menu 요소를 클릭하면
document.getElementById("menu").addEventListener("click", function () {
// 이벤트 핸들러: #menu 요소에 click 이벤트가 발생하면 실행할 기능
// 디버그 메시지
console.log("sidebar.style.left = " + sidebar.style.left);
// 1.1. #sidebar 요소가 화면에 보이지 않는 상태이면
// → #sidebar 요소의 left 스타일 속성의 값이 설정되어 있지 않으면
// if( sidebar.style.left == "")
if(!sidebar.style.left)
// 1.2. #sidebar 요소가 화면에 나타나도록 한다.
sidebar.style.left = "0";
// 1.3. 그렇지 않으면
else
// 1.4. #sidebar 요소가 화면에 사라지도록 한다.
sidebar.style.left = "";
});
}); //window.onload
</script>
</head>
<body>
<!-- 웹 접근성 향상을 위해 span 태그로 텍스트 입력 -->
<button id="menu"><span>Menu</span></button>
<aside id="sidebar">
</aside>
</body>
</html>