이미지 심도 효과

소개

이 프로젝트에서는 JavaScript 를 사용하여 이미지에 동적으로 심도 효과 (depth of field effect) 를 적용하는 방법을 배우게 됩니다. 심도 효과는 사진 및 웹 디자인에서 널리 사용되는 시각적 기법으로, 이미지의 전경은 흐릿하게 처리하고 배경은 선명하게 유지합니다.

👀 미리보기

🎯 과제

이 프로젝트에서는 다음을 배우게 됩니다:

• JavaScript 를 사용하여 이미지를 동적으로 선택하고 조작하는 방법
• 특정 이미지에 흐림 효과를 적용하여 심도를 만드는 방법
• JavaScript 를 사용하여 HTML 요소의 CSS 속성을 수정하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

• JavaScript 를 사용하여 이미지에 심도 효과를 적용할 수 있습니다.
• DOM (Document Object Model) 의 중요성과 JavaScript 를 사용하여 DOM 과 상호 작용하는 방법을 이해할 수 있습니다.
• 심도 효과의 개념과 웹 페이지의 시각적 매력을 향상시키는 데 어떻게 사용할 수 있는지 설명할 수 있습니다.

프로젝트 구조 설정

웹 페이지를 탐색하다가 아래와 같은 효과를 본 적이 있습니까?

이미지의 전경은 흐릿하고 배경은 선명한 것을 볼 수 있습니다. 우리는 이 효과를 "심도 (Depth of Field)"라고 부릅니다.

위의 효과를 구현하기 전에 실험 환경을 열고, 디렉토리 구조는 다음과 같습니다.

├── images
├── index.html
└── style.css

• images는 이미지 폴더입니다.
• index.html은 메인 페이지입니다.
• style.css는 스타일 파일입니다.

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고치면 페이지가 표시됩니다.

그러면 다음과 같은 효과가 나타납니다 (기본적으로 모든 이미지가 흐릿하게 처리됩니다):

이미지에 심도 효과 추가

이 단계에서는 JavaScript 를 사용하여 이미지에 동적으로 심도 효과를 추가하는 방법을 배우게 됩니다.

1. 코드 편집기에서 index.html 파일을 엽니다.
2. HTML 파일 하단의 <script> 섹션을 찾습니다.
3. <script> 섹션 내에 다음 코드를 추가하여 이미지에 심도 효과를 적용합니다:

document.querySelector(".img1").style.filter = "blur(0px)";
document.querySelector(".img2").style.filter = "blur(0px)";

이 코드는 사람과 단풍 숲 이미지에서 흐림 효과를 제거하여 선명하게 만듭니다.

4. index.html 파일을 저장하고 페이지를 새로 고칩니다. 이제 사람과 단풍 숲은 선명하게, 다른 이미지는 흐릿하게 처리되어 이미지에 심도 효과가 적용된 것을 볼 수 있습니다.

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.