세련된 Drop Cap 기법

소개

이 랩에서는 CSS 의 Drop Cap 기법에 대해 배우겠습니다. Drop Cap 은 첫 번째 단락의 첫 글자에 시각적인 매력을 더하기 위해 사용되는 타이포그래피 기법입니다. 이 랩을 통해 :first-child 선택자와 ::first-letter 의사 요소 (pseudo-element) 를 사용하여 단락의 첫 글자를 독특하고 눈길을 끄는 방식으로 스타일링하는 방법을 이해하게 될 것입니다.

Drop Cap

index.html과 style.css에 코드를 작성할 수 있습니다.

첫 번째 단락의 첫 글자를 나머지 텍스트보다 더 크게 만듭니다.

• :first-child 선택자를 사용하여 첫 번째 단락만 선택합니다.
• ::first-letter 의사 요소 (pseudo-element) 를 사용하여 단락의 첫 번째 요소를 스타일링합니다.

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo
  ligula quis tincidunt cursus. Integer consectetur tempor ex eget hendrerit.
  Cras facilisis sodales odio nec maximus. Pellentesque lacinia convallis
  libero, rhoncus tincidunt ante dictum at. Nullam facilisis lectus tellus, sit
  amet congue erat sodales commodo.
</p>
<p>
  Donec magna erat, imperdiet non odio sed, sodales tempus magna. Integer vitae
  orci lectus. Nullam consectetur orci at pellentesque efficitur.
</p>

p:first-child::first-letter {
  color: #5f79ff;
  float: left;
  margin: 0 8px 0 4px;
  font-size: 3rem;
  font-weight: bold;
  line-height: 1;
}

요약

축하합니다! Drop Cap 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 실력을 향상시킬 수 있습니다.