가끔가다 CSS 문법 중에서 선택자(HTML 태그) 뒤에 콜론이 오고 after, before와 같은 단어들이 있는 경우를 본 적이 있다. 예를 들면, p::after, p::before와 같은 경우다.
궁금하던 차에 MDN에서 검색하고, 유튜브에서 설명한 내용이 있어 정리해 본다.
이는 의사 요소 또는 가상 요소라고 하는데 영어로는 pseudo element이다. 선택자에 추가하는 키워드로서, 선택한 요소 일부분에 스타일을 입힐 수 있는 역할을 한다고 한다. 위에서 p::after 경우에는 모든 p 선택자 다음에 정의한 스타일대로 요소가 추가된다는 의미를 갖는다. 콜론은 1개(:after)를 입력해도 브라우저에서 인식이 된다고 한다.
다음과 같은 구문으로 사용한다.
selector::pseudo-element {
property: value;
}
pseudo element 옵션에는 after, before, placeholder, first-line 등이 존재한다.
아래와 같은 HTML, CSS 코드가 있을 경우
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>What are CSS Pseudo Elements?</title>
<style>
p::after {
content: attr(data-message);
background: cyan;
}
</style>
</head>
<body>
<p data-message="This is a message!">This is a paragraph</p>
</body>
</html>
p 선택자에 대해 after 옵션으로 pseudo-element를 정의를 하였다. content 속성에 특이한 attr를 사용해 p 식별자에 입력한 data-message 값을 가져올 수 있게 되었고, background를 지정하였다. 이를 적용했을 경우에 화면은 아래와 같다.
HTML body에는 p 선택자의 텍스트로 "This is a paragraph"만을 정의했지만, pseudo element가 추가적인 스타일 요소를 만들어 background 색을 갖는 "This is a message!" 텍스트를 만들어 내었다. before를 사용하면 정의한 텍스트 이전에 추가된 요소가 생긴다.
특이한 점은 크롬 개발자 도구를 통해 살펴보았을 때 추가된 요소가 단순히 pseudo element를 나타내는 ::after로 표시된다는 점이다. pseudo element를 활용하면 간단한 툴팁도 만들 수 있다고 한다! 다음에 꼭 활용해 봐야겠다.
출처
1. https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements
의사 요소 - CSS: Cascading Style Sheets | MDN
CSS 의사 요소(가상 요소)는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있습니다. 예를 들어 ::first-line (en-US)을 사용하면 문단 첫 줄의 글씨체만 바꿀 수 있습니다.
developer.mozilla.org
'IT > Web' 카테고리의 다른 글
| Event 인터페이스의 preventDefault 메소드란? (0) | 2022.05.03 |
|---|
댓글