티스토리 이미지 Alt 속성 추가하기

안녕하세요.

인터넷을 돌아다니다 보면 사이트의 모든 내용이 로딩되지 않고 일부는 보이지 않는 경우가 있습니다. 텍스트는 용량이 적어서 그런 경우가 거의 없습니다. 하지만 이미지의 경우에는 용량이 너무 크거나, 연결된 링크가 깨졌을 경우 혹은 PC 설정에 따라 화면에 표시되지 않는 경우가 종종 있습니다.

이미지가 뜨지 않으면 위의 그림처럼 흔히들 엑박이라고 불리는 상태로 화면에 표시됩니다. 단순히 x표시만 되어 있어서 어떤 사진인지 전혀 알 수가 없습니다. 하지만 alt 속성을 사용하면 대략 어떤 이미지인지는 유추가 가능합니다. 

위의 그림처럼 이미지에 대해 alt 속성을 지정하면 이미지 설명이 x표시 부근에 나타나게 됩니다. (위의 그림은 예시로 만든 그림입니다.) 즉, 이미지에 대체 텍스트를 추가하는 것입니다.

이번 포스팅에서는 티스토리 블로그를 기준으로 alt 속성을 어떻게 추가하는지 알아보도록 하겠습니다. 티스토리의 구 버전 글쓰기 편집기에서는 이미지 추가 후 간단하게 대체 텍스트 추가가 가능하나, 새로운 버전의 글쓰기에서는 대체 텍스트 입력 기능이 제외되었습니다. 따라서 티스토리의 새로운 글쓰기 편집기 기준으로 대체 텍스트 입력 방법을 알아보겠습니다.

먼저 위의 사진을 본문에 추가하였습니다. 그리고 티스토리 글쓰기 메뉴에서 우측 상단의 HTML 편집으로 들어갑니다.

HTML 편집기에서 위의 그림처럼 이미지가 추가된 행을 찾을 수 있습니다. 이미지가 추가된 행의 내용은 아래와 같이 구성되어 있습니다.

이미지 업로드 경로|정렬 방식|파일 이름, 사이즈 등등

이미지가 업로드되면 위와 같이 구성된 HTML 속성이 나타나게 되는데, 여기에 alt 태그를 사용하여 대체 텍스트를 추가할 수 있습니다.

~img.jpg|alignCenter|alt="thumbnail"  data-filename="1.jpg"~

붉은색으로 표시한 alt 태그를 사용하여 대체 텍스트를 입력할 수 있습니다. 이제부터 위에 업로드한 일출 이미지가 화면에 나타나지 않는 경우, thumbnail이란 이름으로 x표시 부근에 표시되게 됩니다. 

여기까지 티스토리 블로그 글쓰기에서 이미지 대체 텍스트를 입력하는 방법을 알아보았습니다.

 

행복한 하루 보내세요.

감사합니다.