언어 및 도구들 공부/HTML, CSS

CSS 가상 요소 before

Dr.Mlem 2024. 12. 3. 15:55

Q1.

const SexLabel=styled.span`
    &:before{
        color:${({sex})=> sex === 'male'? '#06f':'#c0c'};
        content:'${({sex})=> sex === 'male'? '남자':'여자'}';
        font-weight: 600;
    }
    `;

이런 컴포넌트가 있는데, &:before는 무슨 CSS 연산자 또는 선택자이고, 가지고 있는 속성을 어떻게 적용할 수 있는지 알려줘. 단, 삼항연산자와 props에 대한 내용은 안해줘도 돼. 이미 알고 있는 내용이야.

 
 
 
A1.

ChatGPT의 말:

 

&:before는 CSS에서 **가상 요소(pseudo-element)**를 나타내는 선택자 중 하나입니다. 이는 DOM에 실제로 존재하지 않는 가상의 요소를 생성하여 특정 스타일을 적용할 수 있도록 해줍니다.

:before란 무엇인가요?

  • :before는 선택한 요소의 내용 앞에 가상 요소를 추가합니다.
  • CSS 규칙에 따라, 이 가상 요소는 content 속성을 필수적으로 사용해야 합니다. content가 없으면 가상 요소는 렌더링되지 않습니다.

사용 방식

  1. content 속성으로 가상 요소의 내용을 정의합니다.
    • 텍스트, 빈 문자열(''), 또는 심지어 이미지 URL을 설정할 수도 있습니다.
  2. 다른 CSS 스타일 속성을 사용하여 가상 요소를 꾸밀 수 있습니다.
    • 색상, 크기, 배경, 테두리 등 일반적인 CSS 스타일 속성을 적용할 수 있습니다.
  3. 부모 요소와 동일한 블록 수준/인라인 속성을 상속받습니다. 하지만 이를 오버라이드할 수 있습니다.

:before를 사용할 때 주의사항

  • 위치: :before는 기본적으로 부모 요소 내부의 첫 번째 자식 요소처럼 동작합니다. 그러나 CSS에서 position을 통해 이 위치를 조정할 수 있습니다.
  • 내용 정의 필수: content 속성이 반드시 정의되어야 렌더링됩니다.
  • 접근성: 가상 요소로 추가된 내용은 스크린 리더와 같은 보조 기술에서 접근하기 어렵습니다. 중요한 콘텐츠는 HTML 구조에 직접 작성하는 것이 좋습니다.

속성 설명

이 컴포넌트에서 &:before는 다음과 같이 동작합니다:

  1. color: 글자 색상을 설정합니다.
  2. content: 렌더링될 텍스트(혹은 다른 콘텐츠)를 정의합니다.
  3. font-weight: 글자의 굵기를 설정합니다.

추가적인 활용법

만약 스타일을 더 다르게 설정하고 싶다면, 아래와 같은 속성도 적용할 수 있습니다:

&:before {
    display: inline-block; /* 또는 block */
    margin-right: 8px; /* 부모 요소와의 간격 */
    padding: 4px;
    border-radius: 4px; /* 모서리 둥글게 */
    background-color: lightgray; /* 배경 색상 */
}

이를 통해 가상 요소의 위치나 스타일을 자유롭게 조정할 수 있습니다.

 
 
 
Q2.

나의 말:

그럼 저렇게 적용된 컴포넌트를, <td><가상컴포넌트></td> 이렇게 배치해주면, 해당 컴포넌트의 내용이 td태그 안에 들어가게 되는거야? 그리고 이 내용이 가상요소라고 함은, 해당 연산을 통해 나온 내용은, 브라우저 상에서는 보이지만, 페이지 소스에는 ::before 같이, 실제 내용에 대해서는 나오지 않기 때문인가?

 
 
 
A2.

ChatGPT의 말:

 

질문 1: <td><가상컴포넌트></td>로 사용하면 내용이 <td> 안에 들어가게 되는가?

네, <td> 안에 <가상컴포넌트>를 배치하면, SexLabel 컴포넌트의 가상 요소 내용(:before)은 <td> 내부에 렌더링됩니다. 구체적으로는, <td>의 자식 요소로 SexLabel 컴포넌트가 들어가고, :before는 해당 컴포넌트가 렌더링하는 DOM 요소의 앞부분에 추가됩니다.

HTML의 렌더링 구조로 보면 이런 식으로 변환됩니다(React 컴포넌트가 span을 렌더링한다고 가정):

<td>
  <span>
    <!-- 가상 요소 -->
    남자
    <!-- 실제 DOM 요소 -->
  </span>
</td>

즉, 가상 요소 :before의 내용은 실제로 렌더링 결과에 포함되어 브라우저 화면에서 보이게 됩니다.

질문 2: 가상 요소란 무엇이고, 페이지 소스에는 나오지 않는 이유는?

가상 요소는 CSS로 정의된 렌더링 전용 요소입니다. 브라우저가 CSS를 처리할 때 DOM에 새롭게 추가하는 시각적 효과로만 존재합니다. 몇 가지 특징이 있습니다:

  1. 브라우저 상에서는 보임:
    • :before나 :after로 정의된 내용은 브라우저 렌더링 단계에서 시각적으로 추가됩니다. 이는 마치 DOM의 일부처럼 보이지만, 실제 HTML 소스에는 포함되지 않습니다.
  2. 페이지 소스에 나오지 않음:
    • HTML 소스 코드에는 :before와 같은 CSS 가상 요소에 의해 생성된 내용이 보이지 않습니다. 이는 CSS가 HTML을 꾸미는 역할을 하기 때문입니다.
    • **개발자 도구(DevTools)**에서 "Elements" 탭을 보면, 렌더링된 DOM 구조 내에서 ::before와 같은 가상 요소가 시각적으로 추가된 것을 확인할 수 있습니다. 하지만 "View Page Source"에서는 이 내용이 보이지 않습니다.
  3. 가상 요소의 정의:
    • CSS를 통해 정의되기 때문에 HTML에 직접 포함되지 않습니다.
    • 이는 HTML의 구조와 스타일을 분리하여 유지보수를 용이하게 하고, 추가적인 내용을 동적으로 삽입하거나 꾸밀 때 유용하게 작용합니다.

정리

  • <td><가상컴포넌트></td>로 구성하면, 가상 요소의 내용은 <td> 안에 시각적으로 렌더링됩니다.
  • 그러나 가상 요소는 CSS에 의해 동적으로 생성된 것으로, HTML 소스에는 포함되지 않고, 개발자 도구에서만 확인할 수 있습니다.
  • 이 때문에 가상 요소의 내용을 중요한 정보로 활용하기보다는, 디자인이나 부수적인 정보 표시용으로 사용하는 것이 좋습니다.