HTML의 텍스트 문자열에서 한 단어의 색상 변경

  2. 어떻게
  3. HTML 하우투
  4. HTML의 텍스트 문자열에서 한 단어의 색상 변경
Neha Imran 2023년6월20일
HTML HTML Text
  1. HTML의 텍스트 문자열에서 한 단어의 색상 변경
  2. 내부 CSS를 사용하여 HTML의 텍스트 문자열에서 한 단어의 색상 변경
  3. JavaScript를 사용하여 HTML의 텍스트 문자열에서 한 단어의 색상 변경
HTML의 텍스트 문자열에서 한 단어의 색상 변경

이 기사의 주요 주제는 CSS를 활용하여 텍스트에서 특정 단어의 색상을 강조 표시하거나 변경하는 것입니다. 이 기능을 구현하기 위한 몇 가지 기술을 살펴보겠습니다.

내부 및 인라인 CSS를 사용하여 텍스트를 색칠하는 방법을 배웁니다. 나중에 JavaScript를 사용하여 동일한 기능을 구현하는 방법을 살펴보겠습니다.

HTML의 텍스트 문자열에서 한 단어의 색상 변경

우리는 일반적으로 웹사이트에서 텍스트의 한 단어가 다른 단어와 다른 색상을 갖는 것을 봅니다. 물론 사용자의 시선을 사로잡습니다. 웹 페이지에서 동일한 작업을 수행할 수 있는 방법에 대해 논의해 봅시다.

이전 버전의 HTML에는 다음과 같이 이 기능을 구현하는 데 사용할 수 있는 <font> 태그가 있었습니다.

<font color="red">Red</font>

그러나 이 태그는 HTML5에서 제거되어 더 이상 지원되지 않습니다. 따라서 작업을 수행하는 데 도움이 되는 HTML <span> 태그에 대해 알아봅니다.

<span> 요소는 텍스트 섹션 또는 페이지 섹션을 표시하는 인라인 컨테이너입니다. <span> 태그의 id 또는 class 속성을 사용하면 CSS로 간단한 스타일을 지정하고 JavaScript로 수정할 수 있습니다.

<span> 태그를 사용하면 div 요소와 유사한 인라인 스타일을 적용할 수도 있습니다. 그러나 <span>은 인라인 요소인 반면 div는 블록 수준 요소입니다.

이를 이해하려면 아래 예를 확인하십시오.

<html>
    <body>
        <p>Hello, I am
            <span style="color: red">Red</span>
        </p>
    </body>
</html>

CSS의 색상 속성은 텍스트에 특정 색상을 부여합니다. 필요한 색상을 지정하는 방법에는 여러 가지가 있습니다. 위의 예에서는 이름으로 색상을 선택합니다.

HTML은 검정, 흰색, 회색, 은색, 적갈색, 빨간색, 보라색, 자홍색, 녹색, 라임, 올리브, 노란색, 남색, 파란색, 청록색 및 청록색의 16가지 색상 이름을 인식할 수 있습니다. 새 브라우저는 140개의 CSS 색상 이름을 인식할 수 있습니다.

여기에서 모든 HTML 인식 색상 이름을 확인할 수 있습니다. 앞서 언급했듯이 필요한 색상을 지정하는 다른 많은 방법이 있습니다.

다양한 방법을 살펴보겠습니다.

RGB 색상

RGB는 빨강, 녹색, 파랑을 나타냅니다. 빨강, 초록, 파랑의 3원색을 조합하여 각각의 색을 만드는 가산색 배합을 사용합니다.

빨간색, 녹색 및 파란색 매개변수는 각각 색상의 강도를 설명하는 0에서 255 사이의 값을 가집니다. 이는 256 x 256 x 256 = 16,777,216개의 고유한 색상이 있음을 나타냅니다.

예를 들어 rgb(255, 0, 0)는 빨간색이 가장 큰 값인 255로 설정되고 나머지 두 색상인 녹색과 파란색은 0으로 설정되기 때문에 빨간색으로 렌더링됩니다. 모든 색상 매개변수를 0으로 설정합니다. 검정색을 표시하려면 rgb(0,0,0)과 같이 합니다.

여기에서 다른 색상의 RGB 값을 볼 수 있습니다.

<html>
    <body>
        <p>Hello, I am
            <span style="color: rgb(241, 196, 15 )">Yellow</span>
        </p>
    </body>
</html>

RGBA 색상

RGBA 색상은 색상의 불투명도를 결정하는 알파 채널을 포함하는 RGB 색상의 확장입니다. RGBA 색상 값의 구문은 다음과 같습니다.

rgba (red, green, blue, alpha)

알파 매개변수의 값 범위는 0.0(완전한 투명도)에서 1.0(완전한 가시성)까지입니다. 배경색에 대해 이 속성을 사용할 수도 있습니다. 때로는 불투명도가 다른 다양한 배경색이 필요하기 때문입니다.

HEX 색상

