CSS를 사용하여 보이지 않는 텍스트

CSS를 사용하여 텍스트 요소를 숨기는 것은 다양한 디자인 목적에 유용할 수 있습니다. 일반적인 시나리오 중 하나는 텍스트를 로고 이미지로 바꾸는 것입니다. 이 문서에서는 이미지를 표시하는 동안 원본 텍스트를 효과적으로 제거하는 방법이라는 구체적인 문제를 다룹니다.

텍스트 숨기기 솔루션

이미지를 표시하는 동안 텍스트를 보이지 않게 만드는 방법에는 여러 가지가 있습니다. 이미지 배치를 위해 요소의 크기를 보존합니다.

방법 1: 텍스트 들여쓰기

한 가지 기술은 text-indent:

h1 {
    text-indent: -9999px;                 /* sends the text off-screen */
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;
    white-space: nowrap;            /* because only the first line is indented */
}

방법 2: 텍스트 숨기기

또 다른 솔루션은 음수 들여쓰기로 인해 생성된 커다란 보이지 않는 상자를 방지합니다.

h1 {
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;

    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

두 가지 방법 모두 텍스트를 화면 밖으로 밀거나 요소 내에 숨겨 원하는 결과를 얻습니다.