CSS - Pseudo Elements

안녕하세요, 미래의 CSS 마법사 여러분! 오늘 우리는 CSS의 마법적인 세계로 흥미로운 여행을 떠납니다. 네 근처의 친절한 컴퓨터 선생님이자, 여러분을 이 모험으로 안내해 드리는 저는 매우 흥분합니다. 그러면 가상의魔杖( 키보드)을 손에 들고, 함께 들어보겠습니다!

개요

방을 꾸미는 것을 상상해 보세요.家具( HTML 요소)가 이미 배치되었지만,家具 자체를 변경하지 않고 추가적인 매력을 더하고 싶습니다. 이때 pseudo-elements가 등장합니다! 이들은 HTML 요소에 추가적인 장식을 더할 수 있는 마법의 장식 같은东西입니다.

문법

코드를 작성하기 전에, 문법( 주문)을 배워보겠습니다:

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

이중 콜론(::)을 보셨나요? 그것이 우리의 마법 지팡이입니다! 브라우저에게 "이제 특별한 것을 만들 거야!"라고 알립니다.

CSS ::after Pseudo-element

먼저 ::after pseudo-element부터 시작해 보겠습니다. 이 것은 요소 주위를 따라다니며 추가적인 내용을 운반하는 마법의 비서입니다.

.magic-box::after {
content: "?";
margin-left: 5px;
}

이 예제에서, "magic-box" 클래스를 가진 모든 요소 뒤에 탑帽 이모지가 나타납니다. 마치 CSS 모자에서 토끼(또는 이 경우에는 모자)를 꺼낸 것처럼입니다!

CSS ::before Pseudo-element

::after가 요소 뒤를 따라다니는 비서라면, ::before는 앞을 인도하는 비서입니다. 이 것은 요소 앞에 내용을 추가합니다.

.wizards-name::before {
content: "?‍♂️ ";
}

이제 모든 마법사의 이름 앞에 마법사 이모지가 나타납니다. 아브라카다abra!

CSS ::first-letter Pseudo-element

텍스트를 고대의 마법 卷 같이 보이게 하고 싶으신가요? ::first-letter가 그 마법입니다!

p::first-letter {
font-size: 2em;
color: #8A2BE2;
float: left;
margin-right: 5px;
}

이렇게 하면 각段落의 첫 글자가 커지고, 보라색이 되고, 왼쪽으로浮动합니다. 마치 마법의 쓰기사가你的手稿을 밝게 만드는 것처럼!

CSS ::first-line Pseudo-element

::first-letter와 비슷하지만, 텍스트의 첫 줄 전체에 적용됩니다.

p::first-line {
font-weight: bold;
color: #4B0082;
}

이제 각段落의 첫 줄이 볼드체가 되고, 자주색이 됩니다. 마치 마법 卷의 가장 중요한 부분을 하이라이트한 것처럼!

CSS ::selection Pseudo-element

텍스트가 선택될 때 어떻게 보이게 하고 싶으셨나요? ::selection이 그 마법입니다!

::selection {
background-color: #FFD700;
color: #000000;
}

이제 페이지에서 텍스트를 선택하면, 금색 배경에 검은색 텍스트로 보입니다. 마치 커서를 금의 왕 미δας로 변환한 것처럼!

여러 개의 Pseudo-elements

단일 요소에 여러 개의 pseudo-elements를 사용할 수 있습니다. 마치 마법의 효과를 레이어링하여 추가적인 마법 효과를 내는 것처럼!

.magical-quote::before,
.magical-quote::after {
content: '"';
font-size: 2em;
color: #FF1493;
}

이렇게 하면 "magical-quote" 클래스를 가진 요소 앞과 뒤에 인용符가 추가됩니다. 마치 신비로운 예언 같이 돋보입니다!

Pseudo-element 메서드 표

여기서 우리가 배운 모든 pseudo-element 메서드의 편리한 마법서( 표)를 제공합니다:

Pseudo-element	설명	예제
::after	요소 뒤에 내용 추가	.element::after { content: "?"; }
::before	요소 앞에 내용 추가	.element::before { content: "?‍♂️"; }
::first-letter	텍스트의 첫 글자 스타일 지정	p::first-letter { font-size: 2em; }
::first-line	텍스트의 첫 줄 스타일 지정	p::first-line { font-weight: bold; }
::selection	선택된 텍스트 스타일 지정	::selection { background-color: gold; }

젊은 마법사 여러분, pseudo-elements의 힘은 HTML을 병목시키지 않고 스타일과 내용을 추가할 수 있는 능력에 있습니다. 그들은 보이지 않지만 항상 필요할 때 도와주는 무形的 비서들입니다.

우리의 마법적인 CSS 여행을 마치면서, 여러분이 이 pseudo-elements를 실험해 보시길 바랍니다. 조합하고, 레이어링하고, 혼합해 보세요. 유일한 제한은 상상력입니다!

제가 가르친 연간 동안, 학생들이 이 간단한 도구로 놀라운 것들을 창조하는 것을 보았습니다. 한 학생은 pseudo-elements를 사용하여 가상의 수족관을 만들었어요. 물고기(::before와 ::after 요소)가 화면을 가로질러 이동합니다!

그러면 가상의魔杖을 흔들고, 자신만의 마법을 만들어 보세요. 웹 개발의 세계에서는 마법을 믿는 데 나이가 너무 많지 않습니다. 행복하게 코딩하시고, 스타일시트에 항상 버그가 없기를 바랍니다!

Credits: Image by storyset