CSS 가상 요소란?

HTML_CSS

by 헬로제이콥 2024. 11. 11. 15:42

가상 요소는 실제로 HTML 문서에 존재하지 않는 요소를 마치 존재하는 것처럼 스타일을 적용할 수 있도록 해주는 CSS의 기능입니다. 즉, 특정 요소의 일부분이나 특정한 상태에 있는 요소에 대해 별도의 스타일을 지정할 수 있게 해줍니다.

가상 요소는 주로 다음과 같은 용도로 사용됩니다.

<body>
  <h1> 예시입니다.</h1>
  <h2> 월요일은 바빠요</h2>
  <p>이것은 예시 문장입니다.</p>
</body>
</html>

설명: 선택된 요소의 첫 번째 줄에만 스타일을 적용합니다.
예제:
CSS
```
p::first-line {
 font-size: 24px;
 font-weight: bold;
 color: blue;
}
```
코드를 사용할 때는 주의가 필요합니다.
위 코드는 태그의 첫 번째 줄에 대해 글꼴 크기를 24px, 굵게, 파란색으로 설정합니다.

설명: 선택된 요소의 첫 번째 글자에만 스타일을 적용합니다.
예제:
CSS
```
p::first-letter {
 font-size: 36px;
 float: left;
 margin-right: 0.3em;
}
```
코드를 사용할 때는 주의가 필요합니다.
위 코드는 태그의 첫 번째 글자에 대해 글꼴 크기를 36px로 설정하고, 왼쪽으로 정렬하며, 다음 글자와의 간격을 0.3em으로 설정합니다.

설명: 선택된 요소의 내용 바로 앞에 콘텐츠를 추가하고 스타일을 적용할 수 있습니다.
예제:
CSS
```
h1::before {
 content: "[IMPORTANT] ";
 color: red;
}
```
코드를 사용할 때는 주의가 필요합니다.
위 코드는 <h1> 태그의 내용 앞에 "[IMPORTANT] "라는 문자열을 빨간색으로 추가합니다.

설명: 선택된 요소의 내용 바로 뒤에 콘텐츠를 추가하고 스타일을 적용할 수 있습니다.
예제:
HTML
```
이것은 예시 문장입니다.
```
코드를 사용할 때는 주의가 필요합니다.
CSS
```
p::after {
 content: " - 끝";
 color: gray;
}
```
코드를 사용할 때는 주의가 필요합니다.
위 코드는 태그의 내용 뒤에 " - 끝"이라는 문자열을 회색으로 추가합니다.

인용구 표시:

CSS

blockquote::before {
    content: open-quote;
}
blockquote::after {
    content: close-quote;
}

코드를 사용할 때는 주의가 필요합니다.

목록 앞에 아이콘 추가:
CSS
```
ul li::before {
    content: "▶ ";
}
```
코드를 사용할 때는 주의가 필요합니다.
툴팁 만들기:
CSS
```
.tooltip::after {
    content: attr(data-tooltip);
    /* 툴팁 스타일 설정 */
}
```
코드를 사용할 때는 주의가 필요합니다.
(HTML에서 data-tooltip 속성에 툴팁 내용을 지정해야 합니다.)

오렌지_Story