드롭 캡(텍스트에 포함된 드롭 캡)은 단락의 첫 글자로, 나머지 문자보다 크며, 맨 위가 단락의 첫 번째 줄 수준에 오도록 배치됩니다. 이미지에서 텍스트에 삽입된 첫 글자 장식의 예를 볼 수 있습니다.

그건 그렇고, WordPress에는 포함된 텍스트를 자동으로 생성하고 아래로 이동하는 특수 플러그인(wordpress.org/extend/plugins/drop-caps)이 있습니다. 대문자. 놀라운! 그러나 플러그인을 사용하고 싶지 않고(아마도 사용하지 않을 것이라고 확신합니다) 여러 게시물과 특정 위치에 드롭 캡을 만들어야 하는 경우에는 어떻게 해야 합니까?

좋은 소식은 대문자를 만드는 데 플러그인이 필요하지 않다는 것입니다. 필요한 것은 약간의 CSS와 스팬 태그뿐입니다. CSS 파일을 열고 다음 코드를 추가하세요.

Span.dropcaps( 글꼴 계열:조지아, serif; 색상: #ccc; 글꼴 크기: 46px; 부동 소수점: 왼쪽; 글꼴 두께: 400; 줄 높이: 1em; 여백-하단: -0.4em; 여백-오른쪽 : 0.09em; 위치: 상대; )

이 같은. 물론 디자인과 텍스트에 어울리는 스타일이 필요합니다. 예를 들어 속성 ​​값: 글꼴 크기, 여백 및 줄 높이는 디자인과 텍스트에 따라 선택해야 합니다.

태그 스팬

텍스트의 대문자에 스타일을 적용하려면 스팬 태그에 대문자를 "감싸"고 적절한 클래스를 지정해야 합니다.

ㅏ

의사 요소:첫 글자

의사 요소인 first-letter를 사용하여 텍스트의 첫 번째 문자 스타일을 지정할 수도 있습니다. 그러나 제한된 수의 속성이:first-letter 의사 요소에 적용될 수 있습니다. 이는 글꼴, 색상, 배경, 테두리, 여백 및 패딩과 관련된 속성입니다. 주목해야 할 또 다른 점은 pseudo-element:first-letter가 이전 브라우저에서는 작동하지 않는다는 것입니다.

P:첫 글자( 글꼴 계열:조지아, serif; 색상: #ccc; 글꼴 크기: 46px; 부동 소수점: 왼쪽; 글꼴 두께: 400; 줄 높이: 1em; 여백-하단: -0.4em; 여백 -오른쪽: 0.09em; 위치: 상대; )

실제로 CSS를 사용하여 대문자를 편집하는 몇 가지 방법이 있습니다.

종종 사이트에 자료를 추가하거나 포럼에 새 주제를 생성할 때 서둘러 사용자가 소문자(소문자)로 문장(제목)을 쓰기 시작할 수 있습니다. 이것은 어느 정도 실수입니다.

이 문제를 해결하기 위한 몇 가지 옵션을 보여 드리겠습니다. jQuery가 출판 전에 상황을 수정할 수 있는 경우 PHP와 CSS는 이미 출판된 자료에 더 적합합니다.

PHP에서 대문자로 된 문자열의 첫 글자

PHP에는 줄의 첫 번째 문자를 대문자로 변환하는 "ucfirst"라는 함수가 있지만, 키릴 문자에서는 제대로 작동하지 않는다는 단점이 있습니다.

이를 위해 우리는 우리만의 작은 함수를 작성하겠습니다. 구현은 다음과 같습니다.

이 버전에서는 실제로 우리에게 필요한 대문자로 시작하는 문장을 받게 됩니다.

CSS에서 문자열의 첫 글자를 대문자로 지정

이 방법은 시각적으로(즉, 제안 사항이 사이트의 소스 코드에 있는 대로 표시됨) 첫 번째 문자를 대문자로 변환합니다.

사용법은 다음과 같습니다.

첫 번째 문장

두 번째 문장

세 번째 문장

네 번째 문장

#content p:first-letter ( text-transform: 대문자; )

“first-letter” 의사 요소와 “text-transform” 속성을 사용하여 단락의 각 첫 글자에 대한 디자인을 설정합니다.

jQuery에서 대문자로 된 문자열의 첫 글자

앞서 말했듯이 이 변환 방법은 아직 출판되지 않은 자료에 가장 적합합니다.

예를 들어, 텍스트 필드(제목 입력을 위한 필드 역할을 함)를 가져와서 소문자로 문장을 입력할 때 대문자로 표시하는 작은 스크립트를 작성합니다.

$(document).ready(function() ( $(".content").on("keyup", function() ( var text = $(this).val(); var new_text = text.charAt(0) .toUpperCase() + text.substr(1); $(this).val(new_text); )); ));

스크립트는 텍스트를 작성할 때와 단순히 삽입할 때 모두 작동합니다. 사이트에서 스크립트가 작동하려면 jQuery 라이브러리가 활성화되어 있어야 한다는 점을 잊지 마십시오.

CSS 대문자는 텍스트가 처음부터 끝까지 동일하게 보이는 일반 디자인의 단조로움을 해소하는 데 도움이 됩니다.

그때와 지금의 첫 글자

연대기 편찬자들은 손으로 쓴 원고에 대문자를 사용했는데, 그 중 일부는 5세기까지 거슬러 올라갑니다. 인쇄기가 산업 수준으로 발전할 수 있었던 8세기부터 15세기까지 대문자는 계속 사용되었습니다. 손으로 쓴 첫 글자와 인쇄된 첫 글자 모두 텍스트 시작 부분에 배치되었습니다. 그들은 종종 편지 주위에 위치한 장식 패턴으로 장식되었습니다.

올려지거나 떨어진 문자는 오늘날에도 여전히 사용됩니다. 신문, 잡지, 서적은 물론 디지털 인쇄에서도 찾아볼 수 있습니다. 융기형은 길쭉한 유형이라고도 합니다. 그것들은 그 뒤에 오는 텍스트의 아래쪽과 같은 높이로 배치됩니다. 떨어뜨린 문자는 텍스트 상단과 같은 높이로 배치되며 때로는 텍스트 콘텐츠 본문 뒤의 레이어에 배치되거나 나머지 텍스트가 문자를 둘러쌉니다.

돌출된 문자는 나머지 텍스트와 동일하고 일반적으로 외부 여백 주위의 줄 바꿈을 변경할 필요가 없기 때문에 정의하기가 훨씬 쉽습니다. 생략된 글자는 좀 더 세밀한 조정이 필요합니다. 양각 문자를 처리하는 방법을 먼저 이해하면 이를 이해하는 것이 더 쉬울 것입니다.

수업 사용

CSS에 대해 이미 이해하고 있는 디자이너라면 첫 번째 대문자에 대해 별도의 CSS 클래스를 만들어야 한다는 것을 알고 있습니다.

단락 요소와 문자를 생성하는 클래스에 대한 CSS 코드는 다음과 같습니다.

p(글꼴 크기:20px; 글꼴 가족: Georgia, "Times New Roman", Times, serif;).myinitialcaps(글꼴 크기:48px; 글꼴 가족: Didot;)

HTML 코드는 다음과 같습니다.

우리에게 주는 것:

너무 쉬운 것 같나요? 각 대문자에는 특별한 커닝이 필요하므로 실제로는 특정 문자에 따라 조정해야 합니다. 양각 문자와 본문 텍스트의 글꼴을 선택한 후 각 양각 문자에 대해 별도의 클래스를 만들어야 합니다. 아래 CSS 클래스.myinitialcapsi에서는 I와 n 사이의 거리를 줄이기 위해 오른쪽 여백을 음수 값으로 설정합니다.

Myinitialcapsi(글꼴 크기:48px; 글꼴 계열: Didot; 여백 오른쪽:-1px;)

이 경우에는 "I"와 "n" 사이에 약간의 추가 공백이 있습니다.

마진이 음수인 새 클래스를 포함하면 더 가까워집니다.

위 예시의 화면 해상도에 따라 I와 n이 함께 흐릿하게 보일 수 있습니다. 이는 글자 끝에 있는 세리프 때문입니다. 따라서 최종 CSS 스타일을 결정하기 전에 다양한 장치에서 사이트를 테스트하여 CSS 대문자 텍스트가 어떻게 보이는지 확인하세요.

견적 및 기타 특수 사례

텍스트 시작 부분의 글자만 확대할 수 있는 것이 아닙니다. 다른 클래스를 구현하여 문자 옆에 표시되는 더 큰 버전의 따옴표를 만들 수 있습니다. 우리의 경우 크기가 48인 문자 클래스나 20픽셀의 텍스트 클래스 모두 따옴표에 적합하지 않습니다. 오히려 -30픽셀 사이가 될 것입니다. 따옴표를 4픽셀 아래로 이동하여 I와 광학적으로 정렬합니다.

Myinitialcapsq(글꼴 크기:30px; 글꼴 계열: Didot; 부동:왼쪽; 여백-상단:4px;)

마진이 음수인 새 클래스를 "포함"하면 클래스가 더 가까워집니다.

커닝 및 정렬이 주변 마크업과 일치하도록 따옴표와 함께 각 CSS 대문자를 설정할 때 매우 주의해야 합니다. 예를 들어, 가로선이 레이아웃에 시각적으로 맞도록 문자 T를 단락 가장자리를 약간 넘어 왼쪽으로 이동해야 합니다. C, G, O, Q와 같은 둥근 글자에도 동일한 작업을 수행해야 합니다. 이 예에서는 20, 30, 48의 글꼴 크기를 사용합니다. 그러나 선택한 특정 글꼴에 따라 크기를 선택해야 합니다. 사이트를 볼 화면의 크기와 해상도도 마찬가지입니다.

의사 요소 및 의사 클래스

CSS 의사 요소를 사용하면 단락 요소에 ::first-letter를 추가하여 볼록 문자를 쉽게 만들 수 있습니다. 레거시 브라우저의 경우 :first-letter(콜론 1개 포함)를 사용하세요.

p ( 글꼴 크기: 1.2em; 글꼴 계열: Georgia, "Times New Roman", Times, serif; line-height:2em;padding-bottom:1.2em;) p::first-letter ( 글꼴 크기: 3.6em; 텍스트 변환: 대문자; 글꼴 계열: "Monotype Bernard Condensed", serif; 여백 오른쪽:0.03em;).initialb (여백 오른쪽:-0.1em;).initialn (여백 오른쪽:-0.15 여자 이름;)

문자 N과 B의 커닝을 고려하는 CSS 클래스가 포함된 HTML 코드는 다음과 같습니다.

첫 글자가 대문자인 첫 글자입니다.
줄 바꿈을 사용하면 다음 줄에 초기 캡이 없습니다.

HTML 소스에서 HTML의 대문자가 아닌 첫 글자의 크기가 초기 대문자 크기인 3.6em으로 어떻게 조정되는지 확인하세요. 깔끔하죠?

그러나 하드 리턴과 새 단락이 시작되면 항상 또 다른 초기 상한선이 생성됩니다. 당신은 스스로에게 '이것을 어떻게 설명할 것인가?'라고 물을 수도 있습니다. 아주 새로운 단락의 시작 부분에 초기 대문자가 있어야 합니까? 글쎄요. 하지만 당신은 그것이 그렇게 보이기를 원하며, 반드시 그렇게 보여야 합니까?

단락의 첫 번째 대문자가 문자로 변환됩니다.
줄 바꿈 뒤의 첫 글자는 대문자로 변환되지 않습니다.

oHTML 소스 코드에서 첫 번째 문자는 대문자로 표시되지 않지만 3.6em 문자로 변환됩니다.

그러나 강제로 줄 바꿈을 한 후에도 새 단락이 시작될 때마다 항상 문자가 생성됩니다. 당신은 스스로에게 질문할 수도 있습니다: 이것을 어떻게 고려합니까? 이 모든 경우에 편지를 추가해야 합니까? 글쎄요. 하지만 이것이 꼭 필요한가?

의사 요소가 제공하는 이점에도 불구하고 커닝 및 패딩 문제를 처리하기 위해 별도의 클래스를 정의하기 위해 많은 코드를 추가해야 했습니다. 하지만 이 방법은 각각의 새 단락의 첫 글자를 CSS 대문자로 변환합니다. 어떤 사람들에게는 각 문단의 첫 글자를 변형할 필요가 없기 때문에 적합하지 않을 수도 있습니다.

의사 클래스와 의사 요소를 결합하여 스마트 레이아웃 만들기

:first-child 의사 클래스를 추가하면 불필요한 첫 글자 변환 문제를 해결하는 데 도움이 됩니다.

p ( 글꼴 크기: 1.2em; 글꼴 계열: Georgia, "Times New Roman", Times, serif; line-height:2em;padding-bottom:0.5em;) p:first-child::first-letter ( 글꼴 크기: 3.6em; 텍스트 변환: 대문자; 글꼴 계열: "Monotype Bernard Condensed", serif; 여백 오른쪽: 0.03em;)

이 코드를 HTML과 결합하면:

첫 번째 하위 문자로 정의된 첫 번째 문자는 이 방법으로 볼록 첫 문자 장식으로 변환되는 유일한 문자입니다.

first-child로 정의된 문자만 변환되므로 이 예는 first-child가 없는 이전 예제와 다르다는 점에 유의하세요. 또한 단락 시작 뒤와 강제 줄 바꿈 뒤의 첫 글자는 변환하지 않습니다. 이는 단락의 첫 글자를 모두 변환했을 때의 레이아웃보다 더 우아해 보입니다.

의사 클래스를 사용하면 다양한 특수 사례를 처리할 수 있다는 장점이 있습니다. 단점은 어떻습니까? 다양한 의사 클래스가 있으며, 머리가 어질어질할 정도로 다양한 방식으로 결합될 수 있습니다. 예를 들어 가상 클래스 :first-child 및 :first-of-type은 동일한 결과를 생성할 수 있습니다. 단락뿐만 아니라 요소에도 의사 클래스를 적용할 수도 있습니다. 예를 들어, 아래의 Didot 글꼴의 돌출된 글자 예에 표시된 대로입니다. A의 오른쪽에 margin 속성이 어떻게 추가되었는지 확인하세요. 그렇지 않으면 섹션 시작 부분의 문자 s와 "접착"됩니다.

섹션( 글꼴 크기: 1.2em; 글꼴 계열: Georgia, "Times New Roman", Times, serif; line-height:3em;) 섹션>p:first-child:first-letter( 글꼴 크기: 4em; 텍스트 변환: 대문자; 글꼴 계열:Didot, serif; 여백 오른쪽:5px;)

그리고 HTML과 함께:

섹션 시작 부분에는 첫 글자에 돌출된 첫 글자가 지정됩니다.

그리고 새로운 문단...

실험적인 느낌이 든다면 :first-child 및 :first-of-type 외에도 다양한 방법을 탐색해 볼 수 있습니다. 예를 들어 :nth-of-type 또는 :nth-of-child와 같이 이러한 유형이나 다른 유형의 의사 클래스를 CSS 대문자 텍스트에 사용할 수 있는 방법을 확인할 수 있습니다. 이 문서에 설명된 원칙을 따르든 더 깊이 파고들든 관계없이 CSS 의사 클래스 first-child , :first-of-type 및 :first-letter 를 사용하여 작업하는 방법을 배우면 적용할 수 있습니다. HTML 요소에 올바르게 적용됩니다.

HTML에서는 글꼴 크기가 중요한 역할을 합니다. 이를 통해 사이트 페이지에 게시된 중요한 정보에 사용자의 관심을 끌 수 있습니다. 글자의 크기뿐만 아니라 색상, 두께, 심지어 가족까지 중요합니다.

HTML 글꼴 작업 시 태그 및 속성

하이퍼텍스트 언어에는 글꼴 작업을 위한 다양한 도구가 있습니다. 결국 텍스트 서식 지정은 html의 주요 작업입니다.

HTML 언어를 만든 이유는 브라우저에서 텍스트 서식 규칙을 표시하는 문제였습니다.

HTML의 글꼴 작업에 사용되는 태그와 해당 속성을 살펴보겠습니다. 주요한 것은 태그입니다. 해당 속성 값을 사용하여 글꼴의 여러 특성을 설정할 수 있습니다.

• color – 텍스트 색상을 설정합니다.
• size – 기존 단위의 글꼴 크기입니다.

1부터 7까지의 양수 속성 값이 지원됩니다.

• 얼굴 – 에서 사용할 텍스트 글꼴 모음을 설정하는 데 사용됩니다. 쉼표로 구분된 여러 값이 지원됩니다.

쌍을 이루는 글꼴 태그 부분 사이에 있는 텍스트에만 서식이 지정됩니다. 나머지 텍스트는 표준 기본 글꼴로 표시됩니다.

또한 html에는 하나의 형식 지정 규칙만 지정하는 여러 쌍의 태그가 있습니다. 여기에는 다음이 포함됩니다.

• — html에서 굵은 글꼴을 설정합니다. 작업 태그는 이전 태그와 유사합니다.
• — 크기가 기본값보다 큽니다.
• — 더 작은 글꼴 크기;
• — 이탤릭체 텍스트(이탤릭체). 유사 태그 ;
• — 밑줄이 있는 텍스트;
• - 줄을 그었습니다.
• — 텍스트를 소문자로만 표시합니다.
• - 대문자로.

일반 텍스트

썸네일

썸네일

평소보다 더

평소보다 적음

이탤릭체

이탤릭체

밑줄 포함

지워진

스타일 속성 기능

설명된 태그 외에도 html에서 글꼴을 변경하는 몇 가지 방법이 더 있습니다. 그 중 하나는 일반 스타일 속성을 사용하는 것입니다. 해당 속성 값을 사용하여 글꼴 표시 스타일을 설정할 수 있습니다.

1) 글꼴 패밀리 - 속성은 글꼴 패밀리를 설정합니다. 여러 값을 나열하는 것이 가능합니다.
사용자 운영 체제에 이전 제품군이 설치되어 있지 않은 경우 html의 글꼴을 다음 값으로 변경합니다.

작성 구문:

글꼴 계열: 글꼴 이름 [, 글꼴 이름[, ...]]

2) 글꼴 크기 - 크기는 1에서 7까지 설정됩니다. 이는 HTML에서 글꼴을 늘릴 수 있는 주요 방법 중 하나입니다.
작성 구문:

