티스토리 버튼 제작 CSS 수정으로 링크 연결하기

블로그를 운영하며 다양한 정보를 전달하기 위해 다른 사이트로의 링크를 연결하는 것은 매우 중요한 요소입니다. 특히, 티스토리 블로그에서는 링크를 보다 세련되고 직관적으로 표현하기 위해 버튼을 활용할 수 있습니다.

이번 글에서는 티스토리에서 버튼을 제작하는 방법과 CSS 코드 수정, 서식 관리에 대해 자세히 알아보겠습니다.

썸네일


버튼 제작을 위한 준비물

버튼을 만들기 위해서는 기본적인 HTML과 CSS 지식이 필요합니다. 하지만 초보자 분들도 걱정하지 않으셔도 됩니다.

여러 가지 코드 파일을 미리 준비해 두었기 때문에, 이를 활용하여 손쉽게 버튼을 만들 수 있습니다. 아래는 버튼 제작을 위한 필수 준비물입니다.

준비물설명
HTML 코드버튼의 구조를 정의하는 코드입니다.
CSS 코드버튼의 스타일을 설정하는 코드입니다.
Button Generator다양한 디자인의 버튼을 생성할 수 있는 온라인 도구입니다.

이제 준비물이 갖추어졌으니, 본격적으로 버튼을 만들어 보도록 하겠습니다.


Button Generator를 활용한 버튼 디자인

버튼 제작을 위해 Button Generator 사이트를 활용할 수 있습니다. 이 사이트를 이용하면 다양한 디자인의 버튼을 손쉽게 만들 수 있으며, 원하는 색상과 크기를 조절할 수 있는 기능도 제공됩니다.

  1. 사이트 접속: Button Generator 링크를 클릭하여 사이트에 접속합니다.
  2. 디자인 선택: 왼쪽 메뉴에서 마음에 드는 버튼 디자인을 선택합니다.
  3. 세부 조정: 오른쪽에서 제공되는 슬라이더를 사용하여 글씨 크기, 버튼의 크기 및 그림자 효과 등을 조절합니다.

버튼 디자인을 마무리한 후, Get Code 버튼을 클릭하여 생성된 코드를 복사합니다. 버튼의 HTML 코드와 CSS 코드를 잘 구분하여 기억해 두시기 바랍니다.

단계설명
1Button Generator 사이트에 접속합니다.
2원하는 버튼 디자인을 선택합니다.
3각 항목의 슬라이더를 조정하여 세부 디자인을 설정합니다.
4Get Code 버튼을 클릭하여 코드를 복사합니다.

CSS 코드 수정 및 적용

버튼의 디자인을 설정한 후, 이제는 CSS 코드를 티스토리에 적용해 보겠습니다. CSS 코드는 버튼의 색상, 크기, 테두리 등을 설정하는 중요한 역할을 합니다.

티스토리 블로그의 CSS 편집기는 다음의 단계를 통해 접근할 수 있습니다.

  1. 블로그 관리: 티스토리 블로그 관리자 홈으로 이동합니다.
  2. 꾸미기 선택: 메뉴에서 꾸미기를 클릭한 후, 스킨 편집으로 들어갑니다.
  3. CSS 편집: HTML 편집 탭에서 CSS를 선택합니다.

CSS 편집 화면에서 스크롤을 맨 아래로 내려 빈 공간에 복사한 CSS 코드를 붙여 넣습니다. 이때, 글자 색상을 고정하기 위해 아래와 같은 수정이 필요합니다.

csscolor: #ffffff !important;

이렇게 수정하면 버튼의 글자 색상이 정확히 지정한 색상으로 고정되어, 다른 색상으로 변경되는 것을 방지할 수 있습니다.

단계설명
1블로그 관리에서 꾸미기를 선택합니다.
2스킨 편집으로 들어갑니다.
3CSS 편집 탭을 선택합니다.
4CSS 코드를 붙여 넣고 수정합니다.

서식 관리로 버튼 사용하기

이제 버튼의 CSS 코드가 적용되었으니, 다음으로는 서식 관리에서 버튼을 등록해 보겠습니다. 서식 관리 기능을 활용하면 버튼을 매번 복사하지 않고 손쉽게 사용할 수 있습니다.

  1. 서식 관리로 이동: 티스토리 관리 홈에서 콘텐츠 > 서식 관리 > 서식 쓰기로 이동합니다.
  2. HTML 모드 전환: 서식 제목을 입력한 후, HTML 모드로 전환합니다.
  3. 버튼 코드 입력: 복사한 버튼의 HTML 코드 중 맨 윗줄을 붙여넣습니다.

코드를 저장한 후, 포스팅을 할 때마다 서식에서 해당 버튼을 불러와 쉽게 사용할 수 있습니다.

단계설명
1서식 관리로 이동합니다.
2HTML 모드로 전환합니다.
3버튼의 HTML 코드를 입력합니다.
4서식을 저장합니다.

링크 버튼 사용하기

이제 모든 준비가 마무리되었습니다. 글을 작성할 때 서식에서 등록한 버튼을 쉽게 사용할 수 있습니다.

