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