자바스크립트 텍스트 색상 변경

| | | | | | | | | | | | | | | | | | | | | | | | | |

CSS background-color 속성은 텍스트 요소에 색상을 적용합니다. Background Color 속성을 사용하여 내장 CSS 색상 키워드, 16진수 값 또는 기타 색상 값을 지정할 수 있습니다. 이 속성의 구문은 다음과 같습니다. color: yourcolor;

웹사이트에서 텍스트의 색상과 배경 색상을 조정하는 것은 웹 디자인의 필수적인 부분입니다.

. .은 CSS 색상 속성과 배경 색상이 작동하는 곳입니다. color 속성을 사용하면 HTML 텍스트의 색상을 설정할 수 있습니다. background-color 속성을 사용하면 텍스트의 배경색을 정의할 수 있습니다.

이 튜토리얼에서는 CSS에서 텍스트 색상을 설정하는 방법을 예제와 함께 설명합니다. 다음으로 텍스트 요소의 배경색을 설정하는 방법에 대해 알아보겠습니다.

CSS 글꼴 색상

CSS 글꼴의 색상은 color 속성을 사용하여 설정합니다. color 속성은 요소의 배경이 아닌 텍스트의 색상을 설정합니다. . CSS 색상 키워드 또는 색상 값을 사용하여 색상을 정의할 수 있습니다.

색상 속성의 구문은 다음과 같습니다.

이 규칙은 HTML 문서의 모든

태그의 색상을 빨간색으로 설정합니다.

CSS 색상 키워드를 사용했습니다. 이러한 키워드는 "빨간색" 또는 "파란색"과 같은 표준 색상을 참조하려는 경우에 유용합니다. 그러나 이러한 키워드가 스펙트럼의 모든 색상을 설명하는 것은 아닙니다. 특정 색상을 사용하려면 다른 유형의 색상 레이블을 사용할 수 있습니다.

color 속성은 다음 값 중 하나를 허용합니다.

설명
색상 이름 색상 이름 파란색, 핫핑크
색상 16진수 16진수 색상. 식별자는 6자입니다. # f7f7f7, # 0000ff
RGB 색상 RGB는 빨강, 녹색 및 파랑을 나타냅니다. rgb(0, 50, 28), rgb(0, 0, 255)
HSL 색상 HSL 는 색조, 채도 및 밝기를 의미합니다. HSL(0, 50%, 50%), hsl(180, 50%, 25%)

기본적으로 다음에서 사용하는 텍스트 색상 웹 페이지는 웹 페이지의 태그에 적용되는 텍스트의 색상입니다. 표시보다 작을 경우 검정색입니다.

색상을 사용할 수 있습니다. 속성을 사용하여 스타일시트에서 링크 색상 설정

색상 속성이 작동하는 방식을 보여주는 예를 들어 보겠습니다.

CSS 글꼴 색상 변경: .. 예

가정 지역 식료품점 Peterson and Sons의 웹사이트를 디자인 중입니다. 소유자는 사이트에서 특정 텍스트 블록을 회색으로 표시하기를 원합니다. 다음 코드를 사용하여 구성할 수 있습니다.

코드 반환: 클릭 버튼 이미지 버튼 위의 코드 편집기에서 HTML / CSS 코드의 출력을 보려면

HTML 태그 로 Peterson and Sons 식료품점을 설명하는 텍스트 단락을 정의합니다. 다음으로 CSS 코드에서 모든

태그의 텍스트 색상을 회색으로 설정하는 스타일을 만듭니다. 이를 위해 색상 이름("회색")에 값을 사용합니다.

참조하려는 경우 "회색" 대신 "rgb(128, 128, 128)"를 지정할 수 있습니다. RGB 색상 값. 그렇지 않으면 16진수 또는 HSL 값을 사용하여 텍스트 색상을 회색으로 설정할 수 있습니다.

스타일에 CSS 파일을 사용하지 않습니다. CSS 스타일은 HTML 문서

배경 색상 CSS Text

CSS background-color 속성은 요소의 배경색을 설정합니다. background-color 속성은 이전에 논의된 색상 값 중 하나를 허용합니다(color name , HEX, RGB .., HSL) 이 속성은 텍스트의 배경색을 설정할 수 있습니다.

배경 구문 색상 속성은 다음과 같습니다.

이 코드는 모든

페이지

CSS 텍스트 배경색 예

문장 중 하나에 주황색 배경색을 추가하려고 한다고 가정해 보겠습니다. 위 예의 텍스트 단락에서.

우리가 강조하고 싶은 문장은 "오늘 Peterson and Sons는 시애틀 지역에서 5개의 매장을 운영하고 있습니다."입니다. 그리고 이전과 마찬가지로 단락 h의 모든 텍스트를 원합니다. 회색으로 나타납니다. 다음 코드를 사용하여 이 텍스트 장식을 적용할 수 있습니다.

코드는 다음을 반환합니다. 클릭 실행 코드 24" 너비 = "이미지 너비 24" 클래스 = "wp-image-13930" 스타일 = "너비: 24픽셀;" src = "https://744025.smushcdn.com/ 1245953 / wp-content / 업로드 / 2020/ 03 / iconfinder_play-circle outline_326584 .png = 1 & lossy band = 1 & webp = 1 "alt = `키 이미지`" "실행 코드 원의 삼각형` srcset = "https: //744025.smushcdn .com / 1245953 / wp-content /uploads/2020/03/iconfinder_play-circle-outline_326584-20x20.png?lossy=1&strip=: 1 & webp = 1 20 // 744025.smushcdn.com/1245953/wp- 콘텐츠 / 업로드 / 2020 /03/iconfinder_play-circle-outline_326584.png?lossy=1&strip=1&webp=1 24w "크기 ="(최대 너비: 4pxvw, ">) 20 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인합니다.

HTML 파일에서 결합하여 텍스트 단락을 정의했습니다.

의 텍스트. 그런 다음 HTML 에 마지막 문장이 있습니다. 이를 통해 코드의 특정 구문에 특정 스타일을 적용할 수 있습니다.

CSS 코드에서 두 가지 규칙을 지정했습니다. 첫 번째 규칙은 텍스트

태그 내부의 모든 색상을 회색으로 설정합니다. 두 번째 규칙은 태그 안에 있는 모든 텍스트의 배경색을 주황색으로 설정합니다.

보다시피 위에서 태그로 전달된 코드의 마지막 문장은 배경색이 주황색입니다. 이것은 두 번째 스타일 규칙의 결과입니다.

결론

CSS 색상 속성을 사용하면 웹 페이지의 텍스트 색상을 설정할 수 있습니다. background-color 속성을 사용하면 웹페이지에 있는 텍스트의 배경색을 설정할 수 있습니다.

이 튜토리얼에서는 예제와 함께 이러한 작업을 수행하는 방법에 대해 설명했습니다. 이제 글꼴 색상 및 배경 색상을 변경하는 기술을 갖추었습니다. 웹 디자이너 전문가로서 텍스트를 계획하십시오!

HTML에 대해 더 알고 싶으십니까? HTML 학습 가이드 를 확인하십시오. 이 가이드에서는 전문가 학습 팁과 주요 인코딩 리소스에 대한 포인터를 찾을 수 있습니다.