이렇게 사용하세요
버튼 문구와 연결할 주소를 넣고, 색 조합을 고르거나 직접 색을 정하세요. 모서리 둥글기, 크기, 너비, 정렬을 바꾸면 미리보기가 바로 따라 바뀌어요. 다 만들었다면 쓰는 블로그에 맞는 방법으로 가져가면 돼요.
- 티스토리: 글쓰기 화면 오른쪽 위에서 HTML 모드로 바꾼 뒤, 버튼을 넣을 자리에 HTML 코드를 붙여 넣으세요.
- 워드프레스·브런치·메일: 버튼 서식 복사 후 본문에 그대로 붙여 넣으세요. 편집기에 따라 일부 스타일이 빠질 수 있어요.
- 네이버 블로그: PNG로 저장해 사진으로 올리고, 사진에 링크를 걸어 주세요.
동작 원리
블로그 편집기는 외부 CSS 파일을 불러오지 않기 때문에, 모든 모양을 style 속성 안에 직접 적은 HTML을 만들어요. 버튼 문구와 주소 안의 <, &, " 같은 특수 문자는 HTML 규칙에 맞게 바꿔 넣고, 주소는 http와 https만 허용해 엉뚱한 스크립트가 들어가지 않게 막아요. 이미지는 브라우저의 캔버스에 버튼을 2배 해상도로 그려 선명하게 만들어요. 모든 작업은 이 페이지 안에서 끝나요.
자주 묻는 질문
버튼에 마우스를 올렸을 때 색이 바뀌게 할 수 있나요?
마우스 효과는 CSS 파일이나 <style> 태그가 필요한데, 대부분의 블로그 편집기가 이를 지워요. 그래서 어디서나 똑같이 보이는 인라인 스타일만 써요.
쿠팡 파트너스 같은 제휴 링크도 넣을 수 있나요?
네, https로 시작하는 주소라면 무엇이든 넣을 수 있어요. 제휴 링크를 쓸 때는 글에 대가를 받는다는 문구를 함께 적어 주세요.
이모지가 이미지에서 다르게 보여요.
이모지는 운영체제마다 모양이 달라서, PNG에는 지금 쓰는 기기의 이모지 모양으로 그려져요.