윈도우 크기 변경 이벤트는 웹 개발에서 자주 사용되는 기능 중 하나입니다. 자바스크립트를 사용하여 윈도우의 크기가 변경되었을 때 원하는 작업을 수행할 수 있습니다. 이 글에서는 자바스크립트의 ternary 연산자를 사용하여 윈도우 리사이즈 이벤트를 처리하는 방법에 대해 알아보겠습니다.

윈도우 리사이즈 이벤트

윈도우 리사이즈 이벤트는 윈도우의 크기가 변경될 때 발생하는 이벤트입니다. 이를 통해 웹 페이지의 요소를 동적으로 조정하거나, 반응형 디자인을 구현할 수 있습니다. 일반적으로 window 객체의 resize 이벤트를 사용하여 윈도우 리사이즈 이벤트를 감지할 수 있습니다.

window.addEventListener('resize', function(event) {
    // 리사이즈 이벤트 발생 시 실행될 코드
});

Ternary 연산자

자바스크립트의 ternary 연산자는 간단한 조건문을 한 줄로 표현할 수 있는 방법입니다. 다음은 ternary 연산자의 구조입니다.

조건식 ? 참일 때 결과 : 거짓일 때 결과;

조건식이 참일 경우 참일 때 결과가 반환되고, 거짓일 경우 거짓일 때 결과가 반환됩니다. 이를 사용하여 윈도우 리사이즈 이벤트에서 두 가지 동작을 처리할 수 있습니다.

Ternary 연산자로 윈도우 리사이즈 이벤트 처리하기

다음은 ternary 연산자를 사용하여 윈도우 리사이즈 이벤트를 처리하는 예시입니다. 윈도우의 너비가 600px보다 크면 “큰 화면”을 출력하고, 그렇지 않으면 “작은 화면”을 출력하는 코드입니다.

window.addEventListener('resize', function(event) {
    var screenWidth = window.innerWidth;
    var message = screenWidth > 600 ? "큰 화면" : "작은 화면";
    console.log(message);
});

위 코드에서 screenWidth 변수에는 현재 윈도우의 너비가 저장되고, ternary 연산자를 사용하여 너비가 600px보다 큰지 작은지를 확인합니다. 결과에 따라 message 변수에 다른 문자열이 저장되고, 해당 메시지가 콘솔에 출력됩니다.

이렇게 ternary 연산자를 사용하면 윈도우 너비에 따라 다른 동작을 처리하는 코드를 간결하게 작성할 수 있습니다.

결론

자바스크립트의 ternary 연산자를 사용하면 윈도우 리사이즈 이벤트를 간결하게 처리할 수 있습니다. 윈도우의 크기에 따라 다른 동작을 수행하고 싶을 때, ternary 연산자를 활용하여 원하는 작업을 수행할 수 있습니다. 이를 통해 웹 페이지의 반응형 디자인을 쉽고 효율적으로 구현할 수 있습니다.

#javascript #윈도우리사이즈