JavaScript에서 깜박이는 텍스트를 만들려면 blink() 메서드를 사용하면 됩니다. 이 메서드는 문자열을 마치 HTML의 <BLINK> 태그로 감싼 것처럼 화면에서 깜박이게 만듭니다.
참고: HTML <blink> 태그는 이미 폐기(deprecated)된 상태이며, 모든 브라우저에서 정상적으로 작동한다고 보장할 수 없습니다. 따라서 실무에서는 CSS 애니메이션을 활용한 대체 구현을 권장합니다.
blink() 메서드 예제
아래 코드를 실행하면 JavaScript의 blink() 메서드를 사용해 깜박이는 텍스트를 직접 확인할 수 있습니다.
<html>
<head>
<title>JavaScript String blink() Method</title>
</head>
<body>
<script>
var str = new String("Demo Text");
document.write(str.blink());
document.write("<br><br> Note: HTML <blink> tag deprecated and is not expected to work in every browser.")
</script>
</body>
</html>CSS를 활용한 대체 방법
<blink> 태그와 blink() 메서드가 지원되지 않는 최신 브라우저 환경에서는 CSS 애니메이션으로 동일한 효과를 구현하는 것이 좋습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.blink {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% { opacity: 0; }
}
</style>
</head>
<body>
<p class="blink">Demo Text</p>
</body>
</html>이처럼 CSS의 @keyframes와 opacity 속성을 조합하면 브라우저 호환성 문제 없이 안정적으로 깜박임 효과를 적용할 수 있습니다.