8.1 의사-요소의 종류
CSS에서 의사-요소는 특정 요소의 부분을 스타일링할 수 있게 해줘. 예를 들어 첫 글자, 첫 줄, 또는 요소 앞이나 뒤에 내용 추가하기 같은 거지. 이걸 통해서 HTML 구조를 안 바꿔도 스타일링 가능하게 해줘. 의사-요소는 이중 콜론 (::)으로 표시돼.
주요 의사-요소:
::before::after::first-letter::first-line
8.2 의사-요소 ::before
::before 의사-요소는 요소 내용 앞에 내용을 추가해주는 거야. 장식적인 요소, 아이콘, 추가 텍스트 등에 자주 사용돼.
문법:
셀렉터::before {
content: "" | "텍스트" | url() | counter | attr();
속성: 값;
}
content 필드에 추가할 html 코드를 적어주면 돼.
CSS
/* 각 리스트 항목 앞에 화살표를 추가해 */
li::before {
content: "→ ";
color: red;
}
HTML
<ul>
<li>첫 번째 리스트 요소</li>
<li>두 번째 리스트 요소</li>
<li>세 번째 리스트 요소</li>
</ul>
8.3 의사-요소 ::after
::after 의사-요소는 요소 내용 뒤에 내용을 추가해주는 거야. 장식적인 요소, 아이콘, 추가 텍스트 등에 자주 사용돼.
문법:
셀렉터::after {
content: "" | "텍스트" | url() | counter | attr();
속성: 값;
}
content 필드에 추가할 html 코드를 적어주면 돼.
CSS
/* 각 리스트 항목 뒤에 점을 추가해 */
li::after {
content: " •";
color: blue;
}
HTML
<ul>
<li>첫 번째 리스트 요소</li>
<li>두 번째 리스트 요소</li>
<li>세 번째 리스트 요소</li>
</ul>
8.4 의사-요소 ::first-letter
::first-letter 의사-요소는 요소의 첫 글자에 적용돼. 단락에서 장식적인 첫 글자를 만들 때 자주 사용해.
문법:
셀렉터::first-letter {
content: "" | "텍스트" | url() | counter | attr();
속성: 값;
}
예시:
CSS
/* 각 단락의 첫 글자를 키우고 색상을 변경해 */
p::first-letter {
font-size: 2em;
color: green;
}
HTML
<p>이것은 단락의 예시 텍스트이다.</p>
<p>또 다른 단락의 예시 텍스트이다.</p>
8.5 의사-요소 ::first-line
::first-line 의사-요소는 요소의 첫 줄에 적용돼. 단락의 첫 줄을 스타일링할 때 자주 사용해.
문법:
셀렉터::first-line {
content: "" | "텍스트" | url() | counter | attr();
속성: 값;
}
예시:
CSS
/* 각 단락의 첫 줄의 색상을 변경하고 굵게 만들어 */
p::first-line {
color: navy;
font-weight: bold;
}
HTML
<p>
이것은 예시 텍스트로, 텍스트가 여러 줄로 나뉘어지는 경우 첫 줄의 스타일이 어떻게 작동하는지를 보여주는 단락이다. 각 단락의 첫 줄은 가독성을 높이기 위해 굵고 navy 색상으로 강조돼. 이 효과는 위에 정의된 CSS 규칙을 통해 얻어져.
</p>
<p>
첫 줄에만 스타일이 적용된다는 점에 유의해. 텍스트의 나머지 부분은 원래 스타일을 유지해. 이것은 핵심 포인트를 강조하거나 텍스트에 시각적인 리듬을 만드는 데 유용할 수 있어.
</p>
GO TO FULL VERSION