좁은 공간 무한 활용! 블로그스팟 '가로 슬라이드형 추천 글' 레이아웃 만들기

 

공간의 마법! 여러 개의 글을 넘겨보는 '가로 슬라이드' 레이아웃

추천하고 싶은 글은 많은데 세로로 길게 나열하면 독자가 지루해할 수 있습니다. 가로 슬라이드(Carousel) 방식은 모바일에서 특히 빛을 발하며, 사용자가 직접 넘겨보는 재미를 주어 체류 시간을 늘려줍니다.

1단계: 슬라이드 전용 CSS 설정하기

📍 위치: [테마] → [맞춤설정] → [고급] → [CSS 추가]

아래 코드를 복사해서 붙여넣으세요. 자바스크립트 없이 CSS만으로 부드러운 스크롤을 구현합니다.

/* 슬라이드 전체 컨테이너 */ .slide-wrapper { display: flex; overflow-x: auto; /* 🚩 가로 스크롤 활성화 */ scroll-snap-type: x mandatory; /* 🚩 자석처럼 딱딱 걸리는 효과 */ gap: 15px; padding: 20px 5px; -webkit-overflow-scrolling: touch; /* 모바일 부드러운 스크롤 */ } /* 스크롤바 숨기기 (깔끔한 디자인용) */ .slide-wrapper::-webkit-scrollbar { display: none; } /* 개별 카드 스타일 */ .slide-card { flex: 0 0 200px; /* 🚩 카드 너비 고정 */ scroll-snap-align: start; background: #fff; border-radius: 10px; border: 1px solid #eee; text-decoration: none !important; transition: 0.3s; } .slide-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .slide-img { width: 100%; height: 120px; object-fit: cover; border-radius: 10px 10px 0 0; } .slide-info { padding: 10px; } .slide-title { font-size: 14px; font-weight: bold; color: #333; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }

2단계: 본문에 슬라이드 HTML 삽입하기

원하는 위치에 아래 구조를 넣으세요. 카드를 더 늘리고 싶다면 <a> 태그 세트를 복사해서 아래에 계속 추가하면 됩니다.

<div class="slide-wrapper"> <!-- 카드 1 --> <a href="연결주소1" class="slide-card"> <img src="이미지주소1.jpg" class="slide-img" /> <div class="slide-info"><span class="slide-title">첫 번째 추천 글 제목</span></div> </a> <!-- 카드 2 --> <a href="연결주소2" class="slide-card"> <img src="이미지주소2.jpg" class="slide-img" /> <div class="slide-info"><span class="slide-title">두 번째 추천 글 제목</span></div> </a> <!-- 카드 3 --> <a href="연결주소3" class="slide-card"> <img src="이미지주소3.jpg" class="slide-img" /> <div class="slide-info"><span class="slide-title">세 번째 추천 글 제목</span></div> </a> </div>

💡 고급 연출 팁
1. 자석 효과: scroll-snap-type 속성 덕분에 카드가 화면 중간에 어중간하게 걸치지 않고 딱딱 맞춰서 멈춥니다.
2. 이미지 비율: 슬라이드 카드는 크기가 작으므로 텍스트가 적고 시원한 이미지를 사용하는 것이 훨씬 보기 좋습니다.
3. 안내 문구: 슬라이드 상단에 "옆으로 밀어서 보세요 ➡" 같은 문구를 적어주면 사용자 참여율이 높아집니다.

⚠️ 주의사항
- 너비 고정: flex: 0 0 200px;에서 200px 숫자를 너무 크게 잡으면 모바일에서 한 화면에 한 개도 다 안 보일 수 있으니 적절히 조절하세요.
- 이미지 로딩: 카드가 많아질수록 이미지를 불러오는 양이 많아지므로, 이미지 용량을 꼭 최적화해서 올리세요.

세련된 슬라이드 레이아웃으로 블로그의 전문성을 한 단계 높여보세요!