[HTML/CSS] 글자색 변경하기 (font-color)
- Web/HTML, CSS
- 2023. 1. 13.
개발을 하다 보면 웹 문서에서 글자 색상을 바꾸고 싶은 경우가 종종 있을 수 있습니다. 예를 들자면 문장의 중요한 내용의 글자색을 적절히 조절하여 강조를 할 수도 있겠죠. 아마 조금 더 가독성이 있는 웹 문서를 만들 수 있을 것입니다. 이번 포스팅에서는 웹 문서에서 글자 색상을 변경하는 방법에 대해 알아보도록 하겠습니다.
※ 컴퓨터에서 색을 표현하는 방식 RGB 색상에 대하여
컴퓨터에서 색상은 빛의 삼원색인 빨강(red), 초록(green), 파랑(blue)의 3가지 색의 조합으로 표현합니다. 위의 3가지 색상을 섞으면 모든 색상을 다 사용할 수 있지요. 이러한 방식을 빨강(red), 초록(green), 파랑(blue) 3가지 색상의 앞글자를 따서 RGB라고도 합니다. 형태는 RGB(빨강값, 초록값, 파랑값)으로 나뉘며 각자의 색은 0 ~ 255까지 입력할 수 있습니다. 예를 들어 rgb(255, 0 ,0)은 빨간색만 255를 섞었기에 완전한 빨간색이라고 할 수 있겠죠. 이러한 RGB색상은 컴퓨터가 이해하기 쉬운 16진수로 만들어집니다. 이것을 우리는 HEX값이라고 부릅니다. 예를 들면 빨강의 hex값은 #FF0000입니다. 이러한 HEX값을 완전히 외우기는 힘들고 필요할 때 필요한 RGB색상을 검색하셔서 사용하시면 됩니다. 아래 링크에서 색상 코드를 한번 찾아서 사용해 보세요.
https://www.rapidtables.org/ko/web/color/RGB_Color.html
HTML 사용
<font> 태그 사용
See the Pen Untitled by wjdxo513 (@wjdxo513) on CodePen.
첫 번째로 소개해드릴 방법은 font color를 활용하는 방법으로 위와 같이 색상의 영문값이나 RGB HEX값을 입력하시면 색상을 변경할 수 있습니다.
인라인 방식
See the Pen 글자 색상2 by wjdxo513 (@wjdxo513) on CodePen.
HTML 태그의 style 속성을 사용하는 방법으로 color를 명시하고 변경 색상을 써주시면 됩니다.
※ HTML 태그는 <body>, <h1>, <div>, <span>, <p>, <li> 등 텍스트를 쓸 수 있는 태그면 아무거나 됩니다.
CSS 사용
See the Pen 글자색상3 by wjdxo513 (@wjdxo513) on CodePen.
위와 같이 CSS로 하셔도 됩니다.
'Web > HTML, CSS' 카테고리의 다른 글
| [HTML/CSS] 텍스트 이탤릭체, 밑줄, 취소선 적용하기 (1) | 2023.01.15 |
|---|---|
| [HTML/CSS] 글자 굵기 변경하기 (font-weight) (1) | 2023.01.14 |
| [HTML/CSS] 글자 크기 조절하기 (font-size) (1) | 2023.01.12 |
| [HTML/CSS] 글자 간격(자간), 줄 간격(행간) 조정하기 (3) | 2023.01.10 |