티스토리 버튼 만들기 CSS와 서식으로 링크 연결하기

티스토리 블로그는 블로거들이 자신의 개성과 스타일에 맞는 포스팅을 할 수 있는 훌륭한 플랫폼입니다. 특히 버튼 형태의 링크를 만들어 포스트에 삽입하면, 독자들에게 보다 직관적으로 정보를 전달할 수 있습니다.

이번 글에서는 티스토리에서 CSS와 HTML을 활용해 버튼을 만드는 방법에 대해 자세히 알아보겠습니다. 이 과정은 초보자도 쉽게 따라할 수 있도록 설명드리겠습니다.

버튼 만들기에 필요한 준비물

티스토리에서 버튼을 만들기 위해서는 기본적으로 HTML과 CSS에 대한 이해가 필요합니다. 하지만 초보자라 하더라도 걱정하지 않으셔도 됩니다.

다양한 코드 생성 사이트가 있으므로, 이를 활용하면 쉽게 버튼을 만들 수 있습니다. 버튼 이미지를 디자인할 필요 없이, CSS를 통해 직접 스타일링할 수 있기 때문입니다.

다음과 같은 준비물이 필요합니다.

준비물	설명
HTML/CSS 지식	버튼을 만들기 위한 기본적인 이해
코드 생성 사이트	버튼 디자인을 도와주는 웹사이트
티스토리 블로그	버튼을 삽입할 티스토리 블로그 계정

CSS 버튼 생성 사이트 활용하기

첫 번째 단계로, CSS 버튼을 생성할 수 있는 사이트를 방문합니다. 이러한 사이트는 다양한 스타일의 버튼을 제공하며, 사용자 맞춤형으로 수정할 수 있는 기능도 제공합니다.

버튼 디자인을 선택한 후, 원하는 색상, 크기, 글꼴 등을 조절하고 코드를 생성할 수 있습니다.

1. 사이트 접속: 버튼 생성 사이트에 접속합니다.
2. 디자인 선택: 왼쪽에서 마음에 드는 버튼 스타일을 선택합니다.
3. 수정 툴 사용: 오른쪽에 있는 수정 툴을 이용해 글자체, 너비, 높이 등을 조정합니다.
4. 코드 생성: 모든 설정을 마친 후 ‘Get Code’ 버튼을 클릭하여 HTML 및 CSS 코드를 생성합니다.

이러한 과정을 통해 생성된 코드에는 HTML 코드와 CSS 코드가 포함되어 있습니다. HTML 코드는 블로그 서식에서 사용될 것이고, CSS 코드는 블로그의 CSS 편집에 붙여넣어 사용할 것입니다.

다른 내용도 보러가기 #1

CSS 코드 적용하기

생성된 CSS 코드를 티스토리 블로그에 적용하는 방법은 아래와 같습니다.

1. 티스토리 블로그 관리 페이지 접속: 블로그 관리자 홈에서 ‘꾸미기’로 이동한 후 ‘스킨 편집’으로 들어갑니다.
2. CSS 편집 선택: CSS 편집 옵션을 선택합니다.
3. 코드 붙여넣기: CSS 코드의 마지막 부분에서 엔터키를 한 두 번 눌러서 빈 공간을 만든 후, 복사한 CSS 코드를 붙여넣습니다. 이때 CSS 코드는 서로 구분되도록 주의해야 합니다.

단계	설명
블로그 관리 페이지 접속	‘꾸미기’ > ‘스킨 편집’
CSS 편집 선택	CSS 편집 화면으로 이동
코드 붙여넣기	빈 공간에 CSS 코드 붙여넣기

여기서 주의할 점은 CSS 코드의 클래스 이름을 각 버튼마다 다르게 설정해야 한다는 것입니다. 예를 들어, 첫 번째 버튼이 ‘myButton1’이라면, 두 번째 버튼은 ‘myButton2’로 설정해야 합니다.

