HTML 웹페이지_HTML/Xhtml_웹페이지 제작을 위한 다양한 글꼴 형식 세부 수정

이 섹션에서는 독자들이 HTML의 다양한 글꼴 형식의 변화를 파악하고 보다 전문적인 웹 페이지를 만들 수 있도록 텍스트의 세부적인 수정부터 시작합니다.
4.2 다양한 텍스트 수정
이전 섹션에서는 큰 문단에 대한 다양한 설정을 배웠는데, 텍스트 자체를 수정하는 것이 더 매력적인 것 같습니다. 이 섹션에서는 독자들이 HTML의 다양한 글꼴 형식의 변화를 파악하고 보다 전문적인 웹 페이지를 만들 수 있도록 텍스트의 세부적인 수정부터 시작합니다.
4.2.1 텍스트 스타일 설정을 위한 기본 태그—
글꼴 스타일 설정을 위한 기본 태그는 이며, 그 안에 포함된 텍스트가 스타일 범위입니다. 초보자의 HTML 코드 작성에서는 텍스트 와 같이 가 여러 번 중첩되기 쉽습니다. 또 다른 상황은

텍스트

와 같이 잘못 정렬된 레이블 중첩입니다.. 코드 작성을 표준화하고 불필요한 오류를 피하기 위해 독자는 학습할 때 주의해야 합니다.
4.2.2 텍스트 색상 설정
color는 텍스트 색상을 설정하는 데 사용되는 태그의 속성 중 하나입니다. D:web 디렉터리에 웹 페이지 파일을 만들고 이름을 Font_color.htm으로 지정한 다음 코드 4.7과 같이 코드를 작성합니다.
코드 4.7 글꼴 색상 설정:font_color.htm





밝은 빨간색 텍스트: HTML 학습의 본질은 무엇이든 사용하는 것입니다.

진한 빨간색 텍스트: HTML 학습의 본질은 무엇이든 사용하는 것입니다.

밝은 녹색 텍스트: HTML 학습의 본질은 무엇이든 사용하는 것입니다.

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

하늘색 텍스트: HTML 학습의 본질은 무엇이든 사용하는 것입니다.

진한 파란색 텍스트: HTML 학습의 본질은 무엇이든 사용하는 것입니다.

밝은 노란색 텍스트: HTML 학습의 본질은 무엇이든 사용하는 것입니다.

어두운 노란색 텍스트: HTML 학습의 본질은 무엇이든 사용하는 것입니다.

연한 청록색 텍스트: HTML 학습의 본질은 무엇이든 사용하는 것입니다.

어두운 청록색 텍스트: HTML 학습의 본질은 무엇이든 사용하는 것입니다.

밝은 보라색 텍스트: HTML 학습의 본질은 무엇이든 사용하는 것입니다.

진한 보라색 텍스트: HTML 학습의 본질은 무엇이든 사용하는 것입니다.



브라우저 주소창에 http://localhost/font_color.htm을 입력하면 그림 4.7과 같은 브라우징 효과가 나타납니다.

그림 4.7 글꼴 색상 설정
독자는 Code 4.7을 통해 글꼴 태그의 색상 속성 사용법을 배울 수 있을 뿐만 아니라 다양한 색상의 표현 방법도 익힐 수 있습니다.
4.2.3 텍스트 크기 설정
size는 텍스트 크기를 설정하는 데 사용되는 태그의 속성이기도 합니다. 크기 값은 1~7이고 기본값은 3입니다. 크기 속성 값 앞에 "+" 또는 "-" 문자를 추가하여 글꼴 크기의 초기 값을 기준으로 증가 또는 감소를 지정할 수 있습니다. D:web 디렉터리에 웹 페이지 파일을 만들고 이름을 Font_size.htm으로 지정한 다음 코드 4.8과 같이 코드를 작성합니다.
코드 4.8 글꼴 크기 설정:font_size.htm





크기는 1: HTML 학습

크기는 2: HTML 학습

크기는 3: HTML 학습

크기는 4: HTML 학습

크기는 5: HTML 학습

크기는 6: HTML 학습

크기는 7: HTML 학습



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

