티스토리 TIP

티스토리 링크 버튼 만들기① + 서식 적용 방법

에어뷰 AIRVIEW 2022. 8. 31.

티스토리를 블로그를 하면서 양질의 글을 많이 쓰는 것도 중요하겠지만

아무래도 개인 블로그이자 원하는 스타일로 수정이 가능한 홈페이지 스타일의 플랫폼이다 보니
다른 티스토리에서 마음에 드는 디자인이 있으면 적용해보고 싶은 마음이 들 수 있습니다.

 

그런데 막상 따라해보자니 생소한 HTML / CSS 코드를 삽입해야 하는 난관에 부딪힙니다.

 

저도 처음에 많이 헤매었고, 지금도 코딩에 대해 잘 아는 것은 아니지만,
티스토리에 필요한 부분만 배워서 사용하고 있습니다.

 

오늘 글에서는 한번씩 보이는 링크 버튼을 간단하게 만들어 볼텐데요,

아래 순서대로 천천히 따라와보시면 누구나 하실 수 있습니다.

 

그럼 차근차근 알려 드릴게요!

 

 

티스토리-링크-사각형-박스-만드는-방법-설명-글-썸네일

 

 

링크 버튼 예시

 

오늘은 위와 같이 마우스를 올렸을 때 색상 변화, 커서 변화를 주고

클릭했을 때 진짜 버튼처럼 움직이는 사각형을 만들어 보겠습니다.

 

 

 

 

빨강색 예시 박스에서 색상만 바꿔주면 위와 같이 만드실 수 있습니다.

 

위의 예시 3개 박스는 별도 링크를 걸지 않아 화면 맨 위로 이동되니 클릭하지 않는 것이 좋습니다.

 

HTML/CSS 가 낯선 분들이 많겠지만,

 

한번만 적용해놓으면 그 다음부터는 아주 쉽게 쓰실 수 있습니다.

 

 

 

사각 링크 버튼① 만들기 순서

 

1. 링크 박스 CSS 코드 다운로드

레드 버튼1 CSS.txt
0.00MB

 

 

먼저 메모장 파일을 다운 받으시고,
[레드 버튼1 CSS] 파일 내부에 있는 코드를 전부 복사합니다.

 

 

2. CSS 코드 삽입

티스토리-링크-박스-만들기-CSS-설정

 

복사한 코드를 CSS 내에 원하는 위치에 붙여넣기(Ctrl + V) 해서 넣어줍니다.

복잡한 코드를 이해하고 싶지 않고 적용을 원하시는 분들을 위해 

최소한으로 말씀드리면, 'btn-red' 라는 이름의 스타일 형식을 만들어주는 것입니다.

 

 

3. 블로그 관리 / 서식 적용하기

티스토리-링크-박스-만들기-서식-설정

 

블로그 관리자 페이지에서 왼쪽에 [콘텐츠 - 서식 관리] 탭을 눌러줍니다

[서식 쓰기] 를 눌러줍니다.

 

자동 서식을 저장해놓고 사용하시는 분도 계시겠지만, 아마 처음 쓰시는 분도 계실거예요.

따라하시면 되겠습니다.

 

 

4. 서식 / HTML 입력란 전환

티스토리-링크-박스-만들기-서식-HTML-설정

 

기본 글쓰기 창에서 오른쪽 위의 [기본모드 - HTML]을 눌러 HTML 모드로 전환해줍니다.

 

 

 

 

5. 서식 CSS 삽입

레드 버튼1 서식.txt
0.00MB

 

이번에는 [레드 버튼1 서식] 메모장 파일에 있는 코드를 복사해서 본문 내용에 넣어 줍니다.

서식 제목은 '레드 버튼1' 이나 원하시는 것으로 수정하셔도 됩니다.

 

티스토리-링크-박스-만들기-서식-HTML-설정-코드-삽입

 

[완료]를 눌러 완성해줍니다.

 

 

6. 글쓰기 / 서식 불러오기

티스토리-링크-박스-만들기-글쓰기-서식-불러오기

 

글쓰기에 들어가서 오른쪽 상단 메뉴 중 [...]을 누르고 [서식]을 눌러줍니다.

 

티스토리-링크-박스-만들기-글쓰기-서식-삽입

 

그럼 방금 만든 [레드 버튼 1] 이 보입니다. 클릭해줍니다.

 

 

코드는 보이지 않고, 이모티콘만 보이는 것이 정상입니다. (이 이모티콘이나 글은 수정해도 됩니다)

 

 

 

7. URL / 대체 텍스트 삽입

티스토리-링크-박스-만들기-글쓰기-링크-삽입

 

1) 불러온 서식에 원하는 글자(앵커 텍스트)를 입력하고, 드래그 합니다.

여기에 링크를 걸어줄 것입니다.

 

2) 오른쪽 위에 링크 버튼을 눌러줍니다.

 

3) 버튼을 눌렀을 때 이동할 링크 주소를 넣어줍니다. 아래는 그 링크가 어떤 사이트인지 설명해주는 대체텍스트 자리입니다. 보통 이미지를 삽입할 때 많이 사용하는데, 링크 삽입 시에도 대체 텍스트를 입력할 수 있습니다.

 

이 링크가 어떤 링크인지 설명해주는 데이터이므로 입력해주시는 것이 좋습니다.

 

4) [확인]을 눌러줍니다.

 

 

8. 링크 버튼 적용 확인

티스토리-링크-박스-만들기-글쓰기-링크-미리보기

 

1) 링크가 정상적으로 적용이 되면, 파란색 글씨에 밑줄이 사진과 같이 적용됩니다.

 

2) [미리보기]를 눌러 링크 버튼이 구현되었는지 확인해봅니다.

 

 

 

9. 링크 버튼 완성 / 미리보기 상태에서 active 확인은 불가

티스토리-링크-박스-만들기-글쓰기-링크-결과보기
티스토리-링크-박스-클릭-움직임-반복

 

반응형

 

See the Pen Untitled by AIR (@AIRVIEWK) on CodePen.

 

CSS 코드를 위와 같이 입력하면 링크 버튼이 정상적으로 구현됩니다.

 

실제로 버튼을 하면 진짜 버튼을 누르는 것처럼 버튼이 움직이는데요,

 

그 기능은 미리보기에서는 확인할 수 없습니다.

 

글 발행 이후에 확인하실 수 있습니다.

 

 

코드가 어떤 의미인지 궁금하신 분들은 다음 포스팅에서 설명해 드리겠습니다.

 

그냥 링크 버튼을 사용하는 것만 필요하신 분들은 위 방법대로 하시면 되겠습니다.

댓글0