JavaScript를 사용하여 텍스트를 흐리게하고 다시 정상적으로 만드는 간단한 예제 코드입니다.

JavaScript를 사용하여 텍스트를 흐리게하고 다시 정상적으로 만드는 간단한 예제 코드입니다.

<!-- HTML 코드 -->
<p id="blurry-text">안녕하세요, 이 텍스트는 흐릿합니다.</p>
<button onclick="blurText()">텍스트를 흐리게 만들기</button>
<button onclick="unblurText()">텍스트를 다시 정상으로 만들기</button>

 

// JavaScript 코드
function blurText() {
  const blurryText = document.getElementById("blurry-text");
  blurryText.style.filter = "blur(5px)";
}

function unblurText() {
  const blurryText = document.getElementById("blurry-text");
  blurryText.style.filter = "none";
}

 

이 코드에서는 먼저 HTML에서 ID가 "blurry-text"인 요소를 선택합니다. 그런 다음 "텍스트를 흐리게 만들기" 버튼을 클릭하면 blurText() 함수가 호출되어 해당 요소의 스타일 속성을 변경하여 텍스트를 흐리게 만듭니다. 이를 위해 CSS의 filter 속성을 사용하며, 여기서 blur 함수를 사용하여 흐림 효과를 적용합니다.

반대로 "텍스트를 다시 정상으로 만들기" 버튼을 클릭하면 unblurText() 함수가 호출되어 해당 요소의 스타일 속성을 다시 초기화하여 텍스트를 다시 정상적으로 만듭니다. 이를 위해 filter 속성을 "none"으로 설정하여 어떤 필터도 적용하지 않습니다.

 

 jQuery를 사용하여 텍스트를 흐리게하고 다시 정상적으로 만드는 예제 코드입니다.

 

<!-- HTML 코드 -->
<p id="blurry-text">안녕하세요, 이 텍스트는 흐릿합니다.</p>
<button id="blur-button">텍스트를 흐리게 만들기</button>
<button id="unblur-button">텍스트를 다시 정상으로 만들기</button>

 

// jQuery 코드
$(document).ready(function() {
  // "텍스트를 흐리게 만들기" 버튼 클릭 이벤트 핸들러
  $("#blur-button").click(function() {
    $("#blurry-text").css("filter", "blur(5px)");
  });

  // "텍스트를 다시 정상으로 만들기" 버튼 클릭 이벤트 핸들러
  $("#unblur-button").click(function() {
    $("#blurry-text").css("filter", "none");
  });
});

 

이 코드에서는 먼저 $(document).ready() 함수를 사용하여 페이지가 완전히 로드된 후에 jQuery 코드를 실행합니다.

그런 다음 "텍스트를 흐리게 만들기" 버튼과 "텍스트를 다시 정상으로 만들기" 버튼을 선택하여 각각의 클릭 이벤트에 대한 핸들러를 등록합니다. 이 핸들러는 각 버튼을 클릭할 때 실행되며, $("#blurry-text")를 사용하여 ID가 "blurry-text"인 요소를 선택합니다. 그런 다음 .css() 메소드를 사용하여 해당 요소의 스타일 속성을 변경하여 텍스트를 흐리게 만들거나 다시 정상적으로 만듭니다.

이 코드는 JavaScript 코드보다 간단하고 직관적인 jQuery 코드를 사용하므로 jQuery를 사용하는 경우 더욱 쉽게 코드를 작성할 수 있습니다.

 

 

 jQuery를 사용하여 텍스트를 흐리게하고 다시 정상적으로 만들어 토글 기능을 구현하는 예제 코드입니다.

 

<!-- HTML 코드 -->
<p id="blurry-text">안녕하세요, 이 텍스트는 흐릿합니다.</p>
<button id="blur-toggle">텍스트를 흐리게 만들기/다시 정상으로 만들기</button>

 

// jQuery 코드
$(document).ready(function() {
  // "텍스트를 흐리게 만들기/다시 정상으로 만들기" 버튼 클릭 이벤트 핸들러
  $("#blur-toggle").click(function() {
    $("#blurry-text").toggleClass("blur");
  });
});

 

이 코드에서는 HTML 코드가 이전과 동일하며, jQuery 코드도 이전에 소개한 코드와 크게 다르지 않습니다. 하지만 이번에는 toggleClass() 메소드를 사용하여 토글 기능을 구현합니다.

 

이 메소드는 클래스 이름을 매개변수로 받아 해당 요소에 클래스가 없으면 클래스를 추가하고, 클래스가 이미 있으면 클래스를 제거합니다. 따라서 "텍스트를 흐리게 만들기/다시 정상으로 만들기" 버튼을 클릭할 때마다 #blurry-text 요소의 blur 클래스가 토글됩니다.

 

따라서 CSS를 사용하여 .blur 클래스를 정의하면 됩니다.

 

/* CSS 코드 */
.blur {
  filter: blur(5px);
}

 

이렇게하면 텍스트를 흐리게 만들 때 사용한 이전 예제와 같은 방법으로 .blur 클래스를 사용하여 텍스트를 흐리게 만들 수 있습니다. 이 예제에서는 토글 기능을 구현했으므로 "텍스트를 흐리게 만들기/다시 정상으로 만들기" 버튼을 클릭하면 텍스트가 흐리게 만들어지거나 다시 정상적으로 표시됩니다.