이는 각 버튼이 서로 다른 스타일을 가질 수 있도록 도와줍니다.

HTML 코드 삽입하기

이제 HTML 코드를 블로그 서식에 삽입하는 단계입니다. 다음과 같은 절차를 따라 진행합니다.

1. 서식 관리 접속: 블로그 관리자 페이지의 ‘콘텐츠’ 탭에서 ‘서식 관리’로 이동합니다.
2. 서식 쓰기: ‘서식 쓰기’ 버튼을 클릭합니다.
3. HTML 모드로 전환: 상단 메뉴에서 ‘기본 모드’를 클릭하여 ‘HTML’ 모드로 전환합니다.
4. HTML 코드 붙여넣기: 복사한 HTML 코드를 제목 아래에 붙여넣습니다.
5. 제목 작성: 서식의 제목은 ‘링크 버튼’처럼 알아보기 쉽게 작성합니다.

단계	설명
서식 관리 접속	‘콘텐츠’ > ‘서식 관리’
서식 쓰기	‘서식 쓰기’ 버튼 클릭
HTML 모드 전환	‘기본 모드’ 클릭 후 ‘HTML’ 모드 선택
HTML 코드 붙여넣기	복사한 HTML 코드 붙여넣기

이렇게 서식을 작성하면, 버튼을 포스트에 쉽게 삽입할 수 있습니다. 하지만, 버튼에 링크를 추가해야 하는데, 이를 위해서는 HTML 코드 내의 # 부분을 원하는 링크로 변경해야 합니다.

버튼에 링크 추가하기

버튼을 클릭했을 때 특정 페이지로 이동하도록 링크를 추가하는 방법은 다음과 같습니다.

1. 서식 불러오기: 포스트 작성 시, 원하는 위치에 서식을 불러옵니다.
2. HTML 모드 전환: 기본 모드에서 다시 ‘HTML’ 모드로 전환합니다.
3. 링크 추가: 생성된 버튼 HTML 코드의 # 부분을 원하는 링크로 수정합니다.
4. 문구 변경: ‘조회하기’ 부분에 원하는 문구를 입력합니다.

단계	설명
서식 불러오기	포스트 작성 시 서식 메뉴에서 선택
HTML 모드 전환	‘기본 모드’ 클릭 후 ‘HTML’ 모드 선택
링크 추가	HTML 코드 내의 # 부분 수정
문구 변경	‘조회하기’ 부분에 원하는 문구 입력

이 과정을 통해 버튼에 링크를 성공적으로 추가할 수 있습니다. 포스트를 발행하면, 버튼 형태로 표시되어 독자들에게 보다 명확한 정보를 전달할 수 있습니다.

다른 내용도 보러가기 #2

버튼을 활용한 블로그 디자인

이제 자신만의 스타일로 버튼을 만들어 블로그를 꾸밀 수 있는 스킬을 갖추게 되었습니다. 버튼을 활용하면 포스트의 가독성을 높이고, 독자들에게 중요한 정보를 쉽게 전달할 수 있습니다.

또한, 다양한 버튼을 만들어 블로그의 디자인을 더욱 풍성하게 꾸미는 것이 가능합니다.

장점	설명
가독성 향상	버튼을 통해 중요한 정보를 강조할 수 있음
디자인 다양성	다양한 스타일의 버튼을 활용하여 블로그 꾸미기
사용자 경험 개선	직관적인 버튼으로 독자의 클릭 유도 가능

티스토리에서 제공하지 않는 다양한 버튼을 직접 만들어 사용함으로써 블로그를 더욱 차별화할 수 있습니다. 이제 여러분의 블로그는 다른 블로그들과는 다른, 독특한 매력을 가질 것입니다.

이 글을 통해 버튼 만들기에 대한 두려움이 사라지셨기를 바랍니다. 자신만의 버튼을 만들어 포스트를 더욱 풍성하게 꾸며보시기 바랍니다.

관련 영상

같이 보면 좋은 글