그림 4.8 글꼴 크기 설정
독자는 크기 값 앞에 "+" 또는 "-" 문자를 추가하여 텍스트 크기를 보다 유연하게 설정할 수 있습니다.
4.2.4 텍스트 글꼴 설정
face는 텍스트 글꼴(글꼴 스타일)을 설정하는 데 사용되는 태그의 속성이기도 합니다. HTML 웹 페이지에 표시되는 글꼴은 브라우저 시스템에서 호출되므로 글꼴의 일관성을 유지하기 위해 Song 글꼴을 사용하는 것이 좋으며, HTML 페이지에서도 기본적으로 Song 글꼴을 사용합니다. D:web 디렉터리에 웹 페이지 파일을 만들고 이름을 Font_face.htm으로 지정한 다음 코드 4.9와 같이 코드를 작성합니다.
코드 4.9 글꼴 설정:font_face.htm





글꼴은 노래 스타일입니다: 친위안춘·창사-마오쩌둥

글꼴은 일반 스크립트입니다: Qinyuanchun·Changsha-Mao Zedong

굵은 글꼴: 친위안춘·창사-마오쩌둥

글꼴은 공식 스크립트입니다: 친위안춘·창사-마오쩌둥


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

그림 4.9 글꼴 설정
저자는 독자의 편의를 위해 수정된 글꼴 부분의 글자 크기를 5로 설정했습니다.
4.2.5 텍스트 기울이기
기사 날짜와 같은 특수 효과를 얻으려면 텍스트를 기울이려면 이중 태그 를 사용하세요. 은 강조 태그라고도 하며 이탤릭체로 표시됩니다. 현재 태그보다 더 자주 사용됩니다.
이탤릭체입니다
이것도 이탤릭체로 되어있습니다
4.2.6 텍스트를 굵게 표시
이중 태그를 사용하여 기사 제목과 같이 텍스트를 굵게 표시하면 눈길을 더 끌 수 있습니다. 는 특수 강조 태그라고 하며, 현재는 태그보다 글자가 굵게 표시되는 경우가 많습니다. 작성 방법은 다음과 같습니다.
굵은 글씨입니다
이것도 굵은 글씨입니다
4.2.7 밑줄 텍스트
이중 태그 를 사용하여 영향을 받은 텍스트에 밑줄을 추가하세요. 다음은 기울임꼴, 굵게, 밑줄이 그어진 텍스트의 포괄적인 예입니다. D:web 디렉터리에 웹 페이지 파일을 만들고 이름을 Font_style.htm으로 지정한 다음 코드 4.10과 같이 코드를 작성합니다.
코드 4.10 텍스트 수정 설정:font_style.htm





이탤릭체: 친위안춘·창사-마오쩌둥

볼드체: 친위안춘·창사-마오쩌둥

밑줄: 친위안춘·창사-마오쩌둥

이탤릭체 굵은 밑줄: 친위안춘·창사-마오쩌둥


브라우저 주소창에 http://localhost/font_style.htm을 입력하면 그림 4.10과 같은 브라우징 효과가 나타납니다.

그림 4.10 글꼴 수정 설정
저자는 독자의 편의를 위해 내의 모든 텍스트 크기를 5로 설정했습니다.
— 참고: 여러 태그에 동일한 텍스트가 포함된 경우 포함 순서가 잘못될 수 없습니다.
4.2.8 다양한 제목 스타일 사용
웹 기사에서는 제목의 중요성을 부각시키기 위해 제목의 스타일이 비교적 특별합니다. HTML 기술은

에서

까지의 이중 태그인 제목 스타일 태그 세트를 보호합니다. 텍스트 크기는 큰 것부터 작은 것까지 다양한 수준의 제목을 나타냅니다. title 태그는 한 줄씩 차지하고, 글자는 굵게, 글자는 중앙에 배치되는 특징이 있습니다. 이런 식으로 제목을 설정하는 것이 매우 쉽고, 다단계 제목을 설정할 수 있습니다. D:web 디렉터리에 웹 페이지 파일을 만들고 이름을 Font_h.htm으로 지정한 다음 코드 4.11과 같이 코드를 작성합니다.
코드 4.11 제목 설정:font_h.htm

타이틀 1번

제목 2번

타이틀 3번

타이틀 4번

타이틀 5번

타이틀 6번

Fortune Magazine: Google이 번영하지 못하고 쇠퇴하는 이유

　

잠재적인 문제 발생

　

업계 일각에서는 오랫동안 인터넷 검색과 광고 시장을 독점해 온 구글이 번영했다가 쇠퇴할 수도 있다고 생각한다. ...동시에 소셜 네트워킹 사이트 OpenSocial의 일반 플랫폼인 Open Mobile Alliance와 무선 스펙트럼 대역 입찰에 수십억 달러를 투자할 수 있는 등 Google이 최근 출시한 많은 새로운 계획도 이루어졌습니다. 널리 질문됩니다.
　

