이틀 전부터 티스토리의 이미지 삽입된 HTML의 구성 방식이 바뀌었습니다.
그로인해 티스토리의 Alt 태그의 삽입 방식도 바뀌었는데요.
Alt 태그란
시각 장애인들을 위해 생성된 사진에 삽입하는 컴퓨터의 용어인 HTML에 삽입을 시켜주는 것입니다.
용어 그 자체로 보자면 alt는 'Alternate - 대체하다'의 줄임말로써 이미지를 볼 수 없는 시각 장애인들에게
이미지를 대체하여 글로써 설명을 할 수 있게 첨삭을 하는 태그라고 보시면 됩니다.
1. HTML로 들어가서 바꿔주는 방법
고전적인 방식이 되어버린 것 같지만 그래도 알려드려야 할 것 같아서 적어봅니다.
먼저 기존의 티스토리의 Alt 태그 삽입 방법은
이미지를 넣은 후 HTML로 이동하여 "widthContent"의 뒤에 alt="설명" 이런 방식으로 진행을 했었는데요.
지금은 그 "widthContent"자체가 없습니다.
지금은 티스토리에 이미지를 삽입한 후 사진의 이름을 적고 HTML로 이동하시면
{"originWidth":700,"originHeight":788,"style":"alignCenter", 사진의 이름
이렇게 표시가 되어 있을 겁니다.
alignCenter 앞의 내용은 사진의 사이즈입니다.
그 뒤에 저희가 티스토리에 이미지를 삽입한 후 새긴 이름이 표시되어 있습니다.
["alignCenter", "caption":사진의 이름]
의 사이에 Alt 태그를 넣어야 하는데요. 방식은 이러합니다.
["alignCenter","alt":"설명","caption":사진의 이름]
이해하셨나요??
["alignCenter","caption":"사진의 이름"]에서
---> ["alignCenter","alt":"설명","caption":"사진의 이름"] 로 변경을 하시는 겁니다.
조금 더 쉽게 설명 드리면 [alignCenter",] 뒤에 ["alt":"설명",]을 집어 넣으시면 완료가 됩니다.
적용한 예시를 드리겠습니다.
{"originWidth":700,"originHeight":788,"style":"alignCenter","caption":"이야기꾼과 만남"
위 HTML에서 굵게 표시된 "alignCenter","caption" 사이에 ["alt":"이야기꾼-만남",] 을 집어넣어주시면 됩니다.
{"originWidth":700,"originHeight":788,"style":"alignCenter","alt":"이야기꾼-만남","caption":"이야기꾼과 만남"
위가 적용된 예시이며 반드시 유의해야할 사항이 있습니다.
"alignCenter","caption" 사이에 "alt":"설명",를 넣으실때 콤마 [,]를 빼먹으시면 작업하던 글이 다 날아갑니다.
반드시 콤마를 넣어주시길 바랍니다. 저도 몇 번 글을 날려먹었습니다.
자주 하셔도 실수 할 수 있는부분이니 Alt 태그를 삽입하러 HTML로 들어가기 전에 임시저장을 꼭 하셔야 합니다.
임시저장은 티스토리 글쓰기 창의 우측 하단에 [발행] 버튼 왼쪽에 있습니다.
다시 한번 정리해 드리면
"alignCenter","caption" 사이에 "alt":"설명",를 넣자.
콤마를 빼먹으면 다 날아가니 HTML창으로 넘어가기 전에 임시저장을 꼭 합시다.
새로운 방식의 티스토리 Alt 태그 삽입 방법
- 이미지를 삽입한 후 이미지를 클릭합니다.
- 클릭한 이미지의 우측 상단 콘솔 중 [대체 텍스트 삽입]을 누릅니다.
- 대체 텍스트 삽입란에 시각 장애인을 위한 이미지의 설명을 넣습니다.
위와 같이 문구를 삽입하시면 "alignCenter","alt":"이미지-상단-대체-텍스트-삽입","caption"
이라는 문구로 이미지의 HTML에 표시가 되어있을겁니다.
이번에 드디어 티스토리가 유용한 업데이트를 해주었습니다.
다들 즐거운 블로그 생활 하시길 바랍니다^^
댓글