Computer >> 컴퓨터 >  >> 프로그래밍 >> CSS

CSS ::before와 ::after 선택자 완벽 가이드 – 실전 활용 방법

CSS의 ::before 선택자는 선택한 요소 앞에 콘텐츠를 삽입하고, ::after 선택자는 지정한 요소 뒤에 콘텐츠를 삽입합니다. 이 두 선택자는 주로 단락이나 링크 앞뒤에 텍스트를 추가할 때 널리 사용됩니다.

왜 ::before와 ::after가 필요한가?

웹사이트를 디자인하다 보면 요소의 콘텐츠 앞이나 뒤에 추가 내용을 넣고 싶을 때가 있습니다. 예를 들어 목록의 각 글머리 기호 앞에 이미지를 붙이고 싶은 경우가 그렇습니다.

바로 이럴 때 CSS의 ::before와 ::after 의사 요소(pseudo-element)가 유용합니다. 이 두 의사 요소를 사용하면 HTML을 수정하지 않고도 요소 콘텐츠의 앞이나 뒤에 원하는 내용을 삽입할 수 있습니다.

이 글에서는 예제를 통해 ::before와 ::after 의사 요소로 웹 페이지의 콘텐츠를 꾸미는 방법을 살펴봅니다. 끝까지 읽고 나면 전문 웹 디자이너처럼 두 선택자를 자유롭게 활용할 수 있게 될 것입니다.

CSS 의사 요소(Pseudo-Element)란?

의사 요소는 CSS 선택자로 선택한 요소의 특정 부분에 스타일을 적용할 수 있게 해주는 특수 키워드입니다. 모든 의사 요소는 곧 하나의 선택자이므로, 이 글에서는 의사 요소를 '선택자'라고 부르겠습니다.

의사 요소는 요소에 별도의 CSS 클래스나 ID를 추가하지 않고도 스타일을 적용하고 싶을 때 특히 유용합니다. 예를 들어 웹 페이지의 모든 링크 뒤에 '>' 화살표를 붙이고 싶다면 의사 요소 하나면 충분합니다.

CSS는 ::first-line, ::first-letter, ::before, ::after 등 다양한 의사 요소를 제공합니다. 이번 튜토리얼에서는 그중 ::before와 ::after 두 가지에 집중하겠습니다.

의사 요소는 일반적으로 이중 콜론(::)으로 표기합니다. CSS3에서는 단일 콜론(:) 문법도 지원하지만, 두 개의 콜론을 사용하는 것이 모범 사례입니다.

그 이유는 이중 콜론 표기를 통해 의사 클래스(pseudo-class)와 의사 요소(pseudo-element)를 명확히 구별하기 위해서입니다.

CSS ::before 의사 요소

::before 의사 요소는 웹 페이지에서 요소 앞에 나타나는 콘텐츠를 추가합니다. 주로 단락 앞에 텍스트를 넣을 때 사용됩니다.

::before 의사 요소의 기본 문법은 다음과 같습니다.

selector::before {
  /* CSS 규칙 */
}

::before 선택자는 스타일을 적용하려는 요소 이름 뒤에 붙입니다.

::before 의사 요소의 주요 구성 요소는 다음과 같습니다.

  • selector: ::before를 적용할 대상 선택자입니다. 모든 a 태그에 적용하려면 'a'를, class명이 'link'인 모든 요소 앞에 적용하려면 '.link' 선택자를 사용합니다.
  • ::before: 브라우저에게 해당 선택자 앞에 CSS 규칙의 콘텐츠를 추가하도록 지시합니다.
  • CSS 규칙: 선택자 앞에 실제로 적용될 스타일입니다.

CSS 선택자의 동작 방식을 더 깊이 이해하고 싶다면 CSS 선택자 가이드를 함께 참고하는 것이 좋습니다.

::before 예제

예제 웹 페이지의 모든 링크 앞에 링크 이모지(🔗)를 추가하고 싶다고 가정해 보겠습니다. 다음 코드로 이 작업을 수행할 수 있습니다.

