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가 있어서 아래와 같이 코드를 넣었는데 아무런 변화가 없어서요. 혹시 도움주실 수 있으신지요?
#navbar-brand m-0 a {
display:block;
height:130px;
width:500px;
padding:0px;
margin-left:6px;
outline:none;
text-indent:-9999px;
background-image:url('https://ecocivkorea.org/wp-content/uploads/2022/05/생태문명원-로고.png'); background-position:0 0;
}
텍스트를 이미지로 변경하고 싶은 경우 다음 글을 참고해보시기 바랍니다.
https://www.thewordcracker.com/miscellaneous/replace-text-with-an-image-or-an-image-with-another-image-css/
사이트 제목을 본래 사이트 이름과 다르게 보이도록 바꾸고 싶은데
/* 홈 페이지 타이틀 변경하기 */
#post-2 .entry-title {
visibility: hidden;
line-height: 0;
}
#post-2 .entry-title:before {
visibility: visible;
content: '사이트를 방문해주셔서 감사합니다!';
line-height: 1.2em;
}
이걸 어디에 붙여야 하나요
사이트 주소가 어떻게 되나요? 그리고 사용하는 테마는 무엇인가요?
제가 한 번 살펴보고 사이트 제목 부분을 다르게 바꿀 수 있는 방법이 있는지 체크해보겠습니다.