글꼴 크기: 절대 크기 | 상대적인 크기 | 의미 | 관심 | 상속하다

글꼴 크기를 설정할 수도 있습니다.

• 픽셀 단위;
• 절대값(xx-소형, x-소형, 소형, 중형, 대형)
• 백분율로;
• 포인트(pt) 단위입니다.

글꼴 크기:7

글꼴 크기:24px

글꼴 크기: x-large

글꼴 크기: 200%

글꼴 크기:24pt

3) 글꼴 스타일 - 글꼴 쓰기 스타일을 설정합니다. 통사론:

글꼴 스타일: 일반 | 이탤릭체 | 비스듬한 | 상속하다

값:

• 일반 - 일반 철자법;
• 이탤릭체 – 이탤릭체;
• oblique – 글꼴이 오른쪽으로 기울어졌습니다.
• 상속 – 상위 요소의 철자를 상속합니다.

이 속성을 사용하여 html에서 글꼴을 변경하는 방법의 예:

글꼴 스타일:상속

글꼴 스타일:기울임체

글꼴 스타일:일반

글꼴 스타일:경사

4) 글꼴 변형 – 모든 대문자를 대문자로 변환합니다. 통사론:

글꼴 변형: 일반 | 작은 대문자 | 상속하다

이 속성을 사용하여 html에서 글꼴을 변경하는 방법의 예:

