CSS

이미지 대체 텍스트 숨기기

하루 2021. 12. 19. 22:20

text-indent

  • 첫번째 줄의 들여쓰기를 지정한다.
  • 음수값을 사용할 수 있다.
  • 음수값을 사용하면 첫째줄은 왼쪽에서 들여쓰기(내어쓰기) 된다.
  • text-align: -9999px (화면 밖으로 내보내기)

 

웹에서 들여쓰기를 하는 경우는 background를 통해 이미지를 삽입할 때 사용된다.

img 태그에서 이미지를 삽입할 때 alt로 대체 텍스트를 작성해준 것처럼, background 이미지를 사용 시 웹 접근성을 위해 이미지가 삽입된 태그에 대체텍스트를 작성해주면 그림과 텍스트가 같이 나타나게 된다.

따라서 text-indent를 작성해서 화면 밖에 존재하지만, 시각적으로는 보이지 않는. 텍스트를 영역 밖으로 밀어내는 것으로 많이 사용된다.