다플 로고다플 도구모음
🔗
유틸리티

링크 버튼 만들기

링크 제목과 URL을 입력하고 버튼 크기를 정한 뒤 위지윅 에디터에 붙여넣을 수 있는 링크 버튼을 만드세요.

링크 정보 입력

입력값과 버튼 크기는 현재 브라우저에 자동 저장됩니다.

http:// 또는 https://를 생략하면 https://가 자동으로 붙습니다.

버튼 크기

링크 버튼 결과

표 기반 버튼과 클릭 가능한 URL이 한 묶음으로 복사됩니다.

자세히 보기

링크: https://tool.daplus.co.kr/

생성된 HTML

<div style="margin:0;padding:0"><table role="presentation" border="0" cellspacing="0" cellpadding="0" style="border-collapse:separate!important;border-spacing:0!important"><tbody><tr><td align="center" bgcolor="#059669" style="padding:0!important;background-color:#059669!important;border-radius:8px!important"><a href="https://tool.daplus.co.kr/" target="_blank" rel="noopener noreferrer" style="display:block!important;padding:12px 24px!important;background-color:#059669!important;color:#ffffff!important;text-decoration:none!important;border-radius:8px!important;font-size:16px!important;font-weight:700!important;line-height:1.4;text-align:center">자세히 보기</a></td></tr></tbody></table><p style="margin:10px 0 0;font-size:13px;line-height:1.5;color:#6b7280;word-break:break-all">링크: <a href="https://tool.daplus.co.kr/" target="_blank" rel="noopener noreferrer" style="color:#2563eb;text-decoration:underline">https://tool.daplus.co.kr/</a></p></div>

에디터가 외부 HTML 스타일을 제한하면 버튼 색상이나 여백이 단순 링크 형태로 바뀔 수 있습니다.

티스토리·네이버에 디자인 유지해서 넣기

두 편집기의 HTML 지원 범위가 달라 플랫폼에 맞는 방식을 사용해야 합니다.

T

티스토리

  1. 1. 아래 버튼으로 HTML 코드를 복사합니다.
  2. 2. 티스토리 글쓰기에서 기본 모드를 HTML 모드로 바꿉니다.
  3. 3. 원하는 위치에 붙여넣고 기본 모드에서 결과를 확인합니다.
N

네이버 블로그

  1. 1. 버튼을 PNG로 복사하거나 저장한 뒤 본문에 넣습니다.
  2. 2. 삽입한 이미지를 선택하고 네이버 에디터의 링크 기능을 누릅니다.
  3. 3. URL만 복사해 링크 입력란에 붙여넣습니다.

네이버 스마트에디터 ONE은 HTML 작성을 지원하지 않아 외부 CSS 버튼을 그대로 붙여넣는 방식은 보장되지 않습니다.

공유하기

링크 버튼 만들기 이용 안내

링크 버튼 만들기란?

링크 제목과 URL로 버튼을 만들고 일반 에디터 서식, 티스토리 HTML 또는 네이버용 PNG로 복사하세요.

이 링크 버튼 생성기는 제목과 http·https URL을 입력하면 클릭 가능한 초록색 HTML 링크 버튼과 원문 주소를 함께 구성한 결과를 실시간으로 만듭니다.

링크 버튼 만들기 사용 방법

기능과 사용 전 확인사항

처리 범위

작게·보통·크게 세 가지 버튼 크기를 미리 보면서 선택하고, 일반 에디터에는 표 기반 HTML 서식을 복사하며 티스토리용 HTML 코드와 네이버용 고해상도 PNG도 별도로 만듭니다.

사용 전 확인

네이버 스마트에디터 ONE처럼 HTML 작성을 지원하지 않는 편집기에는 임의 CSS 버튼을 그대로 넣을 수 없습니다. PNG 버튼에 편집기의 기본 링크 기능으로 URL을 연결하고, 공용 기기에서는 LocalStorage의 저장 데이터를 초기화하세요.

자주 묻는 질문

링크 버튼을 위지윅 에디터에 어떻게 붙여넣나요?

일반 편집기는 서식 복사를 사용하고, 티스토리는 HTML 모드에 코드를 붙여넣으세요. 네이버 스마트에디터 ONE은 HTML 작성을 지원하지 않으므로 버튼 PNG를 넣은 뒤 네이버의 기본 링크 기능으로 URL을 연결해야 디자인을 안정적으로 유지할 수 있습니다. 티스토리는 HTML 코드를 붙여넣은 뒤 기본 모드와 실제 스킨 화면을 모두 확인하세요. 네이버에서는 삽입한 PNG 이미지를 선택하고 링크 첨부 메뉴에 복사한 URL을 넣어야 버튼 이미지가 클릭 가능한 링크가 됩니다.

URL에 https://를 입력하지 않아도 되나요?

네. 도메인부터 입력하면 https://를 자동으로 붙여 결과를 만들며, http 또는 https 주소만 허용해 스크립트 형식의 위험한 링크는 결과에서 차단합니다. 상대경로나 메일·전화 스킴은 지원하지 않으며 주소가 올바르지 않으면 복사 버튼이 비활성화됩니다. 결과를 게시하기 전 미리보기 링크가 원하는 페이지로 열리는지 확인하세요.

링크 버튼 크기는 어떻게 바꾸나요?

작게·보통·크게 중에서 용도에 맞는 크기를 선택하면 버튼의 글자 크기와 안쪽 여백이 함께 조절되고 미리보기와 복사 결과에 즉시 반영됩니다. 크기 선택은 인라인 CSS의 padding과 font-size를 변경하므로 에디터 자체 스타일시트가 이를 덮어쓰면 실제 게시 화면에서 다르게 보일 수 있습니다.

마지막에 입력한 링크는 어디에 저장되나요?

링크 제목, URL과 버튼 크기는 현재 브라우저의 LocalStorage에만 저장되며 다음 방문 때 자동으로 복원됩니다. 다른 브라우저나 기기에는 동기화되지 않습니다. 페이지의 초기화 버튼을 누르면 기본 예시로 바뀌며, 브라우저 사이트 데이터나 LocalStorage를 지우면 저장된 마지막 입력값도 삭제됩니다.

관련 글

링크 버튼 만들기 사용법과 활용 방법

버튼에 표시할 링크 제목과 이동할 웹페이지 URL을 입력하세요. 본문의 강조 정도와 에디터 레이아웃에 맞춰 작게·보통·크기 버튼 중 하나를 선택하세요. 일반 에디터는 서식 복사, 티스토리는 HTML 코드, 네이버는 버튼 PNG와 URL 복사를 사용해 결과를 넣으세요.

글자 수 세기 사용법과 활용 방법

길이를 확인할 문장을 입력란에 직접 쓰거나 붙여 넣으세요. 공백 포함 여부와 글자·단어·문장·줄·바이트 중 필요한 집계 기준을 확인하세요. 실시간 수치와 플랫폼별 글자 제한을 비교해 제출할 문장의 길이를 조정하세요.

텍스트 비교 사용법과 활용 방법

원본과 수정본을 양쪽 입력란에 붙여 넣거나 예제 불러오기로 샘플 문서를 채우세요. 두 문서의 줄 구성과 순서를 맞춘 뒤 변경할 내용을 입력하면 결과가 즉시 갱신됩니다. 초록색 추가 줄과 빨간색 삭제 줄, 동일하게 유지된 줄을 구분해 변경 내용을 검토하세요.