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

웹 개발에 관심 있는 주니어 개발자 여러분, 인스타그램에서 사진을 더 돋보이게 만들고 싶으신가요? DOM(Document Object Model) 조작을 통해 우리만의 사진 필터 기능을 만들어 보겠습니다. 복잡한 코드 없이도 멋진 결과를 얻을 수 있어요!

DOM이란 무엇인가요?

DOM은 웹 페이지를 구성하는 요소들을 트리 구조로 나타내는 방식입니다. 이를 통해 자바스크립트로 HTML 요소를 쉽게 찾아서 수정할 수 있죠. 예를 들어, 이미지의 크기를 변경하거나, 색상을 조정하는 것이 가능합니다.

사진 필터막 만들기 시작하기

사진에 필터를 적용하기 위해, 우선 HTML에서 이미지를 선택하는 것부터 시작해봅시다.

<img id="myPhoto" src="photo.jpg" alt="인스타그램 사진">

이제 자바스크립트를 사용하여 이 이미지에 접근하고, 필터를 적용해볼게요.

// 이미지 요소 선택
var img = document.getElementById('myPhoto');

// 이미지에 그레이스케일 필터 적용
img.style.filter = 'grayscale(100%)';

위 코드는 이미지를 선택하고, 그 이미지에 그레이스케일 필터를 적용합니다. grayscale(100%)은 이미지를 완전히 흑백으로 만듭니다.

다양한 필터 적용하기

그레이스케일 말고도 다양한 필터를 적용할 수 있습니다. 예를 들어, 이미지에 세피아 톤을 추가하거나, 밝기를 조절할 수 있죠.

// 세피아 톤 적용
img.style.filter = 'sepia(60%)';

// 밝기 조절
img.style.filter = 'brightness(150%)';

여러분이 원하는 대로 필터를 조합하여 사용할 수 있습니다. 예를 들어, 세피아 톤과 밝기를 동시에 조절하고 싶다면, 아래와 같이 코드를 작성하면 됩니다.

img.style.filter = 'sepia(60%) brightness(150%)';

마무리

DOM 조작을 이용하면, 코드 몇 줄만으로도 인스타그램 사진에 멋진 필터 효과를 적용할 수 있습니다. 이 기술을 활용하여 여러분의 웹 페이지에 독특한 시각적 효과를 추가해보세요. 주니어 개발자 여러분, 이제 여러분의 창의력을 발휘할 차례입니다! 🚀

이렇게 간단한 코드를 통해 사진 필터링 기능을 구현하는 방법을 배워보았습니다. DOM 조작은 웹 개발에서 매우 유용하게 사용되는 기술이니, 이 기회에 잘 익혀두시면 좋겠습니다. Happy coding!