지금까지 자바스크립트가 무엇인지 또 어떤 식으로 작동하는지 공부해 보았어.
좀 어렵지?
이제 부터는 위에서 배운 내용을 토대로 실제 화면을 꾸미는 것을 공부해 보자구.
실제 써 먹을 화면도 없이 계속 공부만 하면 무슨 의미가 있겠어.
공부했던 내용을 화면에서 직접 본다면 포기하려 했던 마음도 돌아 올지 모르고..
■ 감추기, 보이기
첫번째로 테스트해 볼 기능은 자바스크립트에서 가장 많이 쓰이는 [감추기, 보이기, 토글] 이야.
간단하지만 정말 가장 많이 쓰이는 기능이라고 할 수도 있어.
이미 앞서 공부했던 내용이지만 여기서 다시 한 번 완성된 화면에서 확인해 보자구.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>show/hide-vanilla</title>
<style>
.menu {width:500px; background-color:#ccc; padding:10px; border:1px solid gray;}
</style>
</head>
<body>
<div class="menu">
<div>
<span style="font-size:20px">알찬만두</span>
<button id="showBtn" style="float:right" onclick="show()">메뉴보기</button>
<button id="hideBtn" style="float:right" onclick="hide()">메뉴닫기</button>
</div>
<!---- 숨겨진 부메뉴 ---->
<div id="subMenu" style="display:none;">
<hr>
<li><a href="#">만두소개</a></li>
<li><a href="#">오시는길</a></li>
</div>
</div>
</body>
<script>
function show() {
document.getElementById('subMenu').style.display = "block"; // 보이기
}
function hide() {
document.getElementById('subMenu').style.display = "none"; // 감추기
}
</script>
</html>
이제 이 정도 코드는 충분히 이해할 수 있지?
[보기][닫기] 버튼을 2개 만들고 각 버튼을 클릭할 때 마다 show() 또는 hide() 함수가 실행되도록 했어.
show() 함수에서는 요소.style.display 속성을 block로 변경해서 보이게 했고, hide() 함수에서는 이 값을 none로 바꾸어 감추도록 했어.
위 예제에 대한 결과는 아래 링크에서 확인할 수 있어.
또는 여러분이 직접 위 소스를 복사해서 html 파일에 넣고 여러분의 브라우저에서 실행해서 확인해 볼 수도 있어.
http://yogibbs.kr/jsDemo/showHide1-vanilla.html
[잠깐!]
그런데 앞으로는 수업을 하면서 위와 같이 html 코드 전체를 보여주지는 않고 자바스크립트의 설명을 위한 코드 부분만 보여 주면서 설명을 진행할거야.
html을 포함한 전체 코드를 보고 싶으면 데모 페이지 링크로 간 뒤에 키보드의 Ctrl-U 를 누르면(또는 마우스 우클릭후, [페이지소스보기]를 선택) 코드 전체가 보여.
계속 진행해 보자구.
위 코드는 잘 작동하지만 결코 좋은 코드가 아니야.
[메뉴보기][메뉴닫기] 버튼이 각자 따로 있는 것 보다 [메뉴] 라는 버튼 한개만 두고 한 번 누를 때 마다 보였다, 감췄다 하는 것이 훨씬 더 좋지 않겠어?
이렇게 하나의 버튼에 켰다,끄는 2가지 기능을 구현하는 것을 보통
'토글(toggle)' 라고 불러.
그런데 두가지 기능을 어떻게 하나의 함수에 넣을까?
바로
if 조건절을 이용하면 돼.
상단 메뉴 버튼을 [메뉴]라는 이름으로 1개만 남겨두고 onclick 했을때 함수를 showHide() 로 바꾸어봐.
그리고 아래 자바스크립 코드를 아래와 같이 변경해.
function showHide() {
var subMenu = document.getElementById('subMenu');
if (subMenu.style.display == 'none') {
subMenu.style.display = 'block';
} else {
subMenu.style.display = 'none';
}
}
부메뉴를 감싸는 subMenu div를 선택하고, 이 요소의 display 스타일이 none 이면 block 로 바꾸고, 아니면(즉 현재 blcok 상태이면) 반대로 none 속성으로 바꾸도록 했어.
간단하지?
위 코드를 적용한 데모 화면은 아래 링크에서 확인해 봐.(그리고 Ctlr-U 를 눌러서 전체 소스도 직접 확인해 봐)
http://yogibbs.kr/jsDemo/showHide2-vanilla.html
■ 토글
토글 기능을 구현하는 더 간단한 방법도 있어.
앞서 보이기,감추기 기능은 결국 스타일의 display 속성을 바꾸는 방법을 사용했지?
그렇다면 이미 지정된 스타일 class를 없애 버려도 마찬가지 아닐까?
직접 실험해 보자구.
현재 소스의 html 에서 style 부분과 부메뉴 부분을 아래와 같이 바꿔봐.
그리고 아래 자바스크립트도 아래와 같이 변경해서 확인해 볼께.
....
<style>
.menu {width:500px; background-color:#ccc; padding:10px; border:1px solid gray;}
.hideMenu {display:none; }
</style>
....
<div id="subMenu" class="hideMenu">
<hr>
<ul>
<li><a href="#">만두소개</a></li>
<li><a href="#">오시는길</a></li>
</ul>
</div>
....
<script>
function toggle() {
let menu = document.querySelector('#subMenu');
menu.classList.toggle('hideMenu');
}
</script>
소스를 보면 subMenu 라는 div 요소는 hideMenu 라는 클래스로 지정해서 기본으로는 보이지 않도록 되어 있어.
(상단 style 부분에서 .hideMenu {display:none;} 으로 정의 했으니 감춰져 있겠지?)
이제 메뉴 버튼을 클릭하면 toggle() 이라는 함수가 실행되는데 여기서 새로운 속성인
classList.toggle('hideMenu')을 사용한 것을 볼 수 있어.
이것은 미리 선언된 스타일 중에서 특정(여기서는 hideMenu) 이름의 클래스를 적용했다, 뺐다를 반복하는 메소드야.
즉 처음에는 클래스의 속성이 display:none 이니 안보이는데 classList.toggle('hideMenu');를 하고 나면 이 스타일 속성이 없어져.
그럼 당연히 보이겠지?
다시 버튼을 누르면 이 속성이 없으니까 다시 생겨. 즉 display:none 속성이 다시 들어가니 다시 안 보이게 되겠지?
이렇게 미리 지정한 스타일을 넣었다,뺐다 하는 기능이 바로
classList.toggle() 이야.
이미 짐작하겠지만 이 classList 속성에는 toggle() 만 있는 것이 아니고
add( ),
remove( ) 도 있어.
이름만 봐도 어떤 기능인지 알겠지?
classList.add('클래스')는 요소에 지정한 스타일을 입히는 것이고, classList.remove('클래스')는 요소에 적용되어 있는 스타일을 모두 벗겨 내.
classList.toggle('클래스')는 입혔다, 벗겼다 하는 역할이고..
위 코드를 이용한 데모는 아래 링크에서 확인해 보도록 해.
http://yogibbs.kr/jsDemo/toggle1-vanilla.html