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

요즘 블로그 운영하면서 모바일 환경은 정말 중요하죠. 저도 데스크톱과 모바일에서 모두 보기 좋은 버튼을 만들고 싶어 고민이 많았어요.

특히 티스토리에서는 워드프레스처럼 칼럼 기능을 활용하기 어렵다 보니, 반응형으로 동작하는 두 개의 버튼을 배치하는 게 여간 까다로운 일이 아니었죠.

하지만 CSS를 활용하면 방문자의 화면 크기에 맞춰 좌우 혹은 상하로 유연하게 배열되는 버튼을 직접 만들 수 있습니다. 오늘 제가 그 방법을 자세히 알려드릴게요.

제가 만든 버튼은 다음처럼 화면 크기에 따라 배열이 달라져요.

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

이 반응형 버튼은 노트북이나 태블릿처럼 화면 폭이 넓으면 2개의 버튼이 좌우로 나란히 배치되고, 스마트폰처럼 화면 폭이 좁으면 위아래로 자동 배열됩니다.

기존에 CSS 버튼을 사용해 보신 분이라면 코드 등록 및 서식 호출 방법을 잘 아실 거예요. 아래 파일을 다운로드해서 바로 적용해 보세요.

CSS 추가 등록이나 서식 작성이 어렵게 느껴진다면, 제가 아래에서 자세히 설명해 드릴 테니 차근차근 따라오시면 됩니다.

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

먼저 여러분이 사용하고 있는 티스토리 스킨에 반응형 CSS 코드를 추가로 등록해야 합니다. 저는 처음에는 이 과정이 어렵게 느껴졌지만, 몇 번 해보니 금방 익숙해지더라고요.

다음 단계에 따라 CSS 코드를 스킨에 적용해 보세요.

1. 티스토리 관리 페이지에서 꾸미기 – 스킨편집을 선택합니다.
2. 스킨 편집 페이지에서 HTML 편집을 클릭한 후 나타나는 경고 문구를 확인합니다.
3. HTML 및 CSS 편집 페이지에서 CSS 탭을 선택합니다.
4. 다운로드한 파일에서 /* 버튼 좌우 배열, 모바일 상하 배열 시작 */부터 /* 버튼 좌우 배열, 모바일 상하 배열 끝 */까지의 코드를 복사하여 기존 CSS 코드 끝부분에 붙여 넣습니다. 나중에 관리를 쉽게 하기 위해 /* ~ */ 형식의 주석 표기를 꼭 추천합니다.
5. 붙여 넣기 한 CSS 코드를 저장하기 위해 “적용” 버튼을 선택합니다.

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

매번 HTML 코드를 복사해서 붙여 넣는 건 정말 번거로운 일이죠. 그래서 저는 티스토리 서식으로 등록해 두고 필요할 때마다 간편하게 불러와 사용하고 있습니다.

아래 절차를 따라 CSS 버튼 서식을 등록해 보세요.

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

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

CSS 코드 등록과 서식 등록까지 완료하셨다면, 이제 실제로 블로그 글에 적용해 볼 시간입니다. 생각보다 훨씬 간단하게 사용할 수 있어요!

아래 방법을 따라 서식을 불러와 버튼을 적용해 보세요.

1. 티스토리 블로그 글 작성 및 편집 페이지에 있는 “점 3개” 더 보기를 선택하면 나타나는 메뉴 중에서 “서식”을 클릭합니다.
2. 현재 작성되어 있는 서식 리스트 중에서 방금 만든 서식을 선택합니다.
3. CSS 버튼이 정상적으로 추가되었는지 확인하고, 각 버튼마다 사용할 문구와 링크를 수정합니다.
4. 중요: 편집 페이지에서는 디자인이 적용되지 않은 상태로 보이는 것이 정상입니다. 미리 보기를 통해서 보시면 정상적으로 디자인이 적용된 것을 확인할 수 있습니다.

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

요즘은 HTML, CSS, JavaScript를 깊이 알지 못해도 다양한 디자인의 버튼을 쉽게 제작할 수 있는 시대입니다. 제가 만든 이 반응형 CSS 버튼의 기본 형태도 인공지능의 도움을 받아 제작했어요.

개인적으로 사용하던 버튼 디자인을 참고해서 세부적인 스타일을 조정했는데, 챗지피티(ChatGPT)나 클로드 AI(Claude AI) 같은 도구를 활용하면 여러분의 아이디어를 훨씬 쉽게 구현할 수 있을 겁니다.

이 포스팅에서 사용된 코드를 자신의 블로그에 적용하거나, 자신만의 아이디어를 더해 업그레이드된 버전을 재배포하는 것은 언제든지 환영입니다. 하지만 제가 정성껏 작성한 이 포스팅의 코드를 그대로 복사하여 자신의 블로그에 올리는 것은 자제해 주시길 부탁드립니다.

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

제가 이런 형식의 버튼을 고민했던 이유는 워드프레스에서는 칼럼 기능으로 쉽게 구현할 수 있는 부분이지만, 티스토리에서는 CSS 작업이 필요했기 때문입니다. 또한 모바일 앱 다운로드 같은 버튼의 경우 데스크톱에서도 위아래로 배치되는 것이 시각적으로 좋지 않다고 생각했기 때문이죠.

부족한 내용의 글이지만 끝까지 읽어주셔서 정말 감사합니다. 다음에는 더 유익한 내용으로 다시 찾아뵙겠습니다.