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

CSS ::before와 ::after 가상 요소 완벽 가이드

CSS의 ::before와 ::after 가상 요소(Pseudo-element)는 HTML 구조를 변경하지 않고도 선택한 요소의 앞 또는 뒤에 새로운 콘텐츠를 삽입할 수 있도록 해주는 강력한 기능입니다. 장식용 아이콘 추가, 라벨 표시, 복잡한 도형 그리기 등 다양한 용도로 활용됩니다.

가상 요소의 기본 개념

::before는 요소의 앞에, ::after는 요소의 뒤에 콘텐츠를 생성합니다. 이때 반드시 content 속성을 함께 지정해야 하며, 값이 빈 문자열("")이라도 선언해야 가상 요소가 화면에 나타납니다.

  • ::before — 요소 내부 콘텐츠 시작 위치 앞에 삽입
  • ::after — 요소 내부 콘텐츠 끝 위치 뒤에 삽입
  • content 속성 필수 — 텍스트, 이미지(url()), 따옴표 등 다양한 값을 지정 가능

예제 1: 텍스트 콘텐츠 삽입하기

다음은 ::before와 ::after를 사용해 문장 앞뒤에 텍스트를 추가하는 기본적인 예제입니다.

<!DOCTYPE html>
<html>
<head>
<style>
div:nth-of-type(1) p:nth-child(2)::after {
    content: " BUZZINGA!";
    background: orange;
    padding: 5px;
}
div:nth-of-type(2) p:nth-child(2)::before {
    content: "Harry:";
    background-color: lightblue;
    font-weight: bold;
    padding: 5px;
}
</style>
</head>
<body>
<div>
<p>Nobody: </p>
<p>Sheldon Cooper:</p>
</div><hr><div>
<p><q>Death Eaters arrive</q></p>
<p><q>Expecto Patronum!</q></p>
</div>
</body>
</html>

실행 결과

위 코드를 실행하면 첫 번째 문단의 "Sheldon Cooper:" 뒤에는 주황색 배경의 "BUZZINGA!"가 붙고, 두 번째 문단의 대사 앞에는 하늘색 배경의 굵은 글씨 "Harry:"가 추가되어 표시됩니다.

예제 2: 음양(陰陽) 기호 그리기

가상 요소는 단순한 텍스트 삽입을 넘어 순수 CSS만으로 그래픽을 만들 때도 유용합니다. 아래 예제는 하나의 div와 두 개의 가상 요소만으로 음양 태극 기호를 완성합니다.

<!DOCTYPE html>
<html>
<head>
<title>Center Alignment using CSS Margin</title>
<style>
#yinyangSymbol {
    width: 100px;
    height: 50px;
    background: #fff;
    border-color: #000;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
}
#yinyangSymbol::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #fff;
    border: 18px solid #000;
    border-radius: 100%;
    width: 14px;
    height: 14px;
}
#yinyangSymbol::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #000;
    border: 18px solid #fff;
    border-radius:100%;
    width: 14px;
    height: 14px;
}
div{
    width: 50%;
    margin: 10px auto;
    border:4px solid black;
}
#text {
    border: 4px solid black;
    background-color: grey;
    color: white;
    text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div>
<div id="yinyangSymbol"></div>
</div>
<div id="text">Be Centered &amp; Balanced</div>
</div>
</body>
</html>

실행 결과

실행하면 검정과 흰색으로 이루어진 음양 기호가 중앙에 배치된 것을 확인할 수 있습니다. 여기서 ::before는 흰 원에 검은 테두리를, ::after는 검은 원에 흰 테두리를 담당하여 좌우 대칭의 균형 잡힌 도형을 완성합니다.

활용 시 주의사항

  • content 속성을 생략하면 가상 요소가 렌더링되지 않습니다.
  • 가상 요소로 삽입된 콘텐츠는 DOM에 존재하지 않으므로 스크린 리더나 검색 엔진이 인식하지 못할 수 있습니다. 중요한 정보는 실제 마크업으로 작성하는 것이 좋습니다.
  • <img>, <input>처럼 자식 요소를 가질 수 없는 일부 교체 요소(replaced element)에는 적용되지 않습니다.
  • 위치 조정이 필요하다면 부모 요소에 position: relative;를 지정하고 가상 요소에 position: absolute;를 사용하는 것이 일반적입니다.

마무리

::before와 ::after 가상 요소를 잘 활용하면 불필요한 HTML 태그 없이 깔끔하게 디자인을 구현할 수 있습니다. 텍스트 꾸미기부터 CSS 아트까지 응용 범위가 넓으니, 위 예제들을 직접 수정해 보며 감각을 익혀보세요.