HTML 웹 페이지의 다양한 글꼴 형식의 자세한 수정

저자：Eve Cole 업데이트 시간：2025-06-07 00:48:02

이 섹션은 텍스트의 자세한 수정으로 시작하여 독자가 다양한 글꼴 형식의 HTML 형식의 변경 사항을 파악하고보다 전문적인 웹 페이지를 만들 수 있습니다.

4.2 다각화 된 텍스트 수정

이전 섹션에서는 큰 단락의 다양한 설정을 배웠습니다. 이 섹션은 텍스트의 자세한 수정으로 시작하여 독자가 다양한 글꼴 형식의 HTML 형식의 변경 사항을 파악하고보다 전문적인 웹 페이지를 만들 수 있습니다.

4.2.1 텍스트 스타일 설정을위한 기본 레이블 - 

글꼴 스타일을 설정하기위한 기본 태그는 이며, 그 안에 포함 된 텍스트는 스타일 액션 영역입니다. 초보자를위한 HTML 코드 작성에서 는 text 와 같은 여러 소스에 의해 쉽게 중첩됩니다. 또 다른 상황은 text 와 같은 레이블 중첩 오정렬입니다. 코드 작성을 표준화하고 불필요한 실수를 피하려면 학습 할 때 독자가 신중해야합니다.

4.2.2 텍스트의 색상을 설정하십시오

색상은 텍스트 색상을 설정하는 데 사용되는 태그의 속성 중 하나입니다. font_color.htm이라는 d :/ web/ directory에서 웹 페이지 파일을 작성하고 코드 4.7에 표시된대로 코드를 작성하십시오.

코드 4.7 글꼴 색상 설정 : font_color.htm

<html>

<헤드>

</head>

<body>

Light Red Text : HTML 학습의 본질은 이어야 할 모든 것을 사용하는 것입니다.

크림슨 텍스트 : HTML 학습의 본질은 이어야 할 모든 것을 사용하는 것입니다.

Light Green Text : HTML 학습의 본질은 이어야 할 모든 것을 사용하는 것입니다.

진한 녹색 텍스트 : HTML 학습의 본질은 를 사용하는 것입니다.

연한 파란색 텍스트 : HTML 학습의 본질은 이어야 할 모든 것을 사용하는 것입니다.

진한 파란색 텍스트 : HTML 학습의 본질은 이어야 할 모든 것을 사용하는 것입니다.

연한 노란색 텍스트 : HTML 학습의 본질은

다크 노란색 텍스트 : HTML 학습의 본질은

Light Cyan Text : HTML 학습의 본질은

진한 파란색 텍스트 : HTML 학습의 본질은

라이트 퍼플 텍스트 : HTML 학습의 본질은 이어야 할 모든 것을 사용하는 것입니다.

깊은 자주색 텍스트 : HTML 학습의 본질은

</body>

</html>

브라우저 주소 표시 줄에 http : //localhost/font_color.htm을 입력하면 브라우징 효과가 그림 4.7에 나와 있습니다.

그림 4.7 글꼴 색상 설정

독자는 코드 4.7의 글꼴 태그에서 색상 속성이 어떻게 사용되는지 배울 수있을뿐만 아니라 다양한 색상의 표현 방법에 익숙 할 수도 있습니다.

4.2.3 텍스트의 크기를 설정하십시오

크기는 또한 텍스트 크기를 설정하는 데 사용되는 태그의 속성입니다. 크기의 값은 1-7이고 기본값은 3입니다. 크기 속성 값 앞에 +와 문자를 추가하여 글꼴 크기의 초기 값에 대한 증분 또는 감소를 지정할 수 있습니다. font_size.htm이라는 d :/ web/ directory에서 웹 페이지 파일을 작성하고 코드 4.8에 표시된대로 코드를 작성하십시오.

코드 4.8 글꼴 크기 설정 : font_size.htm

<html>

<헤드>

</head>

<body>

크기는 1 : html 학습 입니다

크기는 2 : html 학습 입니다

크기는 3 : html 학습 입니다

크기는 4 : html 학습 입니다

크기는 5 : html 학습 입니다

크기는 6 : html 학습 입니다

