CSS 및 JavaScript를 사용하여 텍스트 깜박임 만들기

  2. 어떻게
  3. CSS 하우투
  4. CSS 및 JavaScript를 사용하여 텍스트 깜박임 만들기
Neha Imran 2023년6월20일
CSS CSS Text
  1. HTML에서 텍스트 깜박임
  2. 내부 또는 포함된 CSS를 사용하여 텍스트 깜박임 만들기
  3. 인라인 CSS를 사용하여 텍스트 깜박임 만들기
  4. 외부 CSS를 사용하여 텍스트 깜박임 만들기
  5. JavaScript를 사용하여 텍스트 깜박임 만들기
  6. JQuery를 사용하여 텍스트 깜박임 만들기
  7. JavaScript를 사용하여 페이지의 여러 섹션에서 깜박이는 텍스트 만들기
  8. CSS를 사용하여 번갈아 깜박이는 텍스트 만들기
CSS 및 JavaScript를 사용하여 텍스트 깜박임 만들기

이 기사에서는 깜박임/깜박임 텍스트를 자세히 살펴볼 것입니다. 우리는 그 목적과 이점을 볼 것입니다.

웹 사이트에서 깜박이는 텍스트를 구현하는 수많은 전략과 기술을 배웁니다. 깜박임 텍스트를 구현하기 위해 내부 CSS, 인라인 CSS, 외부 CSS, JavaScript 및 jQuery를 탐색합니다.

HTML에서 텍스트 깜박임

깜박임 텍스트는 깜박이는 텍스트 유형입니다. 쇼핑 웹사이트에서 깜박이는 판매 아이콘이나 깜박이는 스타일의 새 컬렉션 배너를 볼 수 있습니다.

사용자의 관심을 끌기 위한 효과적인 전략입니다. HTML은 이 기능에 대해 <blink> 태그를 제공합니다. 그러나 브라우저는 더 이상 이를 지원하지 않으므로 더 이상 사용되지 않는 태그입니다.

태그를 사용하지 않고 이 기능을 수행하는 다양한 방법을 살펴보겠습니다.

내부 또는 포함된 CSS를 사용하여 텍스트 깜박임 만들기

내부 CSS는 HTML style 태그 내에 포함됩니다. 태그에는 모든 CSS 속성을 포함할 수 있습니다.

아래 코드를 보고 내부 CSS를 사용하여 깜박이는 텍스트를 만드는 방법을 알아보세요.

<html>
    <head>
        <style>
            .blink {
                animation: blinker 1s linear infinite;
            }

            @keyframes blinker
            {
              50% {
                  opacity: 0;
                }
            }
        </style>
    </head>
    <body>
        <div class="blink">Internal CSS Blink !</div>
    </body>
</html>

이것은 텍스트를 깜박이게 만드는 가장 간단한 방법 중 하나입니다. 우리는 약간의 스타일링을 했고 작업이 완료되었습니다.

일부 CSS 용어는 생소할 수 있지만 걱정하지 마십시오. 각 용어의 의미를 자세히 살펴보겠습니다.

애니메이션 속성

애니메이션을 적용하기 위해 blink 클래스에 CSS의 animation 속성을 사용했습니다. 애니메이션 속성은 다음의 줄임말입니다.
animation-name 애니메이션의 이름을 지정합니다.
animation-duration 애니메이션이 한 주기를 완료하는 데 걸리는 시간을 정의합니다.
animation-timing-function 애니메이션 시작부터 끝까지 속도 곡선을 지정합니다.
animation-delay 애니메이션 시작 대기를 지정합니다.
animation-iteration-count 애니메이션을 재생해야 하는 횟수를 지정합니다.
animation-direction 애니메이션의 방향(예: 앞으로, 뒤로 또는 앞뒤로 번갈아 가며)을 지정합니다.
animation-fill-mode CSS 애니메이션이 실행 전후에 대상에 스타일을 적용하는 방법을 나타냅니다.
animation-play-state 애니메이션이 실행 중인지 또는 일시 중지되었는지 지정합니다.

이제 코드에 작성한 내용을 이해하겠습니다. 위 코드에서 애니메이션은 다음 속성을 보유합니다.

  1. blinker는 애니메이션 이름입니다.
  2. 1s는 animation-duration이며 각 주기가 1초 후에 완료됨을 의미합니다.
  3. 선형은 애니메이션 타이밍 기능이며 애니메이션이 처음부터 끝까지 동일한 속도로 재생됨을 의미합니다.
  4. infinite는 animation-iteration-count,이며 애니메이션이 무제한으로 재생됨을 의미합니다.

전체 정보를 요약하면 애니메이션 blinker가 1초 동안 동일한 속도로 무한히 여러 번 실행된다는 결론을 내렸습니다.

키프레임

CSS에서 @keyframes는 애니메이션 규칙을 정의합니다. 변경 가능한 CSS 스타일은 애니메이션을 만드는 데 사용됩니다.

