DOM 조작을 활용한 인스타그램 사진 필터링 📸

웹 개발에 관심이 많은 주니어 개발자 여러분, 인스타그램에서 사진 필터링 기능을 구현하는 방법을 배워보고 싶지 않으신가요? 오늘은 바로 그 방법을 DOM 조작을 통해 알아보려고 합니다. 복잡한 코드 없이도 우리는 멋진 결과물을 만들 수 있습니다!

DOM이란 무엇인가요?

DOM(Document Object Model)은 웹 페이지의 객체 지향 표현 방식입니다. 쉽게 말해, 웹 페이지의 모든 요소(HTML 태그)를 객체로 다룰 수 있게 해줍니다. 이를 통해 JavaScript를 사용하여 웹 페이지의 구조, 스타일, 내용 등을 동적으로 변경할 수 있습니다.

사진 필터링 기능 구현하기

사진 필터링 기능을 구현하기 위해, 우리는 먼저 HTML에서 이미지를 표시할 <img> 태그와 필터를 적용할 버튼들이 필요합니다. 예를 들어, 흑백 필터와 세피아 필터를 적용해보겠습니다.

<img id="photo" src="your-photo.jpg" alt="Your Photo">

<button onclick="applyFilter('grayscale')">흑백 필터</button>
<button onclick="applyFilter('sepia')">세피아 필터</button>

이제 JavaScript를 사용하여 applyFilter 함수를 구현해봅시다. 이 함수는 선택된 필터에 따라 이미지에 CSS 스타일을 적용합니다.

function applyFilter(filter) {
    var photo = document.getElementById('photo');

    switch(filter) {
        case 'grayscale':
            photo.style.filter = 'grayscale(100%)';
            break;
        case 'sepia':
            photo.style.filter = 'sepia(100%)';
            break;
        default:
            photo.style.filter = '';
    }
}

위 코드에서 document.getElementById('photo')는 HTML에서 id가 photo인 요소, 즉 우리의 이미지를 찾아서 변수 photo에 저장합니다. 그리고 photo.style.filter를 통해 CSS 필터 스타일을 동적으로 변경합니다. 'grayscale(100%)'은 이미지를 흑백으로 만들고, 'sepia(100%)'는 세피아 톤을 적용합니다.

마무리

여기까지, DOM 조작을 활용하여 간단한 인스타그램 사진 필터링 기능을 구현하는 방법을 알아보았습니다. 이처럼 JavaScript와 DOM을 이용하면, 웹 페이지에 동적인 변화를 줄 수 있으며 사용자와의 상호작용을 향상시킬 수 있습니다.

이 기술을 활용하여 여러분만의 개성 있는 웹 페이지를 만들어보세요. 실험을 통해 배우는 것이 가장 좋은 학습 방법입니다. 행운을 빕니다! 🚀