본문 바로가기
카테고리 없음

티스토리 링크 버튼 쉽게 연결하는 방법(CSS 추가) 알려드리고 싶습니다

by 비굿 2024. 10. 9.
반응형

목차


 

인터넷을 검색하다 보면 블로그의 링크 버튼에 대해 제작하는 방법, 적용하는 방법을 어렵게 설명하는 곳이 많이 제가 쉽게 정리해 봤습니다. 저는 오늘 한 귀인을 인터넷상에서 만나 이 링크버튼 적용하는 방법에 대해 배웠습니다. 여러분들께도 나누겠습니다. (구름님 감사합니다)

 

링크버튼

링크버튼이란

 

바로 아래 그림처럼 클릭을 안내하는 색깔있는 안내판 같은 건데, 클릭하면 원하는 주소로 이동합니다. 제 다른 블로그인데 한번 눌러보시죠.

 

 

 

링크버튼은 이렇게 생겼습니다. 누르면 이동합니다.

 

 


 

링크버튼 연결하는 방법

 

위에서 링크버튼을 누르면 다른 주소로 이동하는 걸 보셨을텐데요. 이 코드는 복잡합니다. 얼마나 복잡하냐면 저희 같은 일반인이 보기에  p a{display: flex; align-items: center; justify-content: center; background:#색깔 들어가고 이 이후에도 코드 있어 복잡합니다. 

 

이글에서는 코드만들기가 아니라 코드를 연결하는 방법을 안내하고자 합니다.

 

1. 코드를 확보했거나 작업했으면 그걸 일단 복사합니다.

 

2. 티스토리 HTML편집 들어가서 CSS에 붙여 넣기 합니다.

   - 붙여넣기도 초보자는 어디에 할까 고민인데, 그냥 무슨 코드 적혀있는 첫 번째 줄 아래에다 엔터 3번 치고, 2번째 정도에 붙여 넣기 하면 됩니다. 아무 곳이나 가능하다고 하는데 제가 이렇게 했습니다.

 

3. 이제 글쓰기에 들어가서 열심히 글을 쓴후 다른 주소랑 연결시킬 내용이 있을 때, 표시되고 싶은 문구를 한글로 적습니다. 그리고 드래그해서 블록 처리합니다.

 

4. 그 상태에서 상단 서체 메뉴 오른쪽에 밭전자 옆에 45도 회전한 8자를 클릭합니다. 이건 "링크 삽입/수정"입니다.

 

5. URL 넣는 칸에 연결시킬 주소 복사해서 넣고, 다른 것은 조작할 것이 없습니다.

 

6. 글쓰기 중간에는 제대로 보이지 않습니다. 발행해보시면 링크 버튼이 생겨나 있습니다.

 

 

이런 식으로요. 또다른 예시입니다.

 

한국사능력검정시험 3일 공부방법 - 클릭

 

어떠신가요? 링크버튼이 있으니, 주소를 길게 늘여서 적어놓은 것보다 보기가 깔끔하지 않나요?


링크버튼 있으면 좋은점

 

블로그 글이 다채로워지고 방문자들이 연관되는 다른 글로 쉽게 이동할 수 있는 편의성이 있습니다. 고객서비스 측면에서 필요하고, 시각적으로도 보기가 좋습니다. 그래서 많은 인터넷글에 링크 버튼이 활용되고 있습니다. 처음에는 어렵게 느껴졌는데, 쉽게 설명하는 분들 만나게 되어 쉽게 이해할 수 있었습니다. 궁금한 점은 댓글 주시면 최대한 답변드리겠습니다.