애니메이션 중에 여러 CSS 속성이 변경될 수 있습니다. 스타일 변경이 백분율로 발생하거나 0% 및 100%에 해당하는 from 및 to 구문을 포함하는 시기를 결정해야 합니다. 0%는 시작을 나타내고 100%는 완료를 나타냅니다.

최상의 브라우저 지원을 위해 항상 0% 및 100% 선택기를 지정하십시오. 기사의 뒷부분에서 볼 수 있습니다.

키프레임의 CSS 구문은 다음과 같습니다.

@keyframes animation-name {*keyframes-selector* {*css-styles;}*}

코드에서 수행한 작업을 살펴보겠습니다.

애니메이션 blinker에 키프레임을 배치하고 50%에서 불투명도가 0이 되도록 지정합니다. 요소의 투명도는 opacity 속성을 통해 설정됩니다.

불투명도 속성 값은 엄격하게 0에서 1 사이여야 합니다.

CSS 공급업체 접두사

CSS 속성에 추가된 고유한 접두사를 공급업체 접두사라고 합니다. 이전 브라우저 버전에서 지원하지 않는 여러 CSS 속성이 있으므로 이러한 태그를 지원하려면 브라우저 접두사를 사용해야 합니다.

해당 특정 브라우저에만 특성을 적용하는 각 렌더링 엔진에 대한 접두사가 있습니다.

  • Internet Explorer, Microsoft Edge: -ms-
  • 크롬, 사파리, iOS, 안드로이드: -webkit-
  • 파이어폭스: -moz-
  • 오페라: -o-

가능한 한 많은 브라우저에서 작동하도록 위에서 설명한 코드를 다시 작성해 보겠습니다.

<html>
    <head>
        <style>
            .blink {
                -webkit-animation: blinker 1s linear infinite;
                -moz-animation: blinker 1s linear infinite;
                -ms-animation: blinker 1s linear infinite;
                -o-animation: blinker 1s linear infinite;
                 animation: blinker 1s linear infinite;
            }

            @-webkit-keyframes 'blinker' {

                0% {
                    opacity: 1;
                }

                50% {
                    opacity: 0;
                }

                100% {
                    opacity: 1;
                }
            }

            @-moz-keyframes 'blinker' {
                0% {
                    opacity: 1;
                }

                50% {
                    opacity: 0;
                }

                100% {
                    opacity: 1;
                }
            }

            @-o-keyframes 'blinker' {
                0% {
                    opacity: 1;
                }

                50% {
                    opacity: 0;
                }

                100% {
                    opacity: 1;
                }
            }

            @-ms-keyframes 'blinker' {
               0% {
                    opacity: 1;
                }

                50% {
                    opacity: 0;
                }

                100% {
                    opacity: 1;
                }
            }

            @keyframes 'blinker' {

             0% {
                    opacity: 1;
                }

                50% {
                    opacity: 0;
                }

                100% {
                    opacity: 1;
                }
            }
        </style>
    </head>
    <body>
        <div class="blink">Hello Blinking World!</div>
    </body>
</html>

인라인 CSS를 사용하여 텍스트 깜박임 만들기

인라인 CSS를 사용하면 스타일을 HTML 요소에 직접 넣을 수 있습니다. 알아두면 좋지만 인라인 CSS는 요소에 따라 다르므로 재사용할 수 없으므로 권장 옵션이 아닙니다.

또한 인라인 스타일에서는 CSS의 모든 속성과 기능을 사용할 수 없습니다. 깜박이는 텍스트의 현재 시나리오에 대해 말하자면, 키프레임은 HTML 요소의 일부가 아니므로 인라인 CSS에서 키프레임을 사용할 수 없습니다.

인라인 CSS를 사용하여 텍스트를 깜박이는 방법을 살펴보겠습니다.

<html>
    <head>
        <style>
            @-webkit-keyframes 'blinker' {
                50% {
                    opacity: 0;
                }
            }

            @-moz-keyframes 'blinker' {
                 50% {
                    opacity: 0;
                }
            }

            @-o-keyframes 'blinker' {
                 50% {
                    opacity: 0;
                }
            }

            @-ms-keyframes 'blinker' {
                50% {
                    opacity: 0;
                }
            }
        </style>
    </head>
    <body>
        <div class="blink" style="animation: blinker 1s linear infinite">
            In-line CSS Blink !
        </div>
    </body>
</html>

외부 CSS를 사용하여 텍스트 깜박임 만들기

외부 CSS는 HTML 파일에 CSS 파일을 추가하는 방법입니다. 스타일과 요소를 분리하는 것이 좋습니다.

link 태그를 사용하여 CSS 파일을 추가할 수 있습니다. style.css라는 이름의 CSS 파일을 만들고 위 코드에서 style 태그의 코드를 복사하여 HTML 파일에 추가합니다. 방법은 다음과 같습니다.

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="blink">Hello Blinking World!</div>
    </body>
</html>

JavaScript를 사용하여 텍스트 깜박임 만들기

JavaScript는 거의 모든 기능을 수행할 때 항상 생명의 은인이었습니다. 놀라운 일을 매우 빠르게 수행할 수 있는 다양한 방법과 기술을 제공합니다.

