Skip to main content

CSS로 웹 사이트 글꼴 색상을 변경하는 방법

CSS - 폰트꾸미기1 폰트지정 (4 월 2025)

CSS - 폰트꾸미기1 폰트지정 (4 월 2025)
Anonim

좋은 활판 인쇄 디자인은 성공적인 웹 사이트의 중요한 부분입니다. CSS를 사용하면 작성한 웹 페이지의 텍스트 모양을 효과적으로 제어 할 수 있습니다. 여기에는 사용하는 글꼴의 색상을 변경하는 기능이 포함됩니다.

아래에서는 외부 스타일 시트와 단락 태그에 사용 된 스타일을 사용하여 글꼴 색상을 변경하는 방법을 살펴 보겠습니다. 텍스트를 둘러싼 모든 태그의 글꼴 색상을 변경하는 데 동일한 스타일 속성을 적용 할 수 있습니다. 꼬리표.

스타일을 추가하여 글꼴 색 변경

이 예제의 경우 CSS 변경 사항과 해당 문서에 첨부 된 별도의 CSS 파일을 보려면 HTML 문서가 있어야합니다. 특히 단락 요소를 살펴볼 것입니다.

HTML 파일의 모든 단락에 대한 텍스트 색상을 변경하려면 외부 스타일 시트로 이동하여 입력하십시오. p {}. 두는 색깔 스타일에있는 속성 다음에 콜론이옵니다. p {color :}. 그런 다음 속성 뒤에 색상 값을 추가하고 세미콜론으로 끝냅니다. p {color : black;}.

색상 값은 색상 키워드, RGB 색상 번호 또는 16 진수 색상 번호로 표현할 수 있습니다. 이 예에서는 단락 텍스트가 검은 색으로 변경됩니다.

그러나 텍스트 색상을 녹색, 파란색, 빨간색 등으로 변경하려면 색상 키워드를 사용해도 다양한 음영을 만들 수있는 유연성을 얻을 수 없습니다. 그것이 16 진수 값이 나오는 곳입니다.

p {color : # 000000; }

이 CSS 스타일은 16 진수 코드 # 000000이 검은 색으로 변환되기 때문에 단락을 검정색으로 색칠하는 데 사용할 수 있습니다. 그 16 진수 값으로 속기를 사용하고 같은 결과를 # 000으로 쓸 수도 있습니다.

p {color : # 2f5687; }

위에서 언급했듯이 16 진수 값은 단순히 검정색이나 흰색이 아닌 색상이 필요할 때 잘 작동합니다. 위의 CSS 16 진수 값은 단락을 파란색으로 설정하지만 키워드 "파란색"과 달리이 16 진수 코드는 파란색의 중역, 슬레이트와 같은 파란색 음영을 설정할 수 있습니다 .

p {color : rgba (47,86,135,1); }

마지막으로 RGBA 색상 값을 글꼴 색상으로 사용할 수도 있습니다. RGCA는 모든 최신 브라우저에서 지원되므로 대부분의 뷰어에서 사용할 수 있다는 확신을 가지고 이러한 값을 사용할 수 있지만 쉽게 대체 할 수 있습니다.

이 RGBA 값은 앞에서 지정한 슬레이트 파란 색과 동일합니다. 처음 세 값은 빨강, 녹색 및 파랑 값을 설정하고 마지막 숫자는 투명도의 알파 설정입니다. 알파 설정은 1로 설정되어 100 %를 의미하므로이 색상에는 투명도가 없습니다. 이 값을 .85와 같은 10 진수로 설정하면 85 %의 불투명도로 변환되고 색상은 약간 투명 해집니다.

p { color : # 2f5687; color : rgba (47,86,135,1);}

색상 값을 지정하려면 위의 CSS 코드를 모방하십시오. 이 구문은 16 진 코드를 먼저 설정 한 다음 해당 값을 RGBA 번호로 덮어 씁니다. 즉, RGBA를 지원하지 않는 이전 브라우저는 첫 번째 값을 가져오고 두 번째 값은 무시합니다.

HTML 페이지의 스타일을 지정하는 다른 방법들

글꼴 색상은 HTML 문서 내에서 외부 스타일 시트, 내부 스타일 시트 또는 인라인 스타일을 사용하여 변경할 수 있습니다. 그러나 모범 사례에서는 CSS 스타일에 외부 스타일 시트를 사용해야한다고 규정하고 있습니다.

문서의 "머리 부분"에 직접 작성된 스타일 인 내부 스타일 시트는 일반적으로 작은 한 페이지짜리 웹 사이트에만 사용됩니다. 인라인 스타일은 수년 전에 처리했던 예전 '글꼴'태그와 비슷하므로 피해야합니다. 이러한 인라인 스타일은 인라인 스타일의 모든 인스턴스에서 글꼴 스타일을 변경해야하기 때문에 글꼴 스타일을 관리하기가 매우 어렵습니다.