CSS에서 콘텐츠 변경

1. :after 의사 요소 및 display 속성을 사용하여 CSS에서 텍스트 교체
2. :before Pseudo-Element 및 visibility 속성을 사용하여 CSS에서 텍스트 교체

이 튜토리얼에서는 CSS의 콘텐츠를 변경하거나 교체하는 몇 가지 방법을 소개합니다.

:after 의사 요소 및 display 속성을 사용하여 CSS에서 텍스트 교체

CSS의 의사 요소를 사용하여 HTML로 작성된 내용을 변경하거나 대체할 수 있습니다. 그런 다음 :after 유사 요소와 content 속성을 사용하여 목표를 달성합니다.

:after 선택기를 사용하여 선택한 콘텐츠 뒤에 일부 콘텐츠를 추가합니다. 콘텐츠를 추가하기 위해 content 속성을 사용합니다.

content 속성의 값으로 원하는 컨텐츠를 작성할 수 있습니다. 내용을 바꾸거나 변경하려면 이전에 작성된 내용을 숨기고 content 속성을 사용하여 :after 선택기로 요소를 선택합니다.

이 방법은 display 속성을 none으로 설정하여 이전 텍스트를 숨깁니다.

예를 들어 text 클래스로 div를 생성합니다. div 안에 span 태그를 쓰고 span 안에 the original text를 쓰세요.

CSS에서 범위를 선택하고 display 속성을 none으로 설정합니다. 다음으로 :after 선택기를 사용하여 text 클래스를 선택합니다.

마지막으로 content 속성을 작성하고 해당 값을 본문에 the changed text로 설정합니다.

아래 예제의 코드 조각을 실행하면 the changed text가 표시됩니다. 여기서 the original text라는 텍스트는 문서에서 제거되고 요소가 존재하지 않는 것처럼 작동합니다.

content 속성의 값이 공간을 차지하기 때문입니다. 결과적으로 새로운 콘텐츠가 표시됩니다.

<div class="text">
<span>the original text</span>
</div>

.text span {
 display: none;
}
.text:after {
 content: 'the changed text';
}

:before Pseudo-Element 및 visibility 속성을 사용하여 CSS에서 텍스트 교체

CSS에서 :before 의사 요소를 사용하여 HTML로 작성된 내용을 변경할 수 있습니다. :before 의사 요소는 :after 의사 요소와 유사하게 작동하지만 내용은 여기에 표시됩니다.

선택한 요소 앞에 내용을 작성하는 데 사용합니다. 이 방법은 첫 번째 방법에서와 같이 content 속성을 사용합니다.

또한 visibility 속성을 사용하여 이전 콘텐츠를 숨기고 hidden으로 설정할 수 있습니다.

hidden으로 설정하면 visibility 속성은 내용을 보이지 않게 하지만 문서에는 공백이 표시됩니다. 그러나 :before 선택기를 사용하면 공간이 새 콘텐츠로 재정의됩니다.

예를 들어, span 요소를 선택하고 첫 번째 방법에서 사용된 예제에서 visibility 속성을 hidden으로 설정합니다.

그러나 이전에 적용된 스타일을 제거하는 것을 잊지 마십시오. 다음으로 :before 선택기로 text 클래스를 선택하고 아래 예와 같이 새 내용을 작성합니다.

display:none을 사용하여 이전 콘텐츠를 숨깁니다. 그러나 :after 선택기를 사용하는 동안 숨겨진 요소의 공간이 보존되므로 visibility:hidden을 사용할 수 없습니다.

<div class="text">
<span>before</span>
</div>

.text span {
 visibility:hidden;
}
.text:before {
 content: 'after';
}