이번에는 전에 배웠던 보였다, 감췄다 하는 토글(toggle) 기능에 효과를 한 번 줘 볼거야.
메뉴를 선택하면 스르륵~ 열리고, 스르륵~ 닫히는거..
이미 여러분들도 웹서핑하면서 수 없이 많이 보았을 거야.
이 효과를 위해서는 css 의
transition 이라는 키워드를 사용해.
transition 을 영어사전에서 찾으면
"(다른 상태·조건으로의) 이행(移行)"으로 나와.
즉
A라는 상태에서 B라는 상태로 변경되는 과정이라는 뜻이지.
이 과정을 바로 변경하는 것이 아니고 지정한 시간동안 부드럽게 변경하는데 사용하는 것이 transition 이야
이 transition 은 선택한 요소의 class나 id에 다음과 같은 스타일 속성을 적어서 사용해.
transition: 대상속성 이행시간 (효과종류) (대기시간)
이 transition 으로 효과를 줄 수 있는 대상 스타일 속성은 아래와 같아.
- 위치: top, left, bottom, right
- 크기: width, height
- 박스: margin, padding
- 테두리: border-width, border-radius, border-color
- 색상: color, background-color
- 투명도: opacity
- 변환: transform
무슨 말인지 잘 모르겠지?
이 transition을 이용한 효과는 css 의 역할이야.
한 번 css 만으로 효과를 구현해 볼까?
아래 코드를 잘 살펴봐.
....
<style>
.box {
width: 100px;
height: 100px;
background: red;
transition: 2s;
}
.box:hover {
width: 200px;
height: 300px;
background: blue;
}
</style>
<body>
<div class="box"></div>
</body>
body 내용에 box가 하나 있는데 기본 스타일은 기본은 가로100px, 세로100px, 빨간색이야.
그런데 box:hover를 이용해서 마우스를 이 박스 위에 올리면 가로200px, 세로300px, 파란색으로 변하도록 되어 있어.
그리고 box 클래스의 마지막 줄에
transition: 2s; 라는 속성을 지정했어.
즉 크기와 색상의 변화를 2초에 걸쳐 하라는 거야. 이것은 2000ms 와 같이 ms를 사용해서 밀리초로 표시할 수도 있어.
그런데 2s 앞에 대상속성을 지정하지 않았기 때문에 모든 속성(가로,세로,색상)을 다 대상으로 할거야.
속성별로 각각 따로 변화를 주는 방법도 있어.
예를들어 transition:width 2s, height 3s 이렇게 컴마로 구분해서 속성별 시간을 지정할 수도 있어.
자세한 내용은 맨 아래에서 링크로 알려줄께.
위 코드의 실행화면은 아래 링크에서 확인할 수 있어.
http://yogibbs.kr/jsDemo/transition.html
이제 다시 자바스크립트로 돌아 가자구.
transition 은 css의 기능이지만 자바스크립트와 결합해서 더 다양하게 사용돼.
앞서 배운 메뉴 토글에 적용해 볼까?
아래 코드를 보자구.
....
<div id="subMenu" style="height:0; transition:height 2000ms; overflow:hidden;">
<hr>
<ul>
<li><a href="#">만두소개</a></li>
<li><a href="#">오시는길</a></li>
</ul>
</div>
....
<script>
function toggle() {
let m = document.querySelector('#subMenu');
if (m.style.height == "0px") {
m.style.height = "120px";
} else {
m.style.height = "0px";
}
}
</script>
코드를 보면 부메뉴를 담당하는 subMenu div는 높이가 0px이야.
그러니 보이지 않겠지?
지금까지는 감추기를 위해서 display:none 를 사용했지만, 이런 방법(height:0px)으로 감출 수도 있어.
그리고 스타일에 transition:height 2000ms 을 지정했어. 즉 높이 속성이 변경되면 2초(2000ms)에 걸쳐서 천천히 변경하라는 뜻이야.
맨 뒤의 overflow:hidden;은 이 div 안의 내용이 지정한 크기를 넘는 것은 감추라는 뜻이야.
만약 이 속성이 없다면 부메뉴의 내용이 다 보이게 될거야.
이제 아래 자바스크립트 코드를 보면 subMenu 박스의 높이(height)가 0px 이면 120px 로 바꾸고, 아니면 다시 0px로 변경하라는 명령이야.
이전 학습에서는 display == 'none' 로 했던 조건을 높이로 바꾼 거야.
왜 height 속성을 사용했냐구?
transition 속성은 display 에는 적용되지 않거든.
이제 [메뉴] 버튼을 클릭해서 toggle() 함수를 실행하면 처음에는 높이가 0 이었던 subMenu 박스가 120px로 바뀔거야.
그런데 transition 에 height는 2초에 걸쳐서 변경하라고 했기 때문에 천천히 펼쳐지는 효과로 보이게 될거야.
위 코드는 아래 링크에서 직접 확인해 볼 수 있어.
링크 페이지를 보고 꼭 Ctrl-U 핫키로 소스의 내용도 확인해 보도록 해.
http://yogibbs.kr/jsDemo/toggle2-vanilla.html
어때? 부드럽게 열리고 닫히지?
그런데 자세히 보면 여기는 또 다른 문제가 있어.
이전의 display를 사용한 showHide 함수와는 달리 부메뉴가 펼쳐졌을때 세로 아래 부분이 남아.
왜 그럴까?
이것은 초기 div 박스가 0px 로 되어 있기 때문에 다 보였을 때의 높이를 알 수 없기 때문이야.
박스의 크기가 정해져 있는 요소에서는 위 방법이 제일 쉽지만, 내용에 따라 크기가 달라지는 박스는 어떻게 할까?
바로 자바스크립트의 또 다른 명령들과 속성을 이용해서 열렸을 때의 크기를 알아낼 수 있어.
다음 장을 또 봐야겠지?
세상에 쉬운 게 없어...ㅠ
transition 에 대해서 좀 더 자세히 알고 싶은 학생은 아래 링크를 참조해 보도록 해.
내가 공부하면서 찾아 보았던 링크들이야.
https://blog.naver.com/minhyupp/222142052947
https://sisiblog.tistory.com/288
https://ko.javascript.info/css-animations