7.1 가상 요소 ::first-letter
::first-letter와 ::first-line 가상 요소는 텍스트 요소의 첫 글자와 첫 줄을 스타일링할 수 있는 강력한 도구를 제공합니다. 이 가상 요소들은 웹 페이지의 텍스트 가독성 및 미관을 향상시키는 다양한 타이포그래피 효과를 만드는 데 널리 사용됩니다.
::first-letter 가상 요소는 텍스트 블록의 첫 글자를 스타일링할 수 있게 해줍니다. 종종 단락의 초기 글자에 장식적인 효과를 주기 위해 사용됩니다.
셀렉터::first-letter {
/* 스타일 */
}
::first-letter 사용 예
이 예에서 단락의 첫 글자는 크기가 커지고, 굵은 글씨로 강조되며 파란색으로 색칠됩니다. float: left와 margin-right 속성은 첫 글자를 "함몰"시키고, 나머지 텍스트를 옆으로 밀어내는 효과를 만듭니다:
/* 단락의 첫 글자 스타일링 */
p::first-letter {
font-size: 2em;
font-weight: bold;
color: #3498db;
float: left;
margin-right: 0.1em;
}
::first-letter에 지원되는 속성들
가상 요소 ::first-letter는 다음과 같은 많은 속성을 지원합니다:
fontcolorbackgroundmarginpaddingborderfloattext-transformtext-decoration
이 속성들로 텍스트 첫 글자의 외관을 유연하게 조절할 수 있습니다.
::first-letter의 확장된 스타일링 예
이 예에서는 첫 글자에 텍스트 그림자와 더 큰 크기 등의 추가 효과를 부여합니다:
/* 추가 효과가 있는 단락의 첫 글자 스타일링 */
p::first-letter {
font-size: 3em;
font-weight: bold;
color: #e74c3c;
float: left;
margin-right: 0.2em;
line-height: 1;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
7.2 가상 요소 ::first-line
::first-line 가상 요소는 텍스트 블록의 첫 줄을 스타일링할 수 있게 해줍니다. 이는 텍스트의 시각적 인식을 개선하기 위해 첫 줄의 글꼴이나 색상을 변경하는 등 다양한 타이포그래피 효과를 만드는 데 사용됩니다.
구문:
셀렉터::first-line {
/* 스타일 */
}
::first-line 사용 예
이 예에서 단락의 첫 줄은 굵은 글씨로 강조되고, 녹색으로 색칠되며 밝은 회색 배경을 갖습니다:
/* 단락의 첫 줄 스타일링 */
p::first-line {
font-weight: bold;
color: #2ecc71;
background-color: #f0f0f0;
}
::first-line에 지원되는 속성들
가상 요소 ::first-line은 다음과 같은 많은 속성을 지원합니다:
fontcolorbackgroundmarginpaddingborderline-heighttext-transformtext-decorationletter-spacingword-spacing
이 속성들은 첫 줄의 외관을 유연하게 조절할 수 있게 해줍니다.
::first-line의 확장된 스타일링 예
이 예에서는 첫 줄에 추가 효과로 텍스트를 대문자로 변환하고, 문자 간격과 단어 간격을 변경합니다:
/* 추가 효과가 있는 단락의 첫 줄 스타일링 */
p::first-line {
font-weight: bold;
color: #e67e22;
background-color: #f9f9f9;
text-transform: uppercase;
letter-spacing: 0.1em;
word-spacing: 0.2em;
}
7.3 ::first-letter와 ::first-line의 조합 사용
가상 요소 ::first-letter와 ::first-line은 복잡한 타이포그래피 효과를 만들기 위해 함께 사용할 수 있습니다.
조합 사용 예
이 예에서는 단락의 첫 글자와 첫 줄이 각기 다른 스타일링을 받아 복잡하고 흥미로운 시각적 효과를 만듭니다:
/* 단락의 첫 글자와 첫 줄 스타일링 */
p::first-letter {
font-size: 2.5em;
font-weight: bold;
color: #3498db;
float: left;
margin-right: 0.1em;
}
p::first-line {
font-weight: bold;
color: #2ecc71;
background-color: #f0f0f0;
}
전체 예
이 예에서는 단락의 첫 글자가 커지고 파란색으로 강조되며, 단락의 첫 줄은 굵은 글씨와 녹색이 회색 배경과 함께 강조됩니다:
/* 단락의 첫 글자 스타일링 */
p::first-letter {
font-size: 2.5em;
font-weight: bold;
color: #3498db;
float: left;
margin-right: 0.1em;
}
/* 단락의 첫 줄 스타일링 */
p::first-line {
font-weight: bold;
color: #2ecc71;
background-color: #f0f0f0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>::first-letter 및 ::first-line 가상 요소 예제</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
</body>
</html>
GO TO FULL VERSION