마크업 언어 - text_HTML/Xhtml_Web 페이지 제작을 위한 CSS 스타일 지정

13장 텍스트 스타일 지정 CSS를 사용하여 텍스트 스타일을 설정하는 방법을 설명하는 장을 만드는 것이 좋을 것 같습니다. 일반적으로 표준을 완전히 따르지는 않더라도 CSS를 가장 많이 사용하는 부분은 텍스트 콘텐츠를 다루는 부분일 것입니다. . Script House HTML Tutorial 칼럼으로 돌아가려면 여기를 클릭하세요. CSS 튜토리얼을 보려면 여기를 클릭하세요.
위: 마크업 언어 - CSS 레이아웃. Chapter 13 텍스트 스타일 지정
CSS를 사용하여 텍스트 스타일을 설정하는 방법을 논의하는 장을 활용하는 것이 좋을 것 같습니다. 일반적으로 웹 사이트에서도 CSS를 가장 많이 사용하는 곳은 텍스트 콘텐츠를 처리하는 것입니다. 웹 페이지에서 반복되는 태그를 제거하는 것은 디자이너에게 매우 매력적이며 텍스트를 제어하기 위해 CSS를 사용하는 것의 큰 이점을 보는 것은 어렵지 않습니다. .
우리는 이전의 많은 예를 통해 CSS가 다양한 상황을 처리할 수 있다는 것을 알고 있으며, 텍스트 스타일을 설정하는 것은 가장 기본적인 웹 페이지에도 디자인 요소를 추가하는 가장 쉬운 방법입니다. 동시에 CSS를 사용하여 텍스트에 스타일을 추가하면 페이지에 불필요한 이미지를 추가하는 것을 피할 수 있습니다.
이 장에서는 CSS가 어떻게 지루하고 평범한 텍스트를 다른 수준으로 끌어올릴 수 있는지 살펴보겠습니다. 크기 및 글꼴). 하이퍼텍스트를 멋지게 보이게 만드는 방법
과거에는 CSS 고급 기능을 완전히 지원하지 않는 약간 오래된 브라우저에서도 텍스트 스타일을 지정하는 것이 CSS의 가장 좋은 작업 중 하나입니다. 크기와 굵기 이외의 효과를 얻기 위해 텍스트를 디자인하여 오늘날의 표준으로는 견딜 수 없고 사용하기 어려운 웹 페이지를 만듭니다. (텍스트가 대부분 이미지로 표현되는 웹 페이지를 본 적이 있습니까? 그런데 당신과 나는 우연히 텍스트를 사용하고 있습니다. 브라우저...)
이미지 사용에 대한 몇 가지 대안을 제공하고 위 질문에 답하기 위해 이 장에서는 아직 스타일이 지정되지 않은 텍스트부터 시작하여 점차적으로 다양한 CSS를 추가하겠습니다. 눈길을 끄는 디자인이 되도록 규칙을 적용합니다. 시시각각 변하는 타임즈
는 브라우저의 기본 글꼴로 처리할 텍스트를 보는 것부터 시작하는데, 제 경우에는 기본 글꼴이 16픽셀 타임즈인데, 이 때문에 표시되는 텍스트는 앤티앨리어싱 방식으로 그려집니다. Windows XP를 사용하고 ClearType을 활성화하면 비슷한 효과를 볼 수도 있습니다.
Times(또는 변형 Times New Roman)는 많은 브라우저에 기본값이 있습니다. 그러나 이 글꼴은 사용자가 선호하는 글꼴로 쉽게 변경할 수 있으므로 이 기본값을 그대로 사용할 수는 없습니다.
그림 1301은 이 장에서 사용했지만 아직 추가되지 않은 글꼴을 보여줍니다. 스타일:

로 표시된 간단한 제목과 집 꾸미기 팁 세 문단

그림 13-1 제목과 텍스트를 표시하는 브라우저의 기본 효과 줄 높이 변경
가장 간단하고 효과적인 텍스트 스타일 효과 중 하나는 줄 높이 속성입니다. 텍스트의 각 줄 사이에 약간의 추가 공간을 추가하면 텍스트 단락을 더 쉽게 읽을 수 있고 더 멋진 효과를 가져올 수도 있습니다.
다음 CSS 규칙을 태그에 추가하면 됩니다. 물론 이 규칙을 다른 태그에도 추가할 수 있습니다.

.

body {
line-height: 1.5em;
}

이 코드의 의미는 다음과 같습니다. 페이지의 텍스트 높이는 텍스트 높이의 1.5배여야 합니다. line-height는 글꼴 크기에 따라 달라지기 때문에 em 단위를 사용하는 것이 좋습니다.
그림 13-2에서는 -height 이후의 줄 추가 효과를 보여줍니다.

그림 13-2 기본 텍스트에 행 높이를 추가한 후의 효과
벌써 보기에도 좋고, 작은 행 높이로도 가능합니다. 효과가 정말 대단합니다.
                                                                                      #p# 모두 패밀리에 있습니다