포스팅 화면에서 서식을 클릭하여 생성한 버튼을 선택하면, HTML 코드가 자동으로 입력됩니다. 버튼 텍스트와 링크 URL을 변경하여 원하는 내용을 반영할 수 있습니다.

버튼의 텍스트 부분은 아래의 코드에서 버튼텍스트를 수정하면 됩니다.

html<a href="#" class="CSSButton">버튼텍스트</a>

# 부분은 실제 링크를 입력하실 주소로 대체해 주시면 됩니다. 예를 들어, 실제 링크가 https://example.com이라면 아래와 같이 수정합니다.

html<a href="https://example.com" class="CSSButton">버튼텍스트</a>

이제 버튼을 클릭하면 지정한 링크로 연결됩니다.

단계설명
1글쓰기 화면에서 서식을 클릭합니다.
2생성한 버튼을 선택합니다.
3버튼 텍스트와 링크 URL을 수정합니다.
4포스팅을 완료합니다.

마무리

티스토리에서 버튼을 만들어 링크를 연결하는 과정은 처음에는 다소 복잡할 수 있지만, 단계별로 차근차근 진행하면 누구나 쉽게 만들 수 있습니다. 버튼을 활용하면 블로그의 디자인을 더욱 돋보이게 할 수 있으며, 방문자에게 유용한 정보를 전달하는 데 큰 도움이 됩니다.

처음에는 복잡하게 느껴질 수 있으나, 한번 익혀두면 앞으로의 블로그 운영에 많은 도움이 될 것입니다. 이제 여러분도 자신만의 멋진 버튼을 만들어 블로그를 더욱 풍성하게 꾸며 보시기 바랍니다!


관련 유튜브 영상

관련 글

중장년 은퇴 후 필수 국가 자격증 TOP5 추천

중장년 은퇴 후 필수 국가 자격증 TOP5 추천
독감 예방접종 비용 비교 어디서 가장 저렴할까?

독감 예방접종 비용 비교 어디서 가장 저렴할까?

댓글

댓글 쓰기

이 블로그의 인기 게시물

중등산화와 경등산화 비교 최고의 선택은?

이미지
등산은 많은 이들에게 자연과의 교감을 제공하는 소중한 활동입니다. 하지만 올바른 장비, 특히 등산화의 선택이 필수적입니다. 이번 글에서는 중등산화와 경등산화의 차이점을 깊이 있게 비교하며, 각자의 장단점을 살펴보겠습니다. 이 정보를 통해 독자님께서 본인에게 가장 적합한 등산화를 선택하는 데 도움을 드리고자 합니다. 중등산화의 특징과 장점 중등산화는 일반적으로 높은 안정성과 내구성을 제공하는 제품으로, 다양한 험한 산악 환경에서의 사용을 염두에 두고 설계되었습니다. 이 섹션에서는 중등산화의 주요 특징과 이를 선택할 때의 장점을 상세히 설명하겠습니다. 내구성과 안정성 중등산화는 일반적으로 고급 가죽이나 합성 소재로 제작되며, 특히 내구성이 뛰어난 제품이 많습니다. 이러한 특성은 거친 지형에서의 마모와 충격에 강한 저항력을 제공합니다. 예를 들어, 돌멩이와 나무 뿌리 등이 있는 등산로에서 발을 보호하는 데 큰 도움이 됩니다. 또한, 중등산화는 발목을 잘 지지해 주어, 불안정한 지면에서 발목이 삐거나 다치는 위험을 줄여줍니다. 특히 하이컷 디자인의 경우, 발목을 잘 감싸주어 보다 안정적인 보행을 가능하게 합니다. 특징 설명 내구성 고급 가죽 및 합성 소재 사용으로 강한 내구성 안정성 발목 지지 및 험한 지형에서의 안전성 제공 충격 흡수 두꺼운 중창으로 충격 흡수 성능 우수 충격 흡수 성능 중등산화의 두꺼운 중창은 발바닥에 가해지는 충격을 효과적으로 흡수하여, 장시간의 산행에서도 피로감을 줄이는 데 큰 역할을 합니다. 이로 인해 발바닥의 통증이나 발의 피로를 최소화할 수 있습니다. 많은 등산가들이 장거리 산행을 할 때 중등산화를 선호하는 이유 중 하나이기도 합니다. 다양한 환경에서의 활용성 중등산화는 다양한 산행 환경에서 활용할 수 있습니다. 겨울철에는 보온성과 방수 기능이 뛰어난 제품이 많아, 눈이나 추위로부터 발을 보호할 수 있습니다. 여름철에는 통기성이 좋은 제품을 선택하면, 더운 날씨에도 쾌적하게 사용할 수 있습니다. 단점 하지만 중등산화는 무게가 다소 무겁고,...
자세한 내용 보기

단식 후 필수 보식 식단 완벽 가이드