글꼴 변형:상속

글꼴 변형:일반

글꼴 변형:작은 대문자

5) 글꼴 두께 - 텍스트의 두께(채도)를 설정할 수 있습니다. 통사론:

글꼴 두께: 굵게|굵게|더 가벼워|보통|100|200|300|400|500|600|700|800|900

값:

• 굵은 글씨 – html 글꼴을 굵은 글씨로 설정합니다.
• 더 굵게 - 평소보다 더 굵게;
• 더 가벼움 – 정상에 비해 포화도가 낮습니다.
• 일반 - 일반 철자법;
• 100-900 - 숫자에 해당하는 글꼴 두께를 설정합니다.

글꼴 두께:굵게

글꼴 두께:굵게

글꼴 두께:더 가벼움

글꼴 두께:보통

글꼴 두께:900

글꼴 두께:100

HTML 글꼴 속성 및 글꼴 색상

글꼴은 또 다른 컨테이너 속성입니다. 그 자체에는 글꼴 변경을 위한 여러 속성의 값이 결합되어 있습니다. 글꼴 구문:

글꼴: 글꼴 크기 글꼴 계열 | 상속하다

값은 다양한 컨트롤의 레이블에서 시스템이 사용하는 글꼴로 설정할 수도 있습니다.

• 캡션 – 버튼용;
• 아이콘 - 아이콘용.
• 메뉴 - 메뉴;
• 메시지 상자 – 대화 상자용;
• 작은 캡션 – 작은 컨트롤용
• 상태 표시줄 – 상태 표시줄 글꼴.

