📌 가상요소 선택자(Pseudo Selectors)란?
html에서 코드를 만들지 않고, css에서 스타일로만 요소를 추가하거나 제어할 때 사용하는 선택자이다.
즉, html 문서에는 실제로 존재하지 않지만 실제 동작화면에는 존재하게 되는 것이다.
가상요소는 콜론(:)을 2개 연달아 표기해서 가상요소임을 나타낸다.
콜론을 하나만 써도 적용이 되긴하지만, 가상요소임을 명확하게 구분하기 위해 콜론 2개를 붙이는 것을 권장한다.
선택자::가상요소 {
속성: 속성 값;
}위와 같은 형태로 작성한다.
📌 왜 사용하는건데?
실제 HTML을 조작하지 않기 때문에 HTML 구조에 영향을 미치지 않고 컨텐츠를 삽입할 수 있다.
또한 의미는 없지만 어떤 장식을 추가하고 싶을 때, 굳이 div 태그를 추가하지 않고 만들 수 있다.
어떤 의미있는 컨텐츠를 표현하기 보다는 디자인에 많이 사용된다.
📌 HTML 컨텐츠 변경(::before, ::after)
가상요소 선택자 중, ::before와 ::after는 가장 흔히 쓰인다.
속성으로는 content 값이 필수이다.
content의 값으로는 텍스트 뿐만 아니라 이미지, HTML 속성 등이 들어갈 수 있다.
귀여운 이모지도 가능하다(🐶🤍)
p::after {
content: "🐶";
}
p::before {
content: "😻";
}
p::after {
content : url('이미지 url'); // 이미지
}
작성한 content의 값이 위와 같이 화면에 출력된다.
::before는 선택한 요소의 앞에 가상요소가 추가되고, ::after는 선택한 요소의 뒤에 가상요소가 추가된다.
‼️ ::after와 ::before의 특징
- inline 요소이므로 width, height를 가지지 않는다.
width와 height를 지정해주고 싶다면 inline-block이나 block으로 변경하면 된다. - content 속성을 필수로 가진다.
- 실제 HTML 구조에는 포함되지 않기 때문에, 웹 접근성을 방해할 수 있다.
- 가상요소이기 때문에, 실제 요소에 적용되는 포인터 이벤트가 적용되지 않는다.
ex) 클릭, hover, active, focus, 드래그 .. - 빈태그에는 적용할 수 없다.(img, br, input)
📌 가상요소를 활용한 예시
1️⃣ 가상요소로 동적 컨텐츠 표시하기
attr() 함수를 이용해서 content 속성에 HTML 태그의 속성 값을 가져올 수 있다.
<style>
p::before {
content: attr(data-name) "의 블로그입니당🐶";
}
</style>
<body>
<p data-name="heedonguri"></p>
</body>
실제 data가 적용된 것을 확인할 수 있다!
2️⃣ 가상요소로 목록에 순서달기
counter-reset() 함수로 카운터를 초기화하고, content의 값으로 counter의 값을 넘겨줄 수 있다.
counter-increment 속성을 사용하면 항목이 증가하면서, 카운터 값도 증가한다.
<style>
ol {
counter-reset: list-counter; // 카운터 초기화
list-style: none;
}
li::before {
content: counter(list-counter) " : "; // 컨텐츠 값에 카운터 넣기
}
ol li {
counter-increment: list-counter; // 카운터 값 자동 증가
}
</style>
<body>
<ol>
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
</ol>
</body>
적용된 것을 확인할 수 있다!
3️⃣ 가상요소로 FNB에 구분선 추가하기
카카오 로그인 페이지를 만들면서 위와 같은 FNB를 만들어야 했다.
span 태그를 각 사이에 넣고 width와 height를 지정해서 만들었다.
하지만 카카오에서 만든 페이지를 자세히 살펴보면 ::before을 사용한 것을 볼 수 있다.
span으로 만든 코드
footer > span {
width: 1px;
height: 14px;
padding: 0;
background-color: rgba(0, 0, 0, 0.14);
}
위의 코드를 ::before로 변경
footer > div:not(:first-of-type)::before {
content: "|";
color: rgba(0, 0, 0, 0.14);
padding-right: 12px;
}
깔끔하게 잘 나오는 것을 확인할 수 있다!
📌 나머지 가상요소 4가지(컨텐츠 특정 영역 선택하는데 사용)
- ::selection - 마우스 드래그로 선택한 텍스트 컨텐츠 영역 선택
- ::marker - 목록 아이템 앞에 붙는 마커 선택
- ::first-letter - 현재 화면에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 첫 글자 선택
- ::first-line - 현재 화면에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 첫 줄 선택
'HTML,CSS,JS' 카테고리의 다른 글
| [JS]JSON.stringify, JSON.parse (0) | 2025.01.23 |
|---|---|
| [JS] let, var, const(+호이스팅, TDZ...) (0) | 2025.01.17 |
| [JS] Map, Set(객체? 배열?) (0) | 2024.12.08 |
| [CSS] RequestAnimationFrame (0) | 2024.10.08 |
| [JS] Array와 Array 메소드 (0) | 2024.08.26 |