a::before {
  content: "🔗";
}
CSS ::before와 ::after 선택자 완벽 가이드 – 실전 활용 방법

HTML 파일에는 홈페이지로 연결되는 a 태그를 정의하고, CSS 파일에서는 ::before 의사 요소를 사용해 페이지의 모든 a 태그 앞에 링크 이모지를 추가했습니다.

여기서 핵심은 CSS에 content 속성을 지정한 것입니다.

content: "🔗";

이 규칙 덕분에 생성한 a 태그의 시작 부분에 링크 이모지가 표시됩니다.

content 속성에 사용할 수 있는 값은 다음과 같습니다.

  • 문자열 — 예: "문자열입니다."
  • 카운터 — 예: counter(li);
  • 이미지 — 예: url(/path/to/image.png)
  • 빈 문자열 — 예: ""

단, content 속성에는 HTML 요소를 직접 삽입할 수 없습니다.

CSS ::after 의사 요소

CSS의 ::after 의사 요소는 요소 바로 뒤에 콘텐츠를 추가합니다. ::before 선택자와 마찬가지로 링크나 텍스트 단락과 함께 자주 사용됩니다.

::after 의사 요소의 문법은 다음과 같습니다.

selector::after {
  /* CSS 규칙 */
}

::after의 문법은 ::before와 완전히 동일하며, 앞서 설명한 것과 같은 값들을 content 속성에 그대로 사용할 수 있습니다.

::after 예제

Hansons Bakery라는 베이커리 웹사이트의 링크 요소를 디자인한다고 가정해 보겠습니다. 이 링크에는 'Hansons Bakery 홈페이지로 이동'이라는 텍스트가 표시되어야 하며, 1px 굵기의 검은색 실선 테두리로 둘러싸여 있어야 합니다.

또한 링크 뒤에는 '이 페이지에서는 우리 베이커리 메뉴를 소개합니다.'라는 내용의 텍스트 상자(앞에 공백 포함)가 나타나야 하고, 이 상자의 배경색은 주황색이어야 합니다.

다음 코드로 이 작업을 수행할 수 있습니다.

<!-- index.html -->
<a href="/" class="label">Hansons Bakery 홈페이지로 이동</a>

/* styles.css */
.label {
  border: 1px solid black;
}

.label::after {
  content: " 이 페이지에서는 우리 베이커리 메뉴를 소개합니다.";
  background-color: orange;
}
CSS ::before와 ::after 선택자 완벽 가이드 – 실전 활용 방법

위 코드에서는 a 태그로 홈페이지 링크를 정의했으며, 이 링크에는 .label이라는 클래스가 지정되어 있습니다.

CSS 파일에서는 .label 클래스를 가진 모든 요소에 1px 굵기의 검은색 실선 테두리를 적용했습니다.

그런 다음 ::after 선택자를 사용해 앞서 설명한 텍스트 상자를 만들었습니다. 이 상자에는 '이 페이지에서는 우리 베이커리 메뉴를 소개합니다.'라는 내용이 표시되며 주황색 배경을 가집니다.

마무리

::before와 ::after 의사 요소를 사용하면 CSS 규칙에서 선택한 요소의 특정 위치에 콘텐츠를 추가할 수 있습니다. 예를 들어 ::before 선택자로 링크 앞에 텍스트를 넣거나, ::after 선택자로 단락 뒤에 이모지를 붙일 수 있습니다.

이번 튜토리얼에서는 예제와 함께 CSS 의사 요소의 기본 개념과 ::before, ::after 의사 요소의 사용 방법을 살펴보았습니다. 이제 여러분도 전문 웹 디자이너처럼 CSS 코드에서 두 의사 요소를 자신 있게 활용할 준비가 되었습니다.

추천 학습 자료, 도서, 온라인 강의 등 CSS 웹 개발 학습 리소스가 필요하다면 CSS 학습 가이드를 확인해 보시길 권합니다.