글꼴:아이콘

글꼴:캡션

글꼴:메뉴

글꼴:메시지 상자

작은 캡션

글꼴:상태 표시줄

글꼴: 기울임꼴 50px 굵은 "Times New Roman", Times, serif

HTML에서 글꼴 색상을 설정하려면 color 속성을 사용할 수 있습니다. 키워드를 사용하거나 RGB 형식으로 색상을 설정할 수 있습니다. 16진수 코드에서도 마찬가지입니다.

안녕하세요, 이 블로그 독자 여러분. 오늘은 CSS를 사용하여 대문자를 모두 만드는 방법에 대해 이야기하겠습니다. 물론 이를 위해서는 Caps Lock을 켜고 원하는 텍스트를 작성하면 되지만 이는 다소 원시적인 방법이다. 하지만 완성된 기사에서 별도의 단락을 강조해야 한다면 어떻게 해야 할까요?

CSS에서 모든 문자를 대문자로 만들기

이에 대한 text-transform 속성이 있는데, 짐작할 수 있듯이 텍스트를 변환합니다. 다음과 같은 값을 갖습니다.

• 소문자 - 모든 텍스트가 소문자로 표시됩니다.
• 대문자 – 모든 단어가 대문자로 표시됩니다(필요한 것).
• 대문자 – 각 단어의 첫 글자를 대문자로 표시합니다.