JavaScript를 사용하여 텍스트를 깜박이게 만드는 방법을 살펴보겠습니다.

<html>
    <head>
        <script>
            var blink_speed = 300;
            setInterval(function(){
                var element = document.getElementById("blink");
                element.style.display = element.style.display == 'none'?'':'none';
            }, blink_speed);
        </script>
    </head>
    <body>
        <div id="blink">Javascript Blink !</div>
    </body>
</html>

여기에서 JavaScript 코드를 이해해 봅시다. 무슨 마법을 부리고 있는 걸까요?

먼저 blink_speed라는 이름으로 변수를 초기화하고 값을 할당합니다. 원하는 값을 설정할 수 있습니다. 1000을 주면 1초, 2000포인트 2초 등을 의미합니다.

코드에 300을 할당합니다. 즉, 1초 미만입니다.

둘째, JavaScript의 setInterval 기능을 사용합니다. setInterval 메소드는 지정된 간격(밀리초)으로 함수를 계속 호출합니다.

다음은 함수의 구문입니다.

setInterval(function, milliseconds)

function 매개변수는 지정된 간격으로 반복적으로 실행되는 명령입니다. 밀리초 매개변수는 실행 간격에 대한 속도를 수신합니다.

코드에서 setInterval의 function 매개변수는 먼저 ID 이름으로 요소를 가져옵니다. 필요한 요소를 가져온 후 삼항 연산자를 사용하여 요소 표시가 없음이면 표시하고 그 반대의 경우도 확인합니다.

그런 다음 blink_speed를 setInterval 기능의 두 번째 매개변수에 할당했습니다.

JQuery를 사용하여 텍스트 깜박임 만들기

jQuery는 JavaScript 라이브러리이며 그 목적은 JavaScript를 가능한 한 쉽게 만드는 것입니다. jQuery를 사용하여 깜박이는 텍스트를 만드는 방법을 살펴보겠습니다.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            function blinkText(element){
              $(element).fadeOut('slow', function(){
                  $(this).fadeIn('slow', function(){
                      blinkText(this);
                  });
              });
            }
            $(function() {
                blinkText('#blink');
            });
        </script>
    </head>
    <body>
        <div id="blink">JQuery Blink !</div>
    </body>
</html>

이것은 매우 간단합니다. 코드가 무엇을 하는지 봅시다.

jQuery는 JavaScript 라이브러리이므로 이를 사용하려면 코드에 참조를 추가해야 합니다. 코드에서 HTML 요소를 수신하는 blinkText라는 간단한 함수를 만들었습니다.

먼저 요소에서 fadeOut 함수를 호출한 다음 이 함수 내에서 다른 함수인 fadeIn을 호출합니다. fadeIn 내부에서 깜박이는 텍스트를 무한대로 표시하기를 원하므로 함수를 재귀적으로 호출합니다.

결론적으로 텍스트는 끝이 없는 재귀 호출이므로 페이드 아웃, 페이드 인, 페이드 아웃, 페이드 인 등으로 진행됩니다.

JavaScript를 사용하여 페이지의 여러 섹션에서 깜박이는 텍스트 만들기

신나는 일을 해보자. 페이지의 여러 영역에서 깜박이는 텍스트를 만들고 싶습니다.

CSS를 사용하는 것은 간단합니다. 깜박이게 하려는 모든 요소에 동일한 클래스를 할당하면 완료됩니다.

하지만 JavaScript로 어떻게 해야 할까요? 위의 코드에서 본 것처럼 JavaScript는 하나의 요소만 선택합니다.

이를 달성할 수 있는 방법을 알아봅시다.

<html>
    <head>
        <script>
            function blinkText()
            {
                var elements = document.getElementsByClassName("blink");
                for(var i = 0, l = elements.length; i < l; i++)
                {
                    var blink = elements[i];
                    blink.style.display = blink.style.display == 'none' ? '' : 'none';
                }
            }
            setInterval(blinkText, 300);
        </script>
    </head>
    <body>
        <div class="blink">Hello</div>
        <div class="blink">World</div>
    </body>
</html>

클래스 이름이 같은 요소가 많은 경우 document.getElementByClassname은 모든 요소의 배열을 반환합니다. 그런 다음 각 요소를 하나씩 탐색하고 작업을 수행합니다.

CSS를 사용하여 번갈아 깜박이는 텍스트 만들기

이제 CSS 만 사용하여 대체 단어 깜박임 텍스트를 만드는 또 다른 환상적인 애니메이션을 만들어 보겠습니다.

<html>
    <head>
        <style>
            .blink::before {
                content: "Welcome";
                animation: blinker 1s linear infinite alternate;
            }

            @keyframes blinker {
              0% {
                content: "Welcome";
              }
              50% {
                opacity: 0%;
              }
              100% {
                content: "Developer";
              }
            }
        </style>
    </head>
    <body>
        <div class="blink"></div>
    </body>
</html>

처음에는 Welcome을 표시한 다음 깜박인 다음 Developer라고 말합니다. 이 루프는 지속적으로 반복됩니다.

관련 문장 - CSS Text