단락 시작표시문자는 텍스트 블록의 첫 글자입니다. 단락 시작표시문자는 일반적으로 지금 읽고 있는 이 단락과 같이 문서의 선두 단락에 사용됩니다. 단락 시작표시문자는 텍스트의 나머지 부분과 다르게 스타일이 지정되어 눈에 띄게 만듭니다. 단락 시작표시문자는 타이포그래퍼와 시각 디자이너가 사람들의 관심을 원하는 곳으로 정확하게 끌기 위해 사용하는 강력한 시각적 마커입니다.
드롭 캡을 디자인하는 한 가지 방법은 없습니다. 단락 시작표시문자를 사용하는 가장 일반적인 방법은 나머지 본문 텍스트와 동일한 글꼴/서체를 사용하지만 첫 글자의 글꼴 크기를 훨씬 더 크게, 때로는 더 굵게 만드는 것입니다.
다음 코드를 사용하여 이 기사의 첫 단락에 사용된 단락 시작표시문자의 특정 스타일을 가져왔습니다.
.dropcap {
float: left;
font-size: 6em;
line-height: 0.60;
margin: 0;
margin-left: -0.04em;
padding: .09em .04em 0em 0em;
}
단락에서 사용하려면 단락의 첫 번째 단어의 첫 글자를 <span로 감싸십시오. 요소를 만들고 dropcap의 클래스 속성을 지정합니다. , 다음과 같이:
<p><span class="dropcap">D</span>rop cap is the first letter in a text block...
</p>귀하의용 CSS로 단락 시작표시문자 스타일을 지정하는 방법 특정 문서, 완전히 의존 선택한 서체의 해부학적 구조, 글꼴 크기, 행 높이(행간) 및 기타 요소에 따라 모든 요구 사항을 충족하는 CSS 규칙 세트가 하나도 없으므로 좋은 결과를 얻으려면 조금씩 움직여야 합니다.
위의 CSS를 템플릿/시작점으로 사용한 다음 font-size를 늘리거나 줄이는 작업을 할 수 있습니다. 단락에 딱 맞도록 단락 시작표시문자의 속성을 변경합니다. 여전히 단락 시작표시문자를 원하는 대로 정렬할 수 없으면 line-height를 조정해 보세요. 속성 값이 약간 높거나 낮습니다. 마지막으로 margin-top 속성을 사용하여 단락 시작표시문자를 위 또는 아래로 약간 이동합니다.
단추 스타일
내 드롭 캡에 대해 선택한 특정 스타일은 많은 것 중 하나일 뿐입니다. 단락 시작표시문자가 단락의 나머지 텍스트와 동일하게 위아래로 정렬되어야 한다는 규칙은 없습니다. 일부 디자이너는 첫 번째 라인의 어센더보다 약간 위쪽으로 드롭 캡을 올리고 다른 디자이너는 상당히 드롭 캡을 올릴 것입니다. 일부는 반대 작업을 수행하고 단락 시작표시문자를 텍스트 블록 깊숙이 집어넣고 상단과 왼쪽에 공백을 많이 만듭니다.
때때로 단락 시작표시문자는 다른 텍스트 및/또는 배경색을 사용합니다.
텍스트 색상이 다른 드롭 캡
Lorem ipsum 또는 Lipsum은 때때로 알려진 대로 인쇄, 그래픽 또는 웹 디자인 레이아웃에 사용되는 더미 텍스트입니다. 이 구절은 Cicero의 De Finibus Bonorum et Malorum의 일부를 활자 표본 책에 사용하기 위해 뒤섞은 것으로 생각되는 15세기의 알려지지 않은 조판공에 기인합니다.
배경색이 다른 모자 캡
Lorem ipsum 또는 Lipsum은 때때로 알려진 대로 인쇄, 그래픽 또는 웹 디자인 레이아웃에 사용되는 더미 텍스트입니다. 이 구절은 Cicero의 De Finibus Bonorum et Malorum의 일부를 활자 표본 책에 사용하기 위해 뒤섞은 것으로 생각되는 15세기의 알려지지 않은 조판공에 기인합니다.
위의 두 예제는 다른 color/background-color를 사용한다는 점을 제외하고는 앞서 제공한 단락 시작표시문자 클래스와 동일한 CSS를 사용합니다. 또한 두 번째 예에 약간의 padding-bottom 및 margin-right를 추가하여 nudge 제자리에 있습니다.
-
단락 시작표시문자는 많은 타이포그래피 강조 도구 중 하나이지만 가장 주목을 끄는 도구 중 하나이므로 적당히 사용하세요.