계속 검색 독점

　

최근 더 좋은 검색 엔진이 등장하면 사람들은 주저 없이 구글을 버릴 것이라는 기사가 나오고 있습니다. 그러나 더 나은 검색 엔진이 등장하더라도 Google은 한동안 계속 존재할 것입니다. ...이 경우 사이트 속도가 승패를 좌우하는 경우가 많습니다.

브라우저 주소창에 http://localhost/font_h.htm을 입력하면 그림 4.11과 같은 브라우징 효과가 나타납니다.

그림 4.11 제목 설정
4.2.9 웹 페이지에서 특수 문자 처리 방법 배우기
HTML에서 일부 문자는 특별한 의미를 갖습니다. 예를 들어 ""은 태그의 왼쪽 및 오른쪽 대괄호이며 태그 자체는 브라우저에서만 구문 분석할 수 있습니다. 표시된 페이지에서는 사용할 수 없습니다. 그렇다면 HTML에서 ""을 어떻게 표시할까요? HTML은 표 4.1에 표시된 것처럼 웹 페이지에 표시될 수 있도록 일부 특수 문자를 작성하는 방법을 지정합니다.
표 4.1 HTML의 특수 문자

특수 기호
HTML 코드
특수 기호
HTML 코드
<
™(상표 기호)
™
>
>
®(등록 기호)
®
""(영문 반각)
"
×
×
§
§
©(저작권 기호)
©
D:web 디렉터리에 웹 페이지 파일을 만들고 이름을 string.htm으로 지정한 다음 코드 4.12와 같이 string.htm 코드를 작성합니다.
코드 4.12 특수문자 설정: string.htm






태그 표시 방법:

따옴표 표시 방법 : "영문 반각 큰따옴표"

상표 표시 방법: ™

등록 기호 표시 방법: ®

저작권 기호 표시 방법: ©

쇼§

쇼 ×



브라우저 주소창에 http://localhost/string.htm을 입력하면 그림 4.12와 같은 브라우징 효과가 나타납니다.