크기는 7 : HTML 학습 입니다

</body>

</html>

브라우저 주소 표시 줄에 http : //localhost/font_size.htm을 입력하면 브라우징 효과가 그림 4.8에 나와 있습니다.

그림 4.8 글꼴 크기 설정

독자는 크기 값 전에 +와 - 문자를 추가하여 텍스트 크기를보다 유연하게 설정하려고 시도 할 수 있습니다.

4.2.4 텍스트의 글꼴을 설정하십시오

Face는 또한 텍스트 글꼴 (글꼴)을 설정하는 데 사용되는 태그의 속성입니다. HTML 웹 페이지에 표시된 글꼴은 브라우징 시스템에서 호출되므로 글꼴을 일관성있게 유지하려면 송 글꼴을 사용하는 것이 좋습니다. HTML 페이지는 기본적으로 송 글꼴을 사용합니다. font_face.htm이라는 d :/ web/ directory에서 웹 페이지 파일을 작성하고 코드 4.9에 표시된대로 코드를 작성하십시오.

코드 4.9 글꼴 글꼴 설정 : font_face.htm

<html>

<헤드>

</head>

<body>

글꼴은 송 글꼴입니다 : Qinyuanchun · Changsha-mao Zedong

글꼴은 kaishi에 있습니다 : Qinyuanchun · Changsha-mao Zedong

글꼴은 대담합니다 : Qinyuanchun · Changsha-mao Zedong

글꼴은 lishu입니다 : Qinyuanchun · Changsha-mao Zedong

</body>

</html>

브라우저 주소 표시 줄에 http : //localhost/font_face.htm을 입력하면 브라우징 효과가 그림 4.9에 나와 있습니다.

그림 4.9 글꼴 설정

저자는 독자가 볼 수 있도록 수정 된 글꼴의 텍스트 크기를 No. 5로 설정합니다.

4.2.5 텍스트를 기울여 만듭니다

이중 태그를 사용하여 는 적용 할 텍스트를 기울여 기사의 날짜와 같은 특수 효과를 달성 할 수 있습니다. 을 강조 태그라고하며 이탤릭체로 표시됩니다. 현재 태그보다 더 자주 사용됩니다. 작문 방법은 다음과 같습니다.

이것은 이탤릭 텍스트입니다

이것은 또한 이탤릭체입니다

4.2.6 텍스트를 대담하게 만드십시오

이중 태그를 사용하면 를 사용하면 텍스트가 굵게 표시되어 기사의 제목 부분과 같이 텍스트가 더 눈길을 끄는 것입니다. 는 레이블에 특별히 강조하며 텍스트에서도 대담합니다. 현재 태그보다 더 자주 사용됩니다. 작문 방법은 다음과 같습니다.

이것은 대담한 텍스트 입니다

이것은 또한 대담한 텍스트입니다

4.2.7 텍스트의 밑줄

이중 태그 를 사용하여 적용된 텍스트에 밑줄을 추가하십시오. 다음은 텍스트 기울기, 대담하고 밑줄이 든 포괄적 인 예입니다. font_style.htm이라는 d :/ web/ directory에서 웹 페이지 파일을 작성하고 코드 4.10에 표시된대로 코드를 작성하십시오.

코드 4.10 텍스트 수정 설정 : font_style.htm

<html>

<헤드>

</head>

<body>

이탤릭체 : Qinyuanchun · Changsha-mao Zedong

BOLDED : Qinyuanchun · Changsha-Mao Zedong

밑줄 : Qinyuanchun · Changsha-Mao Zedong

기울임 꼴 굵은 밑줄 : Qinyuanchun · Changsha-Mao Zedong

</body>

</html>

브라우저 주소 표시 줄에 http : //localhost/font_style.htm을 입력하면 브라우징 효과가 그림 4.10에 나와 있습니다.

그림 4.10 글꼴 수정 설정

저자는 모든 텍스트 크기를 <body> </body>의 No. 5로 설정하여 독자가 볼 수 있습니다.

- 참고 : 여러 태그에 동일한 텍스트가 포함 된 경우 포함 순서를 잘못 정렬 할 수 없습니다.

