CSS를 사용하여 텍스트 바꾸기

HTML이나 PHP 파일을 직접 수정하지 않고 사이트 제목, 글 제목 또는 기타 문구를 바꾸어야 하는 상황에서 CSS를 사용할 수 있습니다. CSS 가상 요소(Pseudo-element)를 사용하여 방문자에게 표시되는 문구를 변경할 수 있습니다. (참고로 CSS를 사용할 경우 HTML이나 PHP 소스 파일에서 해당 문구를 직접 바꾸는 것이 아니므로 소스 보기에서는 본래 문구가 그대로 노출됩니다.)

CSS를 사용하여 텍스트 바꾸기

가상 요소와 visibility 사용

여러 가지 방법이 있는데요, 가상 요소와 visibility를 사용하는 것이 일반적인 방법입니다.

/* 홈 페이지 타이틀 변경하기 */
#post-2 .entry-title {
visibility: hidden;
line-height: 0;
}
#post-2 .entry-title:before {
visibility: visible;
content: '사이트를 방문해주셔서 감사합니다!';
line-height: 1.2em;
}

위의 코드는 소형 장치를 감안하여 line-height 값을 사용한 예입니다(참고).

display: none 사용

또 다른 방법으로 display: none을 사용하는 것입니다. 위에서 visibility: hidden을 사용했는데 display: none은 visibility: hidden과 비슷하지만 차이가 있습니다.

display: none과 visibility: hidden의 차이점(참고):

• display:none은 페이지에서 해당 태그가 완전히 표시되지 않는 것으로 다른 태그 사이에 할당되었던 공간도 사라지게 됩니다.
• visibility:hidden은 해당 태그가 보이지는 않지만 할당된 공간은 그대로 남아 있습니다.

다음과 같이 처리하는 것을 생각해볼 수 있습니다.

.text {
display: none;
}

.text:after {
display: block;
content: "본래 문구를 대체하는 텍스트";
}

잘 안 되면 after 대신 before를 사용해보도록 합니다.

텍스트 글자 크기를 변경하여 텍스트 대체하기

또 다른 방법으로 본래 텍스트의 글자 크기(font-size)를 0으로 만들어 보이지 않도록 만들고 가상 요소를 사용하여 새로운 텍스트를 추가하는 것입니다. 이 방법을 사용하여 워드프레스 푸터의 저작권 문구를 변경하는 방법이 이 글에서 설명되어 있습니다.

예시:

.text {
font-size: 0px;
}

.text:before {
content: "새로운 텍스트";
font-size: 11px;
display: block;
}

text-indent 사용

인터넷을 검색해보면 종종 text-indent를 사용하여 텍스트를 숨기는 방법이 소개된 것을 볼 수 있습니다. 워드프레스에서 텍스트 메뉴 항목을 이미지로 바꿀 때에도 이 방법을 사용할 수 있습니다. indent는 보통 "들여쓰기"로 해석됩니다. 여기에서 text-indent를 테스트해볼 수 있습니다.

.title {
text-indent: -999px;
}
.title:after {
text-indent: 0px;
float: left;
content: '새로운 문구';
}

위와 같이 text-indent:-999px를 사용하면 본래 있던 텍스트가 왼쪽으로 999px만큼 이동하게 됩니다. (만약 완전히 이동하지 않으면 숫자를 높이면 이동하는 경우도 있네요.)

여러 가지 방법으로 소스를 수정하지 않고 CSS로 텍스트를 대체하는 것이 가능합니다. 해당 상황에서 가장 적합한 방법을 찾아서 적용하는 것이 중요할 것 같습니다.

참고:

• 워드프레스에서 사용자 CSS 추가하기
• WordPress에서 텍스트 메뉴 항목을 이미지로 바꾸기