이미지 크기를 동적으로 조절하는 것은 웹 개발에서 흔히 사용되는 작업입니다. 자바스크립트를 사용하여 이미지 크기를 조절하는 방법 중 하나는 Ternary 연산자를 이용하는 것입니다. Ternary 연산자는 if-else 문을 간단하게 표현할 수 있는 방법입니다.
Ternary 연산자란?
Ternary 연산자는 조건문을 간단하게 처리할 수 있는 연산자입니다. 일반적인 if-else 문과 마찬가지로 조건을 검사하고 조건이 참인 경우와 거짓인 경우에 실행할 내용을 지정할 수 있습니다.
Ternary 연산자의 구조는 다음과 같습니다.
condition ? expression1 : expression2;
condition: 조건을 표현하는 부분입니다.expression1: 조건이 참일 때 실행될 표현식입니다.expression2: 조건이 거짓일 때 실행될 표현식입니다.
이미지 크기 조절 예제
다음은 Ternary 연산자를 사용하여 자바스크립트에서 이미지 크기를 조절하는 예제입니다. 이미지의 크기를 동적으로 설정하고, 이미지가 특정 조건을 충족하는 경우에만 크기를 변경하고자 할 때 사용할 수 있습니다.
const imageElement = document.querySelector('img');
const isMobile = window.innerWidth <= 600; // 현재 디바이스가 모바일인지 확인
const imageSize = isMobile ? 'small' : 'large'; // 모바일이면 'small', 아니면 'large'로 크기 설정
imageElement.src = `path/to/image_${imageSize}.jpg`; // 이미지 경로 설정
위 예제에서는 먼저 querySelector 함수를 사용하여 이미지 엘리먼트를 선택합니다. 그런 다음 window.innerWidth를 사용하여 현재 디바이스의 너비를 확인합니다. isMobile 변수에는 디바이스가 모바일인지 아닌지에 대한 결과를 저장합니다.
이후 Ternary 연산자를 사용하여 isMobile 변수의 값에 따라 imageSize 변수를 설정합니다. 만약 isMobile 변수 값이 true이면 'small'로, false이면 'large'로 설정됩니다.
마지막으로 imageElement.src를 사용하여 이미지의 경로를 설정합니다. imageSize 변수의 값에 따라 이미지 파일 이름이 동적으로 생성되어 크기에 맞는 이미지가 로드되게 됩니다.
이렇게 Ternary 연산자를 사용하여 자바스크립트에서 이미지 크기를 동적으로 조절할 수 있습니다.
결론
Ternary 연산자는 자바스크립트에서 간단하게 조건문을 처리할 수 있는 유용한 기능입니다. 이미지 크기 조절과 같이 조건에 따라 동적으로 값을 설정해야 할 때 유용하게 활용할 수 있습니다. 코드를 간결하게 작성하고 가독성을 높여주는 Ternary 연산자를 활용하여 자바스크립트 프로그래밍을 보다 효율적으로 할 수 있습니다.