4.2.8 여러 타이틀 스타일 사용

웹 기사에서 제목의 중요성을 강조하기 위해 제목의 스타일은 비교적 특별합니다. HTML 기술은 타이틀의 스타일 태그 세트, 즉 이중 태그 <H1>에서 <H6>을 보호하며 텍스트 크기는 큰 수준의 제목에서 작은 것부터 작은 수준을 나타냅니다. 제목 태그에는 한 줄만 독점적이며 텍스트의 굵게, 텍스트의 중심이있는 기능이 있습니다. 이런 식으로 타이틀을 쉽게 설정하고 다단계 타이틀을 설정할 수 있습니다. font_h.htm이라는 d :/ web/ directory에서 웹 페이지 파일을 작성하고 코드 4.11에 표시된대로 코드를 작성하십시오.

코드 4.11 제목 설정 : font_h.htm

<html>

<헤드>

</head>

<body>

<H1> Fortune Magazine : 왜 Google이 번영 후에 넘어지지 않습니까? </h1>

& nbsp; & nbsp; & nbsp; & nbsp; 일부 업계 내부자들은 인터넷 검색 및 광고 시장에서 장기적인 독점 후 Google이 감소 할 수 있다고 생각합니다. ... 동시에, Open Mobile Alliance, 소셜 네트워킹 웹 사이트의 보편적 인 플랫폼 오픈 플랫폼과 같은 Google의 최근 새로운 계획 및 무선 주파수 대역에 대한 입찰에 수십억 달러의 투자가 널리 의문을 제기했습니다.

& nbsp; & nbsp; & nbsp; & nbsp; 최근 기사에 따르면 더 나은 검색 엔진이 나타나면 사람들은 망설임없이 Google을 포기할 것이라고 말합니다. 그러나 더 나은 검색 엔진이 있더라도 Google은 여전히 한동안 확고 할 수 있습니다. ...이 경우 웹 사이트 속도가 종종 결과의 열쇠가됩니다.

</body>

</html>

브라우저 주소 표시 줄에 http : //localhost/font_h.htm을 입력하면 브라우징 효과가 그림 4.11에 나와 있습니다.

그림 4.11 제목 설정

4.2.9 웹 페이지에서 특수 문자를 처리하는 법을 배우십시오

HTML에서 일부 문자는 <and>와 같은 특별한 의미를 가지고 있으며 태그의 왼쪽 및 닫기 괄호이며 태그는 HTML의 디스플레이를 제어합니다. 태그 자체는 브라우저에서만 구문 분석 할 수 있으며 페이지에 표시 할 수 없습니다. 그렇다면 HTML에서 <and>를 표시하는 방법은 무엇입니까? HTML은 표 4.1과 같이 웹 페이지에 표시 할 특수 문자를 작성하는 방법을 지정합니다.

표 4.1 HTML의 특수 문자

특별한 기호

HTML 코드

특별한 기호

HTML 코드

& lt;

™ (상표 기호)

&거래;

& gt;

® (등록 기호)

& reg;

(영어의 반 넓이)

& quot;

&타임스;

&분파;

&복사;

d :/ web/ directory, string.htm이라는 웹 페이지 파일을 작성하고 코드 4.12에 표시된대로 String.htm 코드를 작성하십시오.

코드 4.12 특수 문자 설정 : String.htm

<html>

<헤드>

</head>

<body>

태그 표시 방법 : & lt; html & gt;

인용문을 표시하는 방법 : "영어 반 폭이 이중 따옴표"

상표 디스플레이 방법 : & 거래;

등록 기호를 표시하는 방법 : & reg;

Show & sect;

쇼 & 타임즈;

</body>

</html>

브라우저 주소 표시 줄에 http : //localhost/string.htm을 입력하면 브라우징 효과가 그림 4.12에 나와 있습니다.

그림 4.12 특수 문자 설정

- 설명 : 기호는 별도로 표시해야하며 Code & amp;에서 사용해야합니다.

4.2.10 일부 HTML의 브라우저 구문 분석을보다 편리하게 무시하는 방법

