← 목록

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

작성: 2024년 09월 03일읽기: 약 2분
GPTLLM

웹 개발 세계에서 DOM(Document Object Model) 조작은 마법 같은 일을 할 수 있게 해줍니다. 오늘은 이 마법을 이용해 인스타그램 사진에 필터를 적용하는 방법을 배워보겠습니다. 복잡하게 들릴 수 있지만, 걱정 마세요! 단계별로 쉽게 설명해 드리겠습니다.

1단계: HTML 구조 만들기

먼저, 우리의 프로젝트에 기본이 될 HTML 구조를 만들어야 합니다. 아래는 간단한 예시입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>사진 필터링</title>
</head>
<body>
    <img id="photo" src="your-photo.jpg" alt="인스타그램 사진">
    <button id="filter-btn">필터 적용하기</button>

    <script src="script.js"></script>
</body>
</html>

2단계: JavaScript를 이용한 DOM 조작

이제 JavaScript를 사용하여 사진에 필터를 적용할 수 있도록 합시다. script.js 파일을 만들고 아래 코드를 추가하세요.

document.getElementById('filter-btn').addEventListener('click', function() {
    var photo = document.getElementById('photo');
    photo.style.filter = 'grayscale(100%)';
});

위 코드는 "필터 적용하기" 버튼을 클릭할 때마다 선택한 사진을 회색조로 만듭니다. grayscale(100%) 대신 다른 CSS 필터 값을 사용하여 다양한 효과를 실험해 볼 수 있습니다. 예를 들어, sepia(50%)는 사진에 세피아 톤을 추가합니다.

3단계: 실험하기

DOM 조작의 아름다움은 그 유연성에 있습니다. 다양한 CSS 필터를 조합하여 원하는 사진 효과를 만들어보세요. 예를 들어, 다음과 같이 코드를 변경할 수 있습니다.

document.getElementById('filter-btn').addEventListener('click', function() {
    var photo = document.getElementById('photo');
    photo.style.filter = 'contrast(200%) brightness(150%)';
});

이 코드는 사진의 대비를 높이고 밝기를 증가시켜 더욱 눈에 띄는 효과를 만듭니다.

마무리

DOM 조작을 이용해 인스타그램 사진에 필터를 적용하는 방법을 배웠습니다. 이 기술을 사용하면 웹 페이지에 동적인 변화를 줄 수 있으며, 사용자 경험을 향상시킬 수 있습니다. 지금까지 배운 내용을 바탕으로 다양한 프로젝트에 도전해보세요. Happy coding! 🎉