CSS를 사용하여 단락에 멋진 초기 대문자를 만드는 방법에 대해 알아보십시오. 초기 모자에 그래픽 이미지를 사용하는 간단한 이미지 교체 기술도 있습니다.
초기 캡의 기본 스타일
문서의 초기 대문자에는 세 가지 기본 스타일이 있습니다.
- 높인 - 가장 일반적으로, 첫 글자가 더 크고 현재 텍스트와 같은 줄에 있습니다.
- 떨어 뜨린 - 첫 번째 문자가 더 크고 첫 번째 문자 행 아래로 떨어지는 경우도 매우 일반적입니다. 다음 텍스트는 그 주위에 떠 있습니다.
- 인접 - 첫 번째 문자는 나머지 텍스트 옆의 한 열에 있습니다. 이것은 웹 디자인보다 인쇄에서 더 일반적입니다.
이니셜 캡 또는 드롭 캡은 매우 친숙합니다. 길고 지루한 텍스트를 차려 입는 훌륭한 방법입니다. 그리고 CSS 속성 : 첫 글자를 사용하면 첫 글자를 더 좋아하게 만드는 방법을 쉽게 정의 할 수 있습니다.
간단한 초기 모자 만들기
단순하게 제기 된 초기 뚜껑을 만들기 위해해야 할 일은 첫 번째 글자 의사 요소를 사용하여 단락의 첫 글자를 더 크게 만드는 것입니다.
p : 첫 글자 {font-size : 3em; }
그러나 많은 브라우저에서 첫 글자가 줄의 나머지 텍스트보다 큽니다. 그래서 줄의 나머지 부분이 아닌 첫 글자에 의미가있는 줄을 획일 화합니다. 운 좋게도 첫 번째 라인 의사 요소 및 line-height 속성으로 쉽게 수정할 수 있습니다.
p : 첫 글자 {font-size : 3em; }
p : 첫 번째 줄 {line-height : 1em; }
텍스트 크기를 찾을 때까지 문서 내의 줄 높이로 재생하십시오.
당신의 처음 모자를 가지고 놀아 라.
초기 모자를 만드는 방법을 이해하고 나면 모자를 돋보이게 할 멋진 옷을 입고 입을 수 있습니다. 색상, 배경색, 테두리 또는 무엇이든 상상해보십시오. 상당히 간단한 스타일은 첫 글자의 글꼴과 배경색을 뒤집는 것입니다.
p : 첫 글자 {
글꼴 크기 : 300 %;
배경색 : # 000;
color : #fff;
}
p : 첫 번째 줄 {줄 높이 : 100 %; }
또 다른 트릭은 첫 번째 줄을 가운데 맞추는 것입니다. 레이아웃이 유연한 경우 텍스트 줄의 중간이 다를 수 있으므로 CSS에서는이 작업이 까다로울 수 있습니다. 그러나 일부 값을 가지고 놀면 첫 번째 글자를 들여 쓰기하여 중간에 첫 글자가 보이게 할 수 있습니다. 단락의 텍스트 들여 쓰기에 대한 백분율로 올바르게 표시 될 때까지 재생하십시오.
p : 첫 글자 {
글꼴 크기 : 300 %;
배경색 : # 000;
color : #fff;
}
p : 첫 번째 줄 {줄 높이 : 100 %; }
인접한 초기 대문자는 CSS에 어려움
서로 다른 브라우저가 글꼴을 다르게 표시하기 때문에 인접한 초기 대문자는 CSS로 어려울 수 있습니다. CSS에서 인접한 뚜껑을 만드는 배후의 아이디어는 첫 줄의 text-indent 속성을 사용하여 음수 값을 왼쪽으로 밀어내는 것입니다. 또한 해당 단락의 왼쪽 여백을 어느 정도 변경해야합니다. 단락이 좋을 때까지이 번호로 재생하십시오.
p {
텍스트 들여 쓰기 : -2.5em;
margin-left : 3em;
}
p : 첫 글자 {font-size : 3em; }
정말 멋진 초기 캡 얻기
고급 초기 캡을 만드는 가장 좋은 방법은 글꼴을보다 장식적인 글꼴 패밀리로 변경하는 것입니다. 일련의 글꼴과 그 다음에 일반 글꼴을 사용하면 초기 표시가 잘 표시되어 고객이 액세스 가능성 및 사용 용이성 문제에 빠지지 않고 표시 할 수 있습니다.
p : 첫 글자 {
font-size : 3em;
font-family : "Edwardian Script ITC", "브러쉬 스크립트 MT", 필기체;
}
p : 첫 번째 줄 {줄 높이 : 100 %; }
평소처럼 이러한 모든 제안을 함께 넣어 단락에 광고 스타일을 적용하는 초기 상한을 만들 수 있습니다.
그래픽 초기 캡 사용
그 후에도 초기 캡이 페이지에서 어떻게 보이는지 여전히 마음에 들지 않으면 그래픽에 의지하여 원하는 효과를 얻을 수 있습니다. 그러나 그래픽으로 직접 이동하기 전에이 방법의 단점을 알고 있어야합니다.
- 이미지가없는 고객에게는 초기 상한이 표시되지 않으며 이미지가 대체하는 숨겨진 텍스트가 표시되지 않을 수 있습니다. 이 단락을 액세스 할 수 없게 만들거나 읽는 것이 가장 어려울 수 있습니다.
- 이미지는 항상 페이지의 다운로드 시간에 추가됩니다. 초기 대문자가 많으면 다운로드 시간을 크게 늘려 많은 사람이 느끼는 것이 중요하지 않을 수 있습니다.
- 일부 브라우저는 숨겨진 첫 글자와 단락 텍스트가 이상하게 보일 수있는 이미지를 모두 표시합니다.
- 첫 번째 문자가 무엇인지 정확하게 알아야 올바른 그래픽을 사용할 수 있으므로이 옵션을 자동화하는 것은 매우 어렵습니다. 따라서 단락을 편집 할 때마다 새 그래픽을 만들어야 할 수 있습니다.
먼저 첫 글자의 그래픽을 만들어야합니다. 우리는 Photoshop을 사용하여 "Edwardian Script ITC"글꼴로 문자 L을 만들었습니다. 우리는 300pt 크기로 엄청나게 만들었습니다. 그런 다음 이미지를 문자 주위의 최소한으로 자르고 이미지 너비와 높이를 기록했습니다.
그런 다음 우리 단락을 위해 "capL"클래스를 만들었습니다. 여기에서는 사용할 이미지, 선행 (선 높이) 등을 정의합니다.
단락의 텍스트 들여 쓰기와 안쪽 여백을 설정하려면 이미지 너비와 높이를 사용해야합니다. L 이미지의 경우 95px 들여 쓰기와 72px 패딩이 필요했습니다.
p.capL {
라인 높이 : 1em;
배경 이미지 : url (capL.gif);
background-repeat : no-repeat;
텍스트 들여 쓰기 : 95px;
패딩 - 상단 : 72px;
}
그러나 그것이 전부는 아닙니다. 거기에두면 첫 번째 글자가 단락에 그래픽으로 그 다음에 텍스트로 복제됩니다. 그래서 "initial"클래스를 사용하여 첫 번째 요소 주위에 스팬을 추가하고 브라우저에 해당 문자를 표시하지 않도록 지시했습니다.
span.initial {display : none; }
그러면 그래픽이 올바르게 표시됩니다. 단락의 텍스트 들여 쓰기로 재생하여 글자까지 문자를 삽입 할 수 있습니다. 단, 문자를 표시 할 수는 있습니다.
