CSS color 텍스트 폰트 컬러 변경

HTML에서 텍스트를 입력 후 CSS에서 색상을 변경하는 방법에 대해 알아봅시다. 텍스트는 태그 없이 에디터에서 텍스트만 입력해도 출력은 되지만 편집을 위해서는 되도록 태그 안쪽에 텍스트를 입력하는것이 좋습니다. 대표적으로 <p>태그나 <h1~6> 태그들이 있습니다. 아래의 예시에서는 <p>태그에 텍스트를 입력해 보겠습니다.

 

<p>안녕하세요! 친절한효자손입니다.</p>

 

이렇게 입력했습니다. 그러면 브라우저에서는 <p>태그 안쪽에 입력된 텍스트만 출력됩니다. HTML에서 폰트 크기를 별도로 지정하지 않았다면 기본값인 16px 크기로 출력되며 색상은 검정색입니다. 색상을 변경하는 CSS 코드는 다음과 같습니다.

 

p {
    color: #000; /* 16진수 헥사코드 또는 색상명 또는 rgba */
}

color 라는 CSS 옵션을 사용한다는것을 기억합시다. 그런데 왜 font-color라고 안 했는지 지금도 살짝 이해가 안 됩니다. 아무튼 폰트 색상을 변경하는건 color입니다. 이후에 16진수 헥사코드를 사용하거나 고유 색상명을 사용하면 됩니다.

 

#ccc 또는 red 또는 rgba(0, 0, 0, 0.5)

 

이렇게 말이죠. 16진수를 사용할때는 반드시 #을 사용해야하며 색상의 고유명을 입력할때는 #을 붙이지 않습니다. 마지막으로 rgba는 빛의 3원색인 Red, Green, Blue에 Alpha가 들어간 형태입니다. rgb는 0부터 255까지의 값을 사용하며 a는 0부터 1까지의 소수값을 사용합니다. 위의 예시에 있는 rgba(0, 0, 0, 0.5)의 의미는 Red, Green, Blue의 값이 가장 어둡다는 의미입니다. 0을 사용했으니까요. 따라서 검정색이 됩니다. 마지막 a의 0.5는 50% 불투명이라는 뜻입니다. 즉 검정색의 색상이지만 50% 투명한 상태의 색상을 의미합니다.

 

그러면 지금까지 배운 내용들을 종합해서 사용해 보겠습니다.

 

See the Pen CSS 폰트 컬러 by rgy0409 (@rgy0409) on CodePen.

이렇게 됩니다. 클래스명 또는 ID명을 사용해 각 태그마다 다른 폰트 컬러를 만들어 줄 수 있습니다. 마지막으로 16진수 핵사코드는 6자리 중 두 자리씩 끊어서 각각 rgb값을 의미하는데 각 값이 서로 같다면 6자리를 3자리로 줄여서 사용할 수 있습니다. 위의 예시처럼요. 그러니까 예시에서 사용된 #0F0의 경우는 #00FF00이라는 뜻입니다. 끝.