티스토리 반응형 CSS 버튼 - 데스크탑 2개의 버튼 좌우 배치, 모바일 2개의 버튼 상하 배치

티스토리 블로그에서 사용할 수 있는 CSS 버튼을 소개합니다. 이 버튼은 2개의 CSS 버튼이 방문자의 화면 크기에 따라 자동으로 버튼의 배열이 달라져요. 데스크톱이나 태블릿 화면에서는 좌우로 배치되고, 모바일 화면에서는 위아래로 자동으로 배치됩니다.

 

✅ 티스토리 반응형 CSS 버튼 예시

 

 

워드프레스에서는 이런 형태의 버튼은 칼럼을 이용하면 쉽게 사용할 수 있어요. 하지만 티스토리 블로그에서 CSS로 버튼을 디자인하고 서석으로 등록해서 사용할 수 있습니다.

 

이번 포스팅은 위의 예시처럼 반응형으로 디자인된 두 개의 CSS 코드를 여러분이 사용하는 스킨에 등록하고, 서식으로 등록해서 사용하는 방법에 대해서 쉽게 설명드릴게요.

 

부탁드립니다.

이 포스팅에서 사용된 코드를 자신의 블로그에 사용하거나, 자신만의 아이디어를 더해 업그레이드된 버전을 재배포하시는 것은 자유입니다.

 

하지만, 이 포스팅에 사용된 코드를 그대로 자신의 블로그에 포스팅하는 것은 하지 마세요. 부탁드립니다.

 

 

티스토리 반응형 CSS 버튼 사용 방법

이 버튼은 노트북이나 태블릿 화면처럼 화면폭이 큰 경우에는 2개의 버튼이 좌우로 나란히 배치되고, 삼성 갤럭시 스마트폰, 애플 아이폰 등 화면폭이 작은 경우에는 2개의 버튼이 위아래로 자동으로 배열되도록 반응형으로 디자인되었습니다.

 

 

다른 CSS 버튼을 사용해 본 분은 CSS를 코드 등록하고 서식으로 버튼 디자인을 호출하는 방법을 알고 계실 테니 아래에 있는 파일을 다운로드해서 바로 사용하시면 됩니다.

 

✅ 화면 크기에 따라 자동으로 위치가 변경되는 반응형 CSS 버튼 코드 다운로드

 

데스크탑에서는 좌우 버튼 2개, 모바일에서는 상하로 배치.txt

0.00MB

 

CSS 추가 등록이나 서식 작성이 어려우신 분은 위의 첨부된 파일을 다운로드 한 다음에 아래에 있는 CSS 코드 적용 및 서식 등록 방법을 따라 해 주세요. 

 

✅ 화면폭이 크면 사이드바처럼 고정, 화면폭이 작으면 화면 하단에 고정

 

 

 

Step 1. 티스토리 스킨에 CSS 코드 등록

먼저 사용하고 있는 티스토리 스킨에 반응형 CSS 코드를 추가로 등록합니다.

 

티스토리 관리 페이지에서 스킨 편집을 선택한 후, HTML 편집을 클릭하면 경고 문구가 나타납니다. 이후 HTML 및 CSS 편집 페이지에서 CSS 탭을 선택합니다. 다운로드한 파일에서 "/* 버튼 좌우 배열, 모바일 상하 배열 시작 /"부터 "/ 버튼 좌우 배열, 모바일 상하 배열 끝 /"까지의 코드를 기존 CSS 코드가 끝나는 지점 아래에 복사하여 붙여 넣습니다.

 

 

나중에 관리를 쉽게 하기 위해 "/* ~ */" 형식으로 주석을 추가하는 것이 좋습니다. 마지막으로, 붙여 넣은 CSS 코드를 저장하려면 "적용" 버튼을 클릭합니다.

 

1. 티스토리 관리 페이지 - 꾸미기 - 스킨편집 선택
2. 스킨 편집 페이지에서 html 편집 선택하면 나오는 경고 문구 확인
3. html 및 CSS를 편집할 수 있는 페이지에서 CSS탭 선택
4. 다운로드한 파일에 있는 /* 버튼 좌우 배열, 모바일 상하 배열 시작 */부터 /* 버튼 좌우 배열, 모바일 상하 배열 끝 */까지 복사 붙여 넣기. 나중에 관리를 편하게 하기 위해 "/* ~ */" 주석 표기를 추천합니다.
5. 붙여 넣기 한 CSS 코드를 저장하기 위해 "적용" 버튼 선택

 

티스토리 스킨에 반응형 CSS 코드 등록 방법

 

 

