CSS 미디어 쿼리를 사용하여 웹 페이지의 스타일을 다양한 스크린 크기에 맞게 조정하는 것은 일반적인 개발 작업입니다. 자바스크립트를 사용하여 동적으로 스타일을 변경하는 경우에도 이를 수행할 수 있습니다. 이번 글에서는 자바스크립트의 ternary 연산자를 활용하여 미디어 쿼리에 따른 스타일 변경을 어떻게 구현할 수 있는지 알아보겠습니다.

미디어 쿼리와 자바스크립트

CSS 미디어 쿼리는 다양한 스크린 크기와 장치에 대한 스타일을 적용하기 위해 사용됩니다. 일반적으로는 CSS 파일 내에서 미디어 쿼리를 작성하고, 해당 스타일을 적용하는 방식으로 사용됩니다. 그러나 때로는 자바스크립트를 사용하여 동적으로 스타일을 조정하는 것이 유용할 수 있습니다.

Ternary 연산자

Ternary 연산자는 조건문을 표현하는데 사용되며, 자바스크립트에서 다음과 같은 형태로 작성됩니다.

condition ? valueIfTrue : valueIfFalse

condition이 참일 경우 valueIfTrue가 반환되고, condition이 거짓일 경우 valueIfFalse가 반환됩니다.

자바스크립트 Ternary 연산자로 미디어 쿼리에 따른 스타일링 구현

자바스크립트의 Ternary 연산자를 사용하여 미디어 쿼리에 따라 다른 스타일을 적용하는 방식은 다음과 같습니다.

const element = document.querySelector('#example-element');

const screenWidth = window.innerWidth;

const isSmallScreen = screenWidth < 768;

isSmallScreen ? element.style.backgroundColor = 'red' : element.style.backgroundColor = 'blue';

위의 예시에서는 window.innerWidth를 사용하여 현재 스크린의 너비를 가져온 후, 이를 기준으로 작은 스크린인지 아닌지 판단합니다. 만약 스크린의 너비가 768보다 작다면 isSmallScreen 변수에 true가 할당됩니다. 이후 ternary 연산자를 사용하여 isSmallScreen이 true인 경우에는 빨간색으로, false인 경우에는 파란색으로 배경색을 설정하게 됩니다.

이렇게 자바스크립트의 ternary 연산자를 활용하여 미디어 쿼리에 따른 스타일링을 구현할 수 있습니다.

마무리

자바스크립트의 ternary 연산자를 활용하여 미디어 쿼리에 따른 스타일 변경을 간편하게 구현할 수 있습니다. 이를 활용하여 다양한 스크린 크기에 따라 웹 페이지의 레이아웃을 유연하게 조정할 수 있습니다.

참고 링크:

• CSS Media Queries
• Ternary Operator

#javascript #css