이것이 기본적으로 당신이 알아야 할 전부입니다. 남은 것은 원하는 요소에 액세스하는 방법을 알아내는 것뿐입니다. 이 예를 상상해 봅시다. 기사의 다섯 번째 단락을 모두 대문자로 만들어야 합니다. 그리고 이것은 어떻게 구현될 수 있나요?

원하는 요소에 도달하는 방법은 무엇입니까?

아시다시피 단락은 한 쌍의 html 태그를 사용하여 생성되며 전체 내용이 단락이 됩니다. 남은 것은 새로운 스타일 클래스를 정의하는 것뿐입니다.

이제 나머지 부분에 영향을 주지 않고 CSS 언어를 통해 이 특정 단락에 액세스할 수 있는 기회가 생겼습니다. 다음과 같이 할 수 있습니다:

대문자(
텍스트 변환: 대문자;
}

이 방법은 특정 기사의 일부를 강조 표시해야 할 때 적합합니다. 모든 페이지에 대문자로 된 특정 텍스트가 있어야 한다면 어떨까요? 이 경우 매번 작성하지 않도록 블록을 템플릿 파일에 배치하는 것이 좋습니다.

아니면 CSS를 대문자로 사용하여 각 기사의 두 번째 단락을 강조 표시해야 할 수도 있습니다. 그러면 다른 옵션이 귀하에게 적합합니다. 기사가 나타나는 블록을 찾고 n번째 하위 의사 클래스를 사용하여 두 번째 단락에 액세스합니다. 이 예에서 기사가 포함된 블록에는 기사 클래스가 있습니다.

제p조:n번째-자식(2)(
텍스트 변환: 대문자
}

보시다시피 각 특정 사례마다 다른 솔루션이 있습니다. 가장 중요한 것은 문자의 대소문자를 변경하는 text-transform 속성을 기억하는 것입니다.

일반적으로 이러한 방식으로 텍스트를 표시하는 것은 인식을 크게 손상시키기 때문에 권장되지 않지만 특히 중요한 일부 부분은 강조 표시될 수 있습니다.

오늘 우리는 text-transform 속성을 살펴보았습니다. 새로운 기사를 받으려면 블로그를 구독하세요.