Step 2. CSS 버튼 사용을 위한 서식 등록

CSS 버튼을 사용하기 위한 html 코드를 매번 복사 붙여 넣기로 사용하기는 번거롭죠. 그래서 티스토리 서식으로 등록해 두고 필요할 때 사용하는 것이 편리합니다.

 

티스토리 관리 페이지에서 "콘텐츠" -  "서식 관리"를 선택해서 서식 관리 페이지로 이동해 주세요. 서식 관리 페이지에서 "서식 쓰기"를 클릭하고, 서식 작성 페이지에서 "기본모드"를 "HTML" 모드로 변경합니다. 다운로드한 파일에서 "버튼 호출 코드"를 복사하여 붙여 넣고, 서식 이름을 지정합니다. 작성이 완료되면 "완료"를 선택하여 저장합니다.

 

 

1. 티스토리 관리 페이지 - 콘텐츠 - 서식 관리 선택
2. 서식 관리 페이지에서 "서식 쓰기" 선택
3. 서식 작성 페이지에서 "기본모드"를 "HTML" 모드로 변경
4. 다운로드한 파일에 있는 "버튼 호출 코드"를 복사 붙여 넣기 및 서식 이름 지정
5. 작성이 완료되면 "완료" 선택해서 저장

 

반응형 CSS 버튼을 사용하기 위한 서식 작성 방법

 

 

 

Step 3. 티스토리 서식 사용 방법

CSS 코드 등록 및 서식 등록까지 하셨나요? 이제 사용하기만 하면 되겠네요. 저장되어 있는 서식을 사용하는 방법은 아주 간단합니다.

 

블로그 글 작성 및 편집 페이지에서 "점 3개" 더 보기를 선택하면 나타나는 메뉴에서 "서식"을 클릭합니다. 작성된 서식 리스트에서 방금 만든 서식을 선택합니다. CSS 버튼이 정상적으로 추가되었는지 확인한 후, 각 버튼에 사용할 문구와 링크를 수정합니다. 

 

 

편집하는 페이지에서는 디자인이 적용되지 않은 상태로 보이는 것이 정상입니다. 미리 보기를 통해서 보시면 정상적으로 디자인이 적용됩니다.

 

1. 티스토리 블로그 글을 작성하고 편집하는 페이지에 있는 "점 3개" 선택하면 나오는 메뉴 중에서 "서식" 선택
2. 현재 작성되어 있는 서식 리스트 중에서 사용하려는 서식 선택
3. CSS 버튼이 정상적으로 추가되는지 확인하시고, 각 버튼마다 사용할 문구 및 링크를 수정

 

서식에 저장된 반응형 CSS 버튼 호출용 html 코드 사용 방법

 

 

티스토리 반응형 디자인 제작 방법

요즘은 HTML, CSS, javascript를 잘 몰라도 다양한 디자인의 버튼을 쉽게 제작할 수 있습니다. 자신이 생각하는 아이디어를 챗지피티 ChatGPT 또는 클로드 AI를 이용해서 구현할 수 있어요.

 

화면 크기에 따라 자동으로 변경되는 반응형 CSS 버튼의 기본 형태도 AI의 도움을 받아서 제작했어요. 그리고 버튼의 세부 디자인은 기존에 사용하던 버튼의 디자인을 복사해서 제작했어요. 여러분의 아이디어도 AI의 도움을 받아 만들어 보세요.

 

 

 

맺음말

 

지금까지 티스토리 블로그에서 2개의 버튼이 데스크톱 및 태블릿에서는 좌우로 배치되고, 모바일에서는 상하로 배열되는 반응형 CSS 버튼을 사용하는 방법이었습니다.

 

✅ 화면폭이 크면 사이드바처럼 고정, 화면폭이 작으면 화면 하단에 고정

 

 

이런 형식의 버튼을 생각한 것이 워드프레스에서는 쉽게 사용하는 기능이고, 모바일 앱 다운로드 같은 버튼의 경우 데스크톱에서도 위아래로 배치하는 것이 싫어서입니다. 부족한 내용의 글이지만 끝까지 읽어주셔서 감사합니다. 다음에는 더 좋은 내용으로 뵙겠습니다.

 

 

출처 및 저작권 표시

 

자료 출처

 

저작권 표시

썸네일 디자인 : 미리캔버스에서 제작되었습니다.

본문 글꼴(폰트) : Google Noto Sans Korean - OFL(Open Font Licese)

이미지에 삽입된 글꼴(폰트) : 이 페이지는 카페 24(주)이 제공한 "카페 24 당당해"가 적용되어 있습니다.