사진에 alt 속성 추가하기
alt 속성은 사진의 대체 텍스트를 지정합니다. 예를 들어, 사과 사진을 올리고 alt 속성을 "바구니에 담긴 사과"라고 지정했다면, 오류 등으로 인해 사진을 불러오지 못했을때 깨진 사진 아이콘과 옆에 설정해준 "바구니에 담긴 사과"라는 글이 함께 떠서 사진이 보이지 않더라도 그 사진이 어떤 사진인지 대략적으로 유추할 수 있습니다.
이미지에 alt 속성이 있어야 사진을 보기 힘든 시각장애인도 사진의 내용을 알 수 있으며, 사진의 alt 태그는 검색엔진에서 중요하게 평가하는 요소이기에 주로 추가해주는 편입니다. 티스토리에서도 간단하게 사진에 alt 속성을 추가할 수 있으니 아래 내용대로 따라하시면 됩니다.
먼저 추가할 사진을 등록해준 다음, 우측 상단의 '기본 모드'를 클릭한뒤 HTML을 클릭하여 HTML 에디터로 전환합니다.
에디터에 보면 사진 소스가 있는데, 끝부분을 보면 width="1015" data-origin-height="413" data-ke-mobilestyle="widthContent" alt="티스토리 HTML 에디터" |||_##]와 같은 형태로 끝납니다.
여기서, |||_##] 바로 앞부분에 alt="(넣을 내용)를 추가해줍니다.
(ex. bilestyle="widthContent" alt="바구니에 담긴 사과"|||_##])
이후 에디터 모드를 다시 기본으로 바꾸고 등록하면 정상적으로 등록이 됩니다.
직접 확인하기
등록후에 사진이 제대로 올려졌는지 바로 확인할 수 있습니다.
올린 글에 들어간뒤 F12를 눌러 개발자 도구를 켜고 개체 선택(왼쪽 위 아이콘이나 Ctrl + Shift + C 단축키)을 누르고 올린 사진을 눌러 선택합니다.
alt 속성이 정상적으로 적용된 모습을 확인할 수 있습니다. 여기서, img 뒤 src부터 alt 앞까지 모두 지워버린다면 아래 사진처럼 대체 텍스트도 정상적으로 출력되는 모습을 확인할 수 있습니다.(여기서 코드를 잘못 수정하면 무한로딩이 일어나 일시차단에 걸리니 주의해야 합니다.)
