c17. CSS 가상-태그

CSS 가상-태그

CSS 가상-태그 (Pseudo-Elements) 는 태그의 특정 부분의 스타일을 지정할 때 사용됩니다. 예를 들면 다음과 같은 경우에 사용됩니다.

	어떤 태그 내에서 첫번째 문자 또는 줄 만에 대해 스타일을 지정할 때
	어떤 태그의 내용이 있으면 그 내용의 전 또는 후에 다른 내용을 삽입할 때

가상-태그 (pseudo-elements) 의 구문은 아래와 같습니다.

selector::pseudo-element {
    property:value;
}

위의 구문에서 콜론을 두개 사용하였는데, CSS3 에서 가상-태그 (pseudo-elements) 에는 콜론 하나 (:) 대신에 두개 (::) 를 사용하기 때문입니다.

이것은 W3C (World Wide Web Consortium) 에서 가상-클래스 (pseudo-classes) 와 가상-태그 (pseudo-elements) 를 구분하기 위한 목적이었습니다.

Notice the double colon notation - ::first-line versus :first-line

The double colon replaced the single-colon notation for pseudo-elements in CSS3. 

This was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements.

콜론 하나(:) 는 CSS2 과 CSS1 에서 가상-클래스 (pseudo-classes) 와 가상-태그 (pseudo-elements) 구분없이 사용하였었습니다.

The single-colon syntax was used for both pseudo-classes and pseudo-elements in CSS2 and CSS1.

이전 버전과의 호환을 위해, 콜론 하나(:) 구문도 CSS2 및 CSS1 을 위한 가상-태그 (pseudo-elements) 로서 인정하고 있습니다.

---

가상-태그 (pseudo-elements) 는 CSS 클래스 (CSS classes) 와 조합하여 사용될 수 있습니다.

아래 예에서 p.first-line::first-line {} 은 p::first-line 가상 태그와, class="first-line" 클래스가 조합되어,

클래스가 class="first-line" 인 p 태그에만, 첫줄 효과가 적용되었습니다.

<style>
p.first-line::first-line {
color: OrangeRed;
font-size: 300%;
}
p.first-letter::first-letter {
color: OrangeRed;
font-size:300%;
}
</style>
<p class="first-line">p 태그 안에 긴 줄이 있을 경우, 위의 스타일 지정에서 p 태그에 대해, 가상-태그로서 p::first-line {} 을 지정하였으므로, 이 문장에서 맨 첫줄에 대해서는 {} 안에 지정한 속성 값이 적용될 것입니다. 따라서 color: OrangeRed; 및 font-size: 300%; 이 맨 윗줄에만 적용되었습니다.</p>
<p class="first-letter">이번엔 p 태그 안의 내용 중 맨 첫 글자에 대해 가상 태그 p.::first-letter {} 를 지정하였으므로, 이 문장에서 맨 첫 글자만 {} 안에서 지정한 속성 값이 적용되었습니다.</p>

p 태그 안에 긴 줄이 있을 경우, 위의 스타일 지정에서 p 태그에 대해, 가상-태그로서 p::first-line {} 을 지정하였으므로, 이 문장에서 맨 첫줄에 대해서는 {} 안에 지정한 속성 값이 적용될 것입니다. 따라서 color: OrangeRed; 및 font-size: 300%; 이 맨 윗줄에만 적용되었습니다.

이번엔 p 태그 안의 내용 중 맨 첫 글자에 대해 가상 태그 p.::first-letter {} 를 지정하였으므로, 이 문장에서 맨 첫 글자만 {} 안에서 지정한 속성 값이 적용되었습니다.

---

::before 가상-태그 (pseudo-element) 는 어떤 태그의 바로 앞에 내용을 추가해 줍니다.

이와 동일하게 ::after 가상-태그 (pseudo-element) 는 어떤 태그의 바로 뒤에 추가할 내용을 지정해 줍니다.
<style>
h3.tel::before {
content: url(http://icons.iconarchive.com/icons/dtafalonso/android-lollipop/32/Hangouts-icon.png);
}
p.phone::after {
content: url(http://icons.iconarchive.com/icons/dtafalonso/android-lollipop/32/Phone-icon.png);
}
::-moz-selection { /* Code for Firefox */
color: red;
background: yellow;
}

::selection {
color: red;
background: yellow;
}
</style>
<h3 class="tel"> h3 태그 앞에 아이콘 삽입</h3>
<p>가상-태그 ::before 는 해당 태그의 바로 전 영역에 지정된 스타일을 삽입합니다.</p>

<h3 class="tel"> :: before 가상-태그 적용</h3>
<p class="phone">class="phone" 과 조합하여 p::after 가상-태그를 적용하였습니다.</p>

h3 태그 앞에 아이콘 삽입

가상-태그 ::before 는 해당 태그의 바로 전 영역에 지정된 스타일을 삽입합니다.

:: before 가상-태그 적용

class="phone" 과 조합하여 p::after 가상-태그를 적용하였습니다.

---

[광고] Udemy 동영상 강의로 보기