물론 글꼴을 변경할 수도 있지만 사용자 시스템에 설치된 글꼴에 따라 제한될 수 있다는 점에 유의해야 합니다.
그런 다음 글꼴 패밀리 속성을 인스턴스로 사용합니다. 여기서의 개념은 사용자가 목록의 첫 번째 글꼴을 설치하지 않은 경우 쉼표로 구분하여 글꼴 목록을 지정하는 것입니다. , 브라우저는 두 번째 글꼴을 선택합니다.

본문 {
글꼴군: Georgia, Times, serif;
줄 높이: 1.5em;
}

이전 예에서는 "모든 텍스트를 Georgia 글꼴로 수정합니다. 사용자가 Georgia를 설치하지 않은 경우 대신 Times를 사용하고, 사용자가 Times를 설치하지 않은 경우 기본 serif 글꼴을 사용합니다.
그림" 13-3은 예제와 글꼴 계열의 효과를 보여줍니다.

그림 13-3 Georgia 글꼴에 표시된 예제의 효과. 이름에 공백이 포함된 글꼴
이름에 공백이 포함된 글꼴(예: Lucida Grande)을 지정하려면 전체 글꼴 이름을 따옴표로 묶어야 합니다.
다음 예에서는 Lucida Grande(the 유명한 Macintosh 글꼴)을 사용하려는 글꼴로 지정하고 Trebuchet MS(잘 알려진 Windows 글꼴)를 두 번째 후보로 지정하고 처음 두 글꼴이 설치되지 않은 경우에는 Use the the 기본 산세리프 글꼴.

body {
font-family: "Lucida Grande", "Trebuchet MS", sans-serif;
line-height : 1.5em;
}

커닝(문자 간격이라고도 함)
커닝은 인쇄 업계에서 텍스트 간격을 설명하는 데 사용되는 용어로 동의어인 CSS 속성은 문자 간격입니다.

태그에 letter-spacing 속성을 사용하여 예제 제목을 더욱 멋지게 만들 수 있습니다. 이미지 텍스트 생성을 시작하기 위해 이미지 편집기를 열 필요가 없습니다.
먼저 제목의 텍스트를 압축하기 위해 문자 간격 속성에 음수 값을 추가해 보겠습니다.

h1 {
letter -spacing: -2px;
}

수정 결과는 그림 13-4에서 볼 수 있습니다.

그림 13-4에서는 < h1> 음수에 문자 간격
을 추가하거나 양수에 문자 간격을 추가하고 글꼴 스타일 속성을 사용하여 제목을 기울임꼴로 변경하는 것이 좋습니다.

h1 {
letter-spacing: 4px;
font-style: italic;
}

그림 13-5는 이후의 효과입니다. 위 내용에 따라 수정하면 텍스트가 매우 눈길을 끌게 됩니다. 텍스트 간격을 너무 과장하면 내용이 읽기 어려워지기 쉽기 때문에 현명한 조치입니다. 누가 관심을 가질까요? 매력적이지 않나요?

그림 13-5 양수 문자 간격 값을 사용하고 이탤릭체를 적용합니다
                                                                                      #p# 첫 단어를 대문자로 사용하기
첫 번째 단어를 대문자로 사용하는 것은 인쇄 업계에서 매우 흔한 일입니다. 단락에 화려하고 우아한 효과를 더할 수 있으며, 이 효과는 이미지를 사용하지 않고 CSS만 사용하여 얻을 수 있습니다.
먼저, 첫 번째 단락의 첫 문자를 호출할 수 있도록 "스타일 앵커"를 마크업 소스 코드에 추가해야 합니다. 태그 집합에 "I"를 래핑하고 이를 class= drop으로 지정합니다. , 페이지나 전체 웹사이트에서 대문자 효과를 재사용할 수 있다면

I 라텍스 페인트로 그림을 그리는 경우 작업이...

CSS2 사양을 완벽하게 지원하는 일부 최신 브라우저에서는 다음을 사용할 수 있습니다. 첫 글자 의사 클래스 설정 단락 첫 번째 단어 추가 태그를 추가하지 않고도 효과를 얻을 수 있지만, 안타깝게도 많은 브라우저에서는 이 효과를 지원하지 않습니다.
이제 첫 번째 단락의 "I"를 완전히 제어할 수 있습니다. 글꼴을 왼쪽에 띄우고(다른 텍스트가 둘러싸지 않도록) 장식용 배경과 테두리도 추가합니다.

.drop {
float: left;
글꼴 크기: 400%;
줄 높이: 1em;
여백: 4px 10px 10px 0;
패딩: 4px 10px;
테두리: 2px 솔리드 #ccc;
배경: # eee;
}

현재 샘플 콘텐츠에 추가한 모든 스타일을 결합한 그림 13-6은 첫 번째 단어를 대문자로 표시하는 브라우저의 효과입니다.