이미지
단식은 단순히 음식을 먹지 않는 과정을 넘어, 우리의 몸과 마음을 재정비하고 건강을 회복하는 중요한 단계입니다. 하지만 단식을 마친 후의 '보식' 과정이 더욱 중요하다는 것을 아는 분들은 많지 않습니다. 이번 글에서는 단식 후 보식의 중요성과 올바른 보식 식단을 제안하여, 건강한 회복을 돕고자 합니다. 보식의 중요성 단식을 마친 후 보식은 단순히 음식을 다시 먹기 시작하는 과정이 아닙니다. 이는 단식의 효과를 극대화하고, 체중 관리 및 건강 회복에 매우 중요한 역할을 합니다. 보식을 어떻게 하느냐에 따라 단식의 효과가 달라질 수 있으며, 잘못된 보식은 요요 현상과 같은 부작용을 초래할 수 있습니다. 단식 중에는 음식을 먹지 않기 때문에 몸이 휴식을 취하고 재정비되는 시간을 갖습니다. 하지만 단식이 끝나고 음식을 다시 먹기 시작하면, 우리의 식욕은 자연스럽게 활성화됩니다. 이때 욕망을 통제하지 못하고 과식을 하게 된다면, 단식의 효과가 사라지고 이전의 몸 상태로 돌아갈 위험이 있습니다. 따라서 보식 기간은 자기 자신과의 싸움이라고 할 수 있으며, 절대 방심해서는 안 됩니다. 보식의 중요성을 강조하기 위해 몇 가지 포인트를 정리해 보았습니다. 포인트 설명 단식 효과 극대화 보식 방법에 따라 단식의 효과가 달라짐 체중 관리 과식 시 요요 현상이 발생할 수 있으므로 주의 필요 마음가짐 욕망을 통제하고 소식하는 것이 중요 신체 적응 체중 감량 후 신체가 다시 적응할 수 있도록 도와줌 보식은 단식의 연장선상에 있는 중요한 과정입니다. 어떻게 보식을 하느냐에 따라 우리의 식습관과 건강이 결정되기 때문에, 신중하게 접근해야 합니다. 보식 기간의 설정 보식 기간은 단식의 종류와 기간에 따라 달라집니다. 예를 들어, 생수 단식의 경우 단식 기간의 4배수 만큼 보식을 진행해야 합니다. 반면, 변형 단식의 경우 본 단식의 일수만큼 보식을 진행하게 됩니다. 이처럼 각 단식의 특성에 맞춰 보식 기간을 설정하는 것이 필요합니다. 보식 기간 동안에는 욕망을 통제하고 정해진 ...
자세한 내용 보기

현지인이 추천하는 도쿄 클럽 핫플레이스!

이미지
안녕하세요! 오늘은 도쿄의 현지인들에게 인지도가 높고 많은 사람들이 즐겨 찾는 클럽 6곳을 추천해 드리겠습니다. 일본 여행을 계획하고 계신 분들이라면, 이곳들을 방문하여 특별한 밤문화를 경험해 보시기를 권장합니다. 저도 일본인 지인들과 함께 방문하여 재미있게 놀았던 곳들이니, 부담 없이 즐기실 수 있을 것입니다. 도쿄의 클럽은 크게 두 지역으로 나눌 수 있습니다. 바로 시부야와 롯폰기입니다. 이 두 곳은 한국의 홍대와 강남에 비유할 수 있는 지역으로, 다양한 클럽과 바들이 밀집해 있습니다. 그러면 지금부터 각 클럽의 매력과 특징을 자세히 소개해 드리겠습니다! 아톰 도쿄 (Atom Tokyo) 클럽의 개요 아톰 도쿄는 시부야 클럽 중 가장 유명한 핫플레이스로, 일본의 연예인들도 즐겨 찾는 곳입니다. 이 클럽은 역사와 전통이 있는 인기 클럽으로, 평일과 주말 모두 활발하게 운영되고 있습니다. 총 4층에서 6층까지 3개의 층을 클럽으로 운영하며, 각 층마다 다양한 장르의 음악을 즐길 수 있습니다. 층수 음악 장르 특징 4층 힙합 그루비한 분위기, 자유로운 춤 5층 EDM, 하우스, 덥스텝 신나는 일렉트릭 음악 6층 제이팝 믹스 일본 대중음악과 다양한 믹스 클럽의 분위기 아톰 도쿄의 가장 큰 매력은 다양한 음악 장르와 함께하는 활기찬 분위기입니다. 4층에서는 그루비한 힙합 음악이 흘러나오며, 젊은이들이 마음껏 춤을 추고 소통할 수 있는 공간이 마련되어 있습니다. 5층에서는 EDM과 하우스 음악이 주를 이루며, 대규모 DJ 파티와 함께 신나는 밤을 보낼 수 있습니다. 6층에서는 일본의 인기 대중음악인 제이팝이 믹스되어 흘러나오고, 일본의 음악 문화를 경험할 수 있습니다. 아톰 도쿄는 다양한 연령층이 어우러져 있는 곳으로, 혼자 방문하셔도 편안하게 즐길 수 있는 분위기를 제공합니다. 이곳은 정말 정신 없이 놀기 좋은 공간이며, 일본의 클럽 문화를 제대로 체험할 수 있는 곳입니다. 방문 정보 주소 : 〒150-0044 東京都渋谷区円山町２−４ ドクタージーカンズビル 운영 시간...
자세한 내용 보기