웹 페이지에 표시되는 글꼴 유형 및 색상 변경

참고 :이 페이지는 웹 페이지의 글꼴 유형, 크기 및 색상 변경과 관련이 있습니다. Microsoft Word의 경우 Word에서 글꼴 색상, 크기 또는 유형을 변경하는 방법에 대한 페이지를 참조하십시오.

이 문서에는 웹 페이지에서 글꼴 및 글꼴 색을 변경하는 방법에 대한 지침이 들어 있습니다. 앞으로 나아갈 올바른 구문은 더 이상 사용되지 않는 인라인 스타일 속성이나 글꼴 태그 대신 클래스 또는 ID 선택기와 함께 캐스 케이 딩 스타일 시트를 사용하는 것입니다. 하지만이 두 가지 방법이 대부분의 인터넷 브라우저에서 계속 작동한다는 점은 주목할 가치가 있습니다.

진행하려면 배울 방법을 선택하거나 모든 섹션을 읽으십시오.

웹 페이지에서 글꼴과 글꼴을 한 번만 변경하려면 요소 태그에서 속성을 변경해야합니다. style 속성을 사용하여 아래 예제와 같이 font-family, colorfont-size로 글꼴 크기를 지정하여 글꼴 및 색상을 지정할 수 있습니다.

예제 코드

이 텍스트에는 Courier, Blue 및 20px 글꼴이 있습니다.

결과

이 텍스트는 Courier 글꼴로 Blue, 20px 크기입니다.

하나 이상의 페이지에 CSS 사용

한 페이지의 사용자 정의 글꼴

웹 페이지의 머리 부분에 탭 사이에 코드를 삽입하여 다양한 요소의 텍스트 모양을 변경할 수 있습니다. 다음 파란색 상자에는 한 번 호출 된 글꼴 예제가 Courier로 변경되어 빨간색으로 표시되는 예제 코드가 들어 있습니다. 보시다시피, 클래스 이름을 "custom"로 정의했습니다.

 .custom {font-family : Courier; 색깔 : 빨강; 글꼴 크기 : 20px; } 

일단 정의되면, 이 스타일은 "custom"클래스를 붙임으로써 페이지의 대부분의 요소에 적용될 수 있습니다. 다음 상자는 두 줄의 코드와 각각의 결과를 보여줍니다.

이 모든 문장은 빨간색과 택배입니다.

TEST라는 단어 만 빨간색이고 Courier입니다.

결과

이 모든 문장은 빨간색과 Courier입니다.

TEST라는 단어 만 빨간색이고 Courier입니다.

많은 페이지의 사용자 정의 글꼴

외부 CSS 파일을 가져 오는 것은 사용자가 동시에 여러 페이지의 규칙을 변경할 수 있다는 점에서 매우 유용 할 수 있습니다. 다음 섹션에서는 글꼴을 변경하는 기본 CSS 파일을 만드는 예제와 대부분의 요소의 색상을 보여줍니다. 이 파일은 전체 사이트에서도 둘 이상의 웹 페이지에로드 될 수 있습니다.

기본 텍스트 편집기를 사용하여 다음 텍스트를 .css 파일로 저장하면 가져 오기를 준비합니다.

 @charset "utf-8";

.courier {font-family : Courier; 색상 : # 005CB9; }

앞의 텍스트가 .css 파일 (우리의 이름은 basic.css )에 배치되면 다음 예제와 비슷한 줄을 사용하여 다른 페이지의 파일에 연결할 수 있습니다.

팁 : 사용자는 가져온 .css 파일의 코드를 변경하여 페이지의 요소 특성을 변경할 수 있습니다.

글꼴 태그 솔루션

더 이상 사용되지 않지만 HTML 태그를 계속 사용할 수 있으며 일부 온라인 서비스에서 사용해야 할 수 있습니다. FONT 태그를 사용할 때는 사용할 글꼴을 설명하는 face 속성을 포함해야합니다. 아래 예제에서는 Courier 글꼴과 진한 파란색의 16 진수 색상 코드 # 005CB9를 사용합니다.

예제 코드

 특수 글꼴 예제. 

결과