아래 이미지와 같이 구글블로그에서 생성이 됩니다.
하단 코드를 CSS에 추가하면 됩니다.
/* 페이지네이션 기본 스타일 */
#blog-pager {
display: flex;
justify-content: center; /* 가로 중앙 정렬 */
align-items: center; /* 세로 중앙 정렬 */
flex-wrap: wrap; /* 필요 시 줄바꿈 허용 */
gap: 10px; /* 버튼 간 간격 */
margin: 20px auto; /* 중앙 정렬 및 상하 여백 */
max-width: 100%; /* 너비 제한 */
text-align: center; /* 부모 요소와 텍스트 정렬 */
box-sizing: border-box;
}
/* 페이지네이션 버튼 스타일 */
#blog-pager a {
padding: 8px 16px; /* 버튼 내부 여백 */
font-size: 14px;
font-weight: bold;
color: #353535;
text-decoration: none;
border: 1px solid #ddd; /* 버튼 테두리 */
border-radius: 4px; /* 둥근 모서리 */
background-color: #f9f9f9; /* 배경색 */
}
/* 호버 효과 */
#blog-pager a:hover {
background-color: #b51200; /* 배경색 변경 */
color: #ffffff; /* 텍스트 색상 변경 */
}
/* 현재 페이지 */
#blog-pager span.pagecurrent {
padding: 8px 16px;
font-size: 14px;
font-weight: bold;
color: #ffffff;
background-color: #353535; /* 현재 페이지 배경색 */
border-radius: 4px;
text-align: center;
}
/* 반응형 스타일 */
@media (max-width: 768px) {
#blog-pager a,
#blog-pager span.pagecurrent {
font-size: 12px;
padding: 6px 10px;
}
}
@media (max-width: 480px) {
#blog-pager {
gap: 4px;
}
#blog-pager a,
#blog-pager span.pagecurrent {
font-size: 11px;
padding: 5px 8px;
}
}
'일반 자료실' 카테고리의 다른 글
삼성 도어록 SHS-6020 사용자 매뉴얼 (0) | 2024.03.15 |
---|---|
삼성 도어록 SHS-H630 사용자 매뉴얼 (0) | 2024.03.14 |
삼성 도어록 SHP-DP730 사용자 매뉴얼 (0) | 2024.03.13 |
삼성 도어록 SHS-5230 사용자 매뉴얼 (0) | 2024.03.12 |
윈도우11 설치 가능 확인 프로그램(무설치형) (0) | 2024.03.11 |