미니쿠파
미니쿠파
미니쿠파
전체 방문자
2,233,669
오늘
393
어제
686
  • 분류 전체보기 (131)
    • 휴대폰 (17)
      • 안드로이드 (9)
      • ios (5)
    • 소프트웨어 (36)
      • 앱 (5)
      • 프로그램 (12)
      • 사이트 (5)
      • 윈도우 (7)
      • 티스토리 (7)
    • 하드웨어 (37)
      • cpu (6)
      • 그래픽카드 (2)
      • 메인보드 (6)
      • 모니터 (4)
      • 스피커 (1)
      • 라즈베리파이 (6)
    • 개발 (19)
      • flutter (4)
      • node.js (3)
      • JS, 티스토리 (4)
      • 파이썬 (2)
      • 안드로이드 (6)
    • 게임 (17)
      • 마인크래프트 (10)
      • GTAV (6)
    • 뉴스 (6)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

  • 개인정보처리방침
  • 책임한계와 법적고지

인기 글

  • 2022년 7월 AMD, 인텔 CPU 성능 순위표 (검색 ⋯
    2021.02.05
    2022년 7월 AMD, 인텔 CPU 성능 순위표 (검색 ⋯
  • 아주 쉬운 마인크래프트 텍스쳐팩, 리소스팩 적용법!
    2020.05.05
    아주 쉬운 마인크래프트 텍스쳐팩, 리소스팩 적용법!
  • 무료로 쉽게 할 수 있는 윈도우10 다운로드, 설치 방법!
    2020.03.12
    무료로 쉽게 할 수 있는 윈도우10 다운로드, 설치 방법!
  • 모니터 화면 크기, 비율 및 해상도 비교
    2020.01.24
    모니터 화면 크기, 비율 및 해상도 비교
  • 컴퓨터 reboot and select proper boo⋯
    2020.01.21
    컴퓨터 reboot and select proper boo⋯

태그

  • 스펙
  • 안드로이드 스튜디오
  • 윈도우
  • 적용법
  • 모드
  • 마인크래프트
  • 프로그램
  • 모니터
  • 가격
  • 설치
  • CPU
  • 컴퓨터
  • 윈도우10
  • 티스토리
  • 라즈베리파이
  • 바이오스
  • 비교
  • 리뷰
  • 성능
  • GTA5

최근 댓글

  • 무료로 사용가능합니다
    개발자
  • 얘는 지금 무슨 게임에 이상한 걸 넣고 자빠졌어 그냥! 조⋯
    타키
  • 뭉탱이로 있다가 유링게슝
    빈 돈통
  • 타지리 저작권 버전도 추가되었으면 좋겠다맨이야
    뭉탱아 영양제 먹어라
  • amd 칩셋 보드는 지원안하는거 같네요
    123

최근 글

  • GTA5 라디오로 듣고 싶은 노래 듣기! [셀프 라디오]
    2022.02.14
    GTA5 라디오로 듣고 싶은 노래 듣기! [셀프 라디오]
  • 메인보드 바이오스 업데이트 하는 법 (ASUS MSI 기가⋯
    2021.02.26
    메인보드 바이오스 업데이트 하는 법 (ASUS MSI 기가⋯
  • 윈도우10 안전모드로 부팅하는 6가지 쉬운 방법
    2021.02.15
    윈도우10 안전모드로 부팅하는 6가지 쉬운 방법
  • GTA5 온라인 팁! 빠르게 먼 거리를 순간이동 하는법 (⋯
    2021.02.12
    GTA5 온라인 팁! 빠르게 먼 거리를 순간이동 하는법 (⋯
  • 2022년 7월 휴대폰, AP 성능 순위표 (검색 가능)
    2021.02.08
    2022년 7월 휴대폰, AP 성능 순위표 (검색 가능)

티스토리

hELLO · Designed By 정상우.
미니쿠파

미니쿠파

티스토리 자동으로 이미지 alt 태그 속성 달아주는 툴
개발/JS, 티스토리

티스토리 자동으로 이미지 alt 태그 속성 달아주는 툴

2020. 3. 14. 10:00
반응형

썸네일
썸네일

변환하기




    

    

alt태그란

alt태그 설명
alt태그 설명

우선 alt태그란 이미지의 대체 문구(alternative text)를 뜻하며, 이 alt태그는 이미지가 깨졌을 때 대체하여 보여지는 설명용 텍스트입니다.

네이버 웹마스터 가이드와 구글 검색엔진 최적화(SEO) 초보자 가이드에 따르면 이 alt태그를 작성하면 검색엔진이 해당 이미지를 이해하는데 도움을 줄 수 있으며, 이미지 검색결과에 활용할 수 있는 매우 중요한 정보로 간주된다고 합니다.

사용 방법

직접 alt 추가
직접 alt 추가

기존에는 티스토리가 따로 이미지에 alt태그를 달아주는 기능을 지원하지 않아서, 글쓰기 모드를 html모드로 바꾸고, 하나 하나 직접 번거롭게 alt 태그를 입력해줘야 했습니다. 수동으로 계속 입력하다 보니까 아무래도 헷갈리기도 하고 귀찮아서 이걸 글에 있는 이미지의 설명을 바탕으로 자동으로 달아주는 툴을 만들었습니다.

솔직히 전 주로 앱을 만들고, 자바스크립트는 별로 만질일이 없어서 소스가 지저분하거나, 제가 발견하지 못한 오류가 있을 수 있습니다. 그런부분은 댓글로 알려주시면 바로 수정해보도록 하겠습니다.

입력칸에 html 코드 붙여넣기
입력칸에 html 코드 붙여넣기

이 alt 툴의 사용 방법은 간단합니다. 우선 글의 html 코드를 복사하여, 이글로 와서 'html 코드를 입력해주세요.'라고 나와있는 입력칸에 붙여넣기하고 'alt 태그 추가' 버튼을 클릭해주면 됩니다.

작동 원리는 간단하게 설명하면 사진을 클릭하면 나오는 '이미지를 설명해 보세요' 입력칸의 있는 설명글을 바탕으로 alt태그를 만드는 것 입니다. 이미지의 설명이 없으면, alt=""이렇게 빈칸으로 나옵니다.

alt 태그 자동 추가된 모습alt 태그 자동 추가된 모습
alt 태그 자동 추가된 모습

alt 태그 추가 버튼을 클릭한 모습입니다. f12를 눌러 개발자 모드로 봤을 때 이미지 설명을 바탕으로 alt태그가 생긴걸 확인할 수 있습니다. 이미 alt태그가 존재하면 덮어씌우고, 그룹 이미지로 되어있어도 지원합니다.

이제 이렇게 해서 만들어진 html 코드를 글에다가 붙여넣기 하시면 됩니다.

 

관련 글

https://github.com/minikupa/tistoryAltTool

 

minikupa/tistoryAltTool

Contribute to minikupa/tistoryAltTool development by creating an account on GitHub.

github.com

[JS, 티스토리] 다른 페이지, 글 또는 개인 도메인 자동 이동

 

자바스크립트 / 티스토리 다른 페이지, 글 또는 개인 도메인 자동 이동

자바스크립트 / 티스토리 다른 페이지, 글 또는 개인 도메인 자동 이동 티스토리나 타 사이트에서 글을 올렸는데 모종의 이유로 그 글을 삭제하고, 새로 글을 올렸거나, 티스토리에 개인 도메인을 추가해줬을 때..

MK

 

반응형
저작자표시 비영리 변경금지
    '개발/JS, 티스토리' 카테고리의 다른 글
    • 티스토리 비 로그인자의 댓글 기본 프로필, 아이콘 바꾸기
    • 티스토리 애드센스 상단 광고 2개 다는 방법
    • [JS, 티스토리] 다른 페이지, 글 또는 개인 도메인 자동 이동
    ALT, 달아주는, 자동, 태그, 툴, 티스토리
    미니쿠파
    미니쿠파
    IT 블로거, 앱 개발자 미니쿠파입니다. 블로그에는 주로 컴퓨터, 프로그래밍, 프로그램, 티스토리 관련 글을 올리고 있습니다.
    댓글쓰기
    티스토리 애드센스 상단 광고 2개 다는 방법
    다음 글
    티스토리 애드센스 상단 광고 2개 다는 방법
    [JS, 티스토리] 다른 페이지, 글 또는 개인 도메인 자동 이동
    이전 글
    [JS, 티스토리] 다른 페이지, 글 또는 개인 도메인 자동 이동

    티스토리툴바