웹 페이지 에서이 책과 유사한 HTML 코드 예제를 만드는 경우 모든 <and>를 & lt로 변환해야 할 수도 있습니다. 그리고 그것은 더 번거롭게 보일 것입니다. HTML 코드에서 <PLALTEXT> 및 <XMP> </xmp>이 문제를 쉽게 해결할 수 있습니다.

<PlainText>는 단일 태그입니다. HTML 코드에 삽입되면 모든 HTML 태그가 유효하지 않습니다. 즉, 브라우저는 <plaintext> 후에 모든 HTML 태그를 구문 분석하지 않고 페이지에 직접 표시하지 않습니다.

<xmp> </xmp>는 이중 태그로, 포함 된 컨텐츠의 태그 만 무효화하며 <xmp> </xmp>의 사용이 더 일반적입니다. html.htm이라는 d :/ web/ directory에서 웹 페이지 파일을 작성하고 코드 4.13에 표시된대로 코드를 작성하십시오.

코드 4.13 태그 설정을 무시하십시오 : html.htm

<html>

<헤드>

<title> 태그 설정을 무시하십시오 </title>

</head>

<body>

<H2> QinyUanchun · Changsha </h2>

<xmp> 추운 가을과 무관하게 오렌지 섬의 머리 인 Xiangjiang 강 북쪽으로갑니다. 붉은 산맥을 보면 숲이 염색됩니다. 강은 녹색이고 깨끗하며 수백 보트가 현재와 경쟁합니다. </xmp>

독수리는 하늘을 때리고, 물고기는 얕은 바닥에서 수영을하며, 모든 종류의 종은 서리 하늘에서 자유를 위해 경쟁합니다. 내가 광대 한 땅에 대해 슬퍼 할 때 누가 기복을 책임 지는가?

<일반 텍스트>

나는 수백 명의 커플을 여행하기 위해 데려 왔고, 지난 몇 년 동안 영광스러운시기를 기억했습니다. 급우들은 젊고, 그들의 총리입니다. 학자는 열정과 용기로 가득합니다. 국가들에게 말하고 말을 영감을 주었다. 당신이 중간에 물을 때리면 파도가 보트 비행을 중단 할 것임을 기억 한 적이 있습니까?

</body>

</html>

브라우저 주소 표시 줄에 http : //localhost/string.htm을 입력하면 브라우징 효과가 그림 4.13에 나와 있습니다.

그림 4.13 태그 설정을 무시하십시오

4.2.11 기타 텍스트 수정 방법

다른 필드의 요구를 충족시키기 위해 HTML에는 텍스트를 수정하는 다른 태그가 있습니다. 가장 일반적으로 사용되는 것은 슈퍼 스크립트 형식 레이블과 첨자 형식 레이블입니다. 경우에 따라 삭제 효과를 사용해야하며 HTML 중간 서시 태그를 사용할 수 있습니다.

- 슈퍼 스크립트 형식 태그는 이중 태그 이며, 주로 특정 숫자의 제곱 또는 입방 미터와 같은 수학적 지수를 나타내는 데 사용됩니다.

- 첨자 형식 레이블은 이중 레이블 이며 주로 주석 및 수학적 기본 표현에 사용됩니다.

-미드 스코어 레이블은 이중 레이블 <Thike> </Strike>이며 주로 삭제 효과에 사용됩니다.

d :/ web/ directory의 웹 페이지 파일을 Other.htm이라는 이름으로 표시하고 코드 4.14에 표시된대로 코드를 작성하십시오.

코드 4.14 기타 수정 태그 설정 : 기타 .htm

<html>

<헤드>

<title> 태그 수정을위한 기타 설정 </title>

</head>

<body>

QinyUanchun 창샤 !

수학 지수의 표현 : 2 <up> 3 = 8, 100 <pup> 2 = 10000 <hr />

QinyUanchun changsha !

수학적 기본 숫자의 표현 : log 3 81 = 4, log 5 125 = 3 <hr />

삭제 효과 : <trike> 삭제되었습니다 </strike>

</body>

</html>

브라우저 주소 표시 줄에 http : //localhost/other.htm을 입력하면 브라우징 효과가 그림 4.14에 나와 있습니다.

그림 4.14 다른 수정 태그의 설정