그림 13-6 CSS로 만든 첫 번째 단어를 대문자로 표시하는 효과. 텍스트 정렬
은 또한 인쇄 업계에서 영감을 받아 텍스트에 왼쪽 및 오른쪽 정렬 효과를 적용할 수 있습니다. 텍스트는 단어 사이의 거리를 늘려 너비를 만듭니다. 각 선의 길이를 동일하게 하여 촘촘하고 잘 정의된 기둥 효과를 만들어냅니다.

body {
글꼴 계열: Georgia, Times, serif;
줄 높이: 1.5em;
text-align: justify;
}

그림 13-7은 텍스트 예시이며 이제 왼쪽과 오른쪽으로 정렬됩니다!

그림 13-7 텍스트가 텍스트와 왼쪽 및 오른쪽으로 정렬되는 효과 -align 속성
텍스트 내용은 왼쪽과 오른쪽에 직선으로 정렬됩니다. text-align 속성에 사용할 수 있는 다른 설정은 왼쪽, 오른쪽, 가운데입니다.

h1 {
letter-spacing: 4px; -style: italic; align: center;

}
그림 13-8은 제목을 중앙에 맞춘 후의 효과입니다.

그림 13- 8 textalign 속성을 사용하여

Centered
를 변경합니다.                                                                                       #p# 텍스트 변환
에는 표시된 내용의 대소문자에 관계없이 텍스트 내용의 대소문자를 변환하는 text-transform 속성이 있습니다. 예를 들어 제목은

으로 표시됩니다.

그림 팁

CSS에서 text-transform 속성을 사용하는 한 제목 전체를 대문자로 변환할 수 있습니다. 대문자로) 소문자로) 마크업 소스 코드의 내용을 수정할 필요 없이 이전에

h1 {

문자 간격: 4px;

글꼴 스타일: italic;

text-align: center;

text -transform: uppercase; }

결과는 13-9와 같습니다. 마크업 소스 코드로 싸울 필요 없이 CSS만 변경하면 됩니다. 페이지(또는 전체 웹사이트)에서 특정 태그의 대소문자 사용.

그림 13-9 CSS를 사용하여 제목을 대문자로 만듭니다. 작은 대문자

대부분의 브라우저는 내용을 작은 대문자로 수정할 수 있는 글꼴 변형 속성을 지원합니다(즉, 내용을 다양한 크기의 대문자 텍스트로 표시함).
제목에 글꼴을 추가해 보겠습니다. 예 -variant 속성:

h1 {
letter-spacing: 4px;
text-align: center;

font-variant: small-caps;

}

그림 13-10은 제목에 작은 대문자를 사용한 효과를 보여줍니다. 이는 마크업 구문과 CSS를 사용하여 인쇄 산업을 모방하는 또 다른 방법입니다.

그림 13-10 작은 대문자를 사용한 제목

                                                                                      #p#
단락의 첫 번째 줄 들여쓰기는 다시 한 번 인쇄 산업에 맞춰져 있습니다(어머, 여기서 추세가 보이나요?). text-indent 속성을 사용하여 단락의 첫 번째 줄을 들여쓸 수 있습니다. 양수 값을 추가하면 지정된 양만큼 텍스트가 들여쓰기됩니다.
예제의 각 단락을 3em씩 들여쓰거나 3자가 차지할 수 있는 최대 너비를 제거하겠습니다. 첫 번째 단어와 겹치지 않도록 합니다. 모든

의 첫 번째 줄을 들여쓰기하는 데 필요한 CSS는 다음과 같습니다.

p {
text-indent: 3em;
}

그림 13-11은 수정 효과를 보여주며, 각 텍스트의 첫 번째 줄을 볼 수 있습니다. 우리는 들여쓰기 길이가 글꼴 크기에 비례하기 때문에 em 단위를 사용하기로 결정했습니다. 🎜>
그림 13-11 text-indent 속성을 사용하여 단락의 첫 줄을 들여쓰는 효과 요약
텍스트 스타일을 지정하기 위한 여러 CSS 속성을 논의한 후, 대부분의 경우 좋은 효과를 만들기 위해 그리기 도구에 의존할 필요는 없다는 점을 이해하시기 바랍니다. 일반적으로 약간의 스타일만 추가하면 됩니다.
물론 회사 로고나 특정 페이지를 만들 때 사용해야 하는 특수 글꼴과 같이 텍스트를 그림으로 변환해야 하는 경우도 있습니다. 모든 요소의 핵심은 균형입니다. 먼저 CSS로 스타일을 지정하여 마크업 소스 코드를 더 깔끔하고 사용하기 쉽게 만드세요.
CSS는 텍스트를 수정하고 스타일 컨트롤을 추가하는 방법을 제공합니다. 결과는 좋을 것입니다. 놀랍게도 이는 짧고 유연한 마크업 소스 코드를 계속 유지할 수 있는 훌륭한 디자인 도구가 될 수 있습니다.