HTML 글꼴의 색상입니다. Chrome 웹 브라우저를 사용하여 HTML의 글꼴 색상을 변경하는 방법
이 튜토리얼에서는 마지막 태그 속성을 살펴보겠습니다. , 텍스트의 색상을 설정합니다. 기본적으로 텍스트는 흰색 배경에 검은색으로 표시됩니다. 하기 위해 HTML에서 텍스트 색상 변경, 태그의 색상 속성을 적용해야 합니다. :
색상을 설정하려면 이름을 지정하세요(예: 빨간색, 녹색, 파란색). 작은 예를 살펴보겠습니다.
녹색 텍스트
빨간색 텍스트
보라색 텍스트
브라우저에서 결과를 확인해 보겠습니다.
첫 번째 문단의 텍스트는 녹색으로 바뀌고, 두 번째 문단은 빨간색으로, 세 번째 문단은 보라색으로 바뀌었습니다. 총 16개의 기본 색상 이름과 130개의 추가 색상 이름이 있습니다. HTML 색상표에서 전체 색상 목록을 볼 수 있습니다.
이러한 색상 표시 방법은 매우 간단하지만 매우 제한적입니다. 따라서 HTML 코드의 색상을 변경하기 위해 해시 기호(#) 다음에 16진수 숫자를 사용하는 경우가 많습니다. 예를 들면 다음과 같습니다.
이 명칭을 사용하면 1,600만 가지가 넘는 색상과 그 색조를 얻을 수 있습니다! 사이트에서 제공되는 색상 코드를 사용하거나 Photoshop의 색상 팔레트를 사용하여 색상 코드를 얻을 수 있습니다. 예제를 보고 다음 코드를 작성해 보겠습니다.
녹색 텍스트
빨간색 텍스트
보라색 텍스트
파일을 저장하고 결과를 살펴보겠습니다.
보시다시피 텍스트를 첫 번째 예와 동일한 색상으로 설정했습니다. 여기서는 16진수 체계를 사용했습니다. 즉, 색상을 HEX 형식으로 설정했습니다.
이제 HTML에서 텍스트 색상을 변경하는 방법을 배웠으며 수업이 끝나면 모든 태그 속성을 반복하는 것이 좋습니다. , 글꼴, 크기 및 색상과 같은 여러 매개 변수를 텍스트에 한 번에 설정합니다. 예를 적어보세요:
텍스트 글꼴, 크기 및 색상 설정
텍스트 글꼴, 크기 및 색상 설정
글꼴을 변경하려면 태그를 사용하세요. FACE 속성을 사용합니다. 이름(Arial, Tahoma, Verdana) 또는 유형(예: 고정폭)으로 글꼴을 지정할 수 있습니다. 사용자가 필요한 글꼴을 설치하지 않은 상황을 피하기 위해 여러 글꼴 이름을 나열하는 것이 좋습니다. 일반적으로 허용되는 글꼴(예: Arial) 중 하나 이상을 사용하는 것이 좋습니다. 한 페이지에 2~3개 이상의 다른 글꼴을 사용하는 것은 권장하지 않습니다. 그렇지 않으면 페이지가 투박하고 전문적이지 않게 보일 것입니다.
예:
HTML 페이지의 글꼴 크기 변경
글꼴 크기를 변경하려면 SIZE 속성을 사용하세요. 글꼴이 클수록 텍스트를 읽기가 더 쉬워집니다. 그러나 작은 글꼴을 사용하면 화면에 더 많은 정보를 표시할 수 있습니다. 태그와 함께 이 속성 사용
태그를 사용하여 글꼴을 변경할 수 있습니다 그리고 . 이전 텍스트와 관련하여 지정된 조각의 글꼴을 확대합니다. , 그에 따라 감소합니다.
개별 문자의 크기를 변경하면 흥미로운 효과를 얻을 수 있습니다. 예를 들어, 이 방법을 사용하면 단락 시작 부분에 큰 대문자인 드롭 캡을 얻을 수 있습니다.
예:
HTML 페이지의 글꼴 색상 선택
웹 페이지 텍스트의 일부를 다양한 색상의 글꼴로 표시하면 더욱 매력적입니다.
태그 컨텍스트에서 TEXT 속성 사용
를 사용하면 웹페이지의 전체 텍스트 색상을 변경할 수 있습니다. 태그로 COLOR 속성 적용하기 (우선순위가 더 높음)을 사용하면 단일 텍스트 모양과 상호 작용할 수 있습니다.텍스트 색상을 변경하려면 색상 이름이나 16진수 코드를 알아야 합니다. 코드는 파운드 기호 #와 색상의 빨간색, 녹색, 파란색 구성 요소의 강도를 나타내는 숫자로 구성됩니다. 16가지 표준 색상만 이름으로 참조할 수 있습니다.
색상명 코드 아쿠아 ##00FFFF 블랙 ##000000 블루 ##0000FF 퓨샤 ##FF00FF 그레이 ##808080 그린 ##008000 라임 ##00FF00 마룬 ##800000 네이비 ##000080 올리브 ##808000 퍼플 ##800080 레드 # #FF0000 실버 ##C0C0C0 청록색 ##008080 화이트 ##FFFFFF 옐로우 ##FFFF00
웹 페이지를 만들 때 다양한 디자인 문제에 직면해야 합니다. 일반적인 질문 중 하나는 HTML에서 텍스트 색상을 변경하는 방법입니다. 이를 해결하는 것은 매우 간단하며 두 가지 방법이 있습니다.
인라인 텍스트 스타일 속성 설정
HTML에서 텍스트 색상을 변경하는 방법을 이해하려면 텍스트 필드 속성 목록을 살펴보세요. 그 중에는 이러한 태그에 포함된 텍스트의 스타일을 결정하는 여러 값이 있으며, 이는 style 키워드 내에 지정됩니다.
텍스트 색상을 변경하려면 여는 태그 내부 텍스트 필드의 선택한 영역에 style= ""라는 단어를 입력하기만 하면 됩니다. 이 속성 내에서 다양한 매개변수 값을 지정할 수 있습니다. 색상 속성의 값은 텍스트의 색상 톤을 변경합니다. 이 매개변수를 지정하면 콜론 기호 다음에 이 필드의 모든 문자에 색상이 지정되는 색상을 지정해야 합니다. 이 경우 색조를 정의할 때 명시적인 색상 값(예: 빨간색 또는 노란색)과 해당 16진수 값(rgb)을 모두 지정할 수 있습니다.
색상을 결정하기 위해 선택한 방법에 관계없이 동일한 방식으로 색상을 선택하면 결과는 동일합니다. 따라서 다음 세 가지 예는 모두 텍스트를 노란색으로 동일하게 변경합니다.
1.
텍스트
2.
텍스트
3.
텍스트
CSS를 사용하여 색상 변경
스타일 시트를 사용하면 HTML의 텍스트 색상을 변경하는 방법을 결정할 수도 있습니다. CSS는 모든 최신 버전의 HTML에서 완벽하게 지원되며 여러 페이지 요소의 스타일을 한 번에 변경할 수도 있습니다.
CSS를 사용하여 HTML에서 텍스트 색상을 변경하는 방법을 이해하기 위해 형식적인 표현 언어를 이해할 필요는 없습니다. 특정 요소의 속성을 정의하려면 태그 내부에 CSS 설명을 작성해야 합니다.
이며 태그로 정의됩니다.