16진수 색상은 16진수 값을 사용하여 다양한 색상 모델의 색상을 나타냅니다. 16진수 색상은 #RRGGBB로 표시되며 RR은 빨간색, GG는 녹색, BB는 파란색을 나타냅니다.

색상의 강도를 지정하는 16진수 정수의 범위는 00에서 FF까지입니다. 쉬운 예는 #0000FF입니다. 파란색 구성요소는 가장 높은 값인 FF에 있고 빨간색과 녹색 부분은 가장 낮은 값인 00에 있기 때문에 색상은 완전히 파란색입니다.

여기에서 다른 색상의 hex 값을 볼 수 있습니다.

<html>
    <body>
        <p>Hello, I am
            <span style="color: #0000FF">Blue</span>
        </p>
    </body>
</html>

HSL 색상

HSL은 색조(Hue), 채도(Saturation), 밝기(Lightness)의 약자입니다. 각 용어에 대해 자세히 살펴보겠습니다.

  1. 색조: 색조의 범위는 색상환에서 0~360도입니다. 빨간색은 0입니다. 노란색은 60입니다. 녹색은 120입니다. 파란색은 240 등입니다.
  2. 채도: 이 양은 백분율로 측정되며, 100%는 완전히 포화됨(즉, 회색 음영이 없음)을 나타내고, 50%는 50% 회색이지만 여전히 보이는 색상을 나타내며, 0%는 완전히 포화되지 않음(즉, 완전히 회색 및 색상 보이지 않음).
  3. 밝기: 이것은 백분율이기도 합니다. 0%는 검은색이고 100%는 흰색입니다. 색상에 부여하려는 빛의 양은 백분율로 표시되며 0%는 검은색(빛이 없는 경우), 50%는 어둡지도 밝지도 않음, 100%는 흰색(완전한 밝기)을 나타냅니다.

HSL 색상 값의 구문은 다음과 같습니다.

hsl(hue, saturation, lightness)

여기에서 다른 색상의 HSL 값을 볼 수 있습니다.

<html>
    <body>
        <p>Hello, I am
            <span style="color: hsl(23, 97%, 50% )">Orange</span>
        </p>
    </body>
</html>

HSLA 색상

HSLA 색상은 색상의 불투명도를 지정하는 알파 채널이 있는 HSL의 확장입니다. HSLA 색상 값은 다음으로 결정됩니다.

hsla(hue, saturation, lightness, alpha)

알파 매개변수의 값은 완전히 투명함을 의미하는 0.0과 투명하지 않음을 의미하는 1.0 사이의 범위를 갖는 숫자입니다.

내부 CSS를 사용하여 HTML의 텍스트 문자열에서 한 단어의 색상 변경

CSS에서 색상을 부여하는 모든 방법을 자세히 살펴보았습니다. 우리는 지금까지 모든 것에 대해 인라인 CSS를 사용해 왔습니다.

그러나 인라인 CSS는 요소에만 연결되어 있기 때문에 권장되는 방법은 아닙니다. 다른 페이지 영역에서 동일한 기능을 원한다면 많이 다시 작성해야 합니다.

이제 <style> 태그 내부의 HTML <head> 태그에 정의된 내부 CSS를 사용하여 텍스트에 색상을 지정해 보겠습니다.

<html>
    <head>
        <title>CSS Color Property</title>
        <style>
            #rgb{
              color:rgb(255,0,0);
            }
            #rgba{
              color:rgba(255,0,0,0.5);
            }
            #hex{
              color:#EE82EE;
            }
            #hsl{
              color:hsl(0,50%,50%);
            }
            #hsla{
              color:hsla(0,50%,50%,0.5);
            }
            #built{
              color:green;
            }
        </style>
    </head>
    <body>
        <h1>
            Hello this is <span id="built">Built-in color</span> format.
        </h1>
        <h1>
             Hello this is <span id="rgb">RGB</span> format.
        </h1>
        <h1>
          Hello this is <span id="rgba">RGBA</span> format.
        </h1>
        <h1>
            Hello this is <span id="hex">Hexadecimal</span> format.
        </h1>
        <h1>
            Hello this is <span id="hsl">HSL</span> format.
        </h1>
        <h1>
            Hello this is <span  id="hsla">HSLA</span> format.
        </h1>
    </body>
</html>

JavaScript를 사용하여 HTML의 텍스트 문자열에서 한 단어의 색상 변경

JavaScript를 사용하여 문장에서 특정 단어의 색상을 변경할 수 있습니다. <span> 태그에 ID를 부여한 다음 document.getElementById(ID-name)를 사용하여 JavaScript에서 해당 요소를 가져와 style 속성을 호출해야 합니다. 방법은 다음과 같습니다.

<html>
    <body onload="myFunction()">
        <p>Hello, I am <span id="color-text">Magenta.</span></p>
        <script>
            function myFunction() {
              document.getElementById("color-text").style.color = "magenta";
            }
        </script>
    </body>
</html>

관련 문장 - HTML Text