그림 4.12 특수문자 설정
— 참고: & 기호를 별도로 표시하려면 & 코드를 사용해야 합니다.
4.2.10 브라우저의 HTML 일부 구문 분석을 더욱 편리하게 무시하는 방법
웹 페이지에서 이 책에 나오는 것과 유사한 HTML 코드 예제를 만들면 을 모두 <로 변환해야 하는 번거로움이 있습니다. HTML 코드의 및 <xmp></xmp>을 사용하면 이 문제를 쉽게 해결할 수 있습니다. <br><plaintext>은 단일 태그입니다. HTML 코드에 삽입되면 그 뒤에 오는 모든 HTML 태그가 유효하지 않게 됩니다. 즉, 브라우저는 <plaintext> 뒤에 오는 모든 HTML 태그를 구문 분석하여 페이지에 직접 표시하지 않습니다. . <br><xmp></xmp>은 포함된 콘텐츠의 태그만 무효화하는 이중 태그입니다. <xmp></xmp>가 더 일반적으로 사용됩니다. D:web 디렉터리에 웹 페이지 파일을 만들고 이름을 html.htm으로 지정한 다음 코드 4.13과 같이 코드를 작성합니다. <br>코드 4.13 태그 설정 무시: html.htm <br> <br> <br> <title>태그 설정 무시</title> <br> <br> <br><h2>친위안춘·창사</h2> <br><xmp>독립의 추운 가을, 오렌지섬 머리로 <strong>향강 북쪽</strong>으로 가세요. <br>붉게 물든 산과 온통 물든 숲을 보세요. <br>강은 푸르르고 <u>수백 척의 배들이 물살을 다투고 있습니다. </u> <br></xmp> <br>독수리는 하늘을 치고, <strong>물고기는 얕은 바닥으로 날아가고, </strong> <br> 온갖 서리가 내린 하늘이 자유를 위해 경쟁한다. <br>작은 윤곽이 아쉽지만, <u>무한한 대지에 물어보세요</u>, 부침은 누구의 책임인가요? <br> <br><plaintext> <br>수백 명의 커플을 데리고 여행을 떠나세요. <br>영광스러운 과거를 추억해보세요. <br> 같은 반 친구인 소년이 전성기를 맞이하고 있다. <br> 선비는 화를 내며 팡치우를 꾸짖는다. <br> 나라를 가리키며 영감을 주는 말, <br> 똥 흙은 만 가구 같았습니다. <br> <strong> 물살 한가운데에 </strong> 물이 부딪혀 파도가 보트를 멈췄다는 사실을 기억하시나요? <br> <br> <br>브라우저 주소창에 http://localhost/string.htm을 입력하면 그림 4.13과 같은 브라우징 효과가 나타납니다. <br><img style="max-width:90%" alt="" style="max-width:90%" src="http://files.jb51.net/file_images/web/2009422058213177807.jpg"> <br>그림 4.13 라벨 설정 무시 <br><strong>4.2.11 기타 텍스트 수정 방법</strong> <br>다양한 필드의 요구 사항을 충족하기 위해 HTML에는 텍스트를 수정하는 다른 태그도 있습니다. 더 일반적으로 사용되는 태그는 위 첨자 형식 태그와 아래 첨자 형식 태그입니다. 어떤 경우에는 삭제 효과가 필요할 수도 있습니다. 즉, HTML 밑줄 태그를 사용할 수 있습니다. <br> - 위 첨자 형식 레이블은 이중 레이블 으로, 특정 숫자의 제곱이나 세제곱과 같은 수학적 지수를 나타내는 데 주로 사용됩니다. <br> - 아래 첨자 형식 태그는 이중 태그 이며 주로 주석 및 수학적 기본 표현에 사용됩니다. <br>—밑줄 태그는 이중 태그 <strike></strike>로 주로 삭제 효과에 사용됩니다. <br>D:web 디렉터리에 웹 페이지 파일을 생성하고 이름을 other.htm으로 지정한 후 코드 4.14와 같이 코드를 작성합니다. <br>코드 4.14 기타 수정 태그 설정: other.htm <br> <br> <br> <title>기타 수정 태그 설정</title> <br> <br> <br><font size="5"> <br>친위안춘^창사! <br> <br>수학적 지수 표현: 2³=8, 100²=10000<br><hr> <br>친위안춘_창사! <br> <br>수학적 기초의 표현: log₃81=4, log₅125=3<br><hr> <br>삭제 효과: <strike>삭제되었습니다</strike> <br></font> <br> <br> <br>브라우저 주소창에 http://localhost/other.htm을 입력하면 그림 4.14와 같은 브라우징 효과가 나타납니다. <br><img style="max-width:90%" alt="" style="max-width:90%" src="http://files.jb51.net/file_images/web/2009422058217877808.jpg"> <br>그림 4.14 기타 수정 태그 설정</plaintext></plaintext></plaintext></plaintext></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="웹페이지 제작 초보자: HTML 하이퍼링크 A tag_HTML/Xhtml_웹페이지 제작 사용법 배우기" href="http://m.php.cn/ko/faq/12298.html">웹페이지 제작 초보자: HTML 하이퍼링크 A tag_HTML/Xhtml_웹페이지 제작 사용법 배우기</a></span><span>다음 기사：<a class="dBlack" title="웹페이지 제작 초보자: HTML 하이퍼링크 A tag_HTML/Xhtml_웹페이지 제작 사용법 배우기" href="http://m.php.cn/ko/faq/12302.html">웹페이지 제작 초보자: HTML 하이퍼링크 A tag_HTML/Xhtml_웹페이지 제작 사용법 배우기</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="http://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ko/faq/348757.html" title="HTML 지식 요약" class="aBlack">HTML 지식 요약</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348804.html" title="HTML을 빨리 배우는 방법" class="aBlack">HTML을 빨리 배우는 방법</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348873.html" title="html xhtml xml의 차이점" class="aBlack">html xhtml xml의 차이점</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348884.html" title="src와 href 속성의 차이점" class="aBlack">src와 href 속성의 차이점</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348902.html" title="HTML5 및 CSS 대체 사용 정보" class="aBlack">HTML5 및 CSS 대체 사용 정보</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><p>집</p></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><p>강의</p></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/ko/login"><b class="icon5"></b><p>나의</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ko/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><span>집</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><span>강의</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/article.html"><b class="icon3"></b><span>기사</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/dic.html"><b class="icon6"></b><span>사전</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course/type/99.html"><b class="icon7"></b><span>수동</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/xiazai/"><b class="icon8"></b><span>다운로드</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/faq/zt" title="주제"><b class="icon12"></b><span>주제</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ko/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ko/" >집</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/article.html" class="hover">기사</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/course.html" >강의</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/faq/zt" >주제</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/xiazai" >다운로드</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/game" >게임</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/dic.html" >사전</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>