현재 코드상에서 불러오는 이미지 사이즈는 **268x268px**입니다. 하지만 최근 고해상도 모바일 기기(Retina 디스플레이 등)는 실제 화면 크기보다 2배 이상의 해상도를 요구합니다.
* **추천 사이즈:** **500x500px ~ 600x600px** 사이를 권장합니다. * **이유:** 현재 4단 배열(`col-lg-3`)에서 한 칸의 가로폭이 보통 300px 내외이므로, 2배수인 600px 정도로 업로드하면 모바일과 PC 모두에서 선명하게 보입니다. * **설정 방법:** KBoard 게시판 설정 또는 사용 중인 스킨의 `functions.php`에서 썸네일 크기 제한을 위 사이즈로 변경한 뒤 이미지를 새로 업로드해야 합니다.
2. 케이보드 작성 날짜 지우는 방법
가장 빠르고 간편한 방법은 **CSS**를 사용하는 것입니다. 워드프레스 관리자 페이지의 [외모] -> [사용자 정의하기] -> [추가 CSS]에 아래 코드를 복사해서 붙여넣으세요.
```css /* 케이보드 리스트 날짜 숨기기 */ .newest-webzine-type1 .list-date { display: none !important; } ``` > **참고:** 만약 특정 게시판에서만 지우고 싶다면 해당 스킨 폴더의 `list.php` 파일에서 `...` 부분을 직접 삭제하는 것이 가장 깔끔합니다.
---
3. 모바일에서 썸네일 사이즈를 작게 줄이는 방법
현재 코드의 클래스를 보면 `col-12`로 설정되어 있습니다. 이는 모바일에서 화면을 **100% 차지(1단 배열)**하라는 의미라 이미지가 너무 크게 보이는 것입니다. 이를 **2단 배열**로 바꾸면 이미지가 적절한 크기로 줄어듭니다.
방법 A: HTML 클래스 수정 (추천) 모든 항목의 가장 바깥쪽 `div` 클래스를 다음과 같이 수정하세요. * **수정 전:** `class="col-12 col-md-4 col-lg-3 mb-4"` * **수정 후:** `class="col-6 col-md-4 col-lg-3 mb-4"` * `col-12`를 `col-6`으로 바꾸면 모바일에서 한 줄에 2개씩 나오면서 크기가 절반으로 줄어듭니다.
방법 B: CSS로 강제 조정 HTML 수정이 어렵다면 CSS로 이미지의 최대 크기를 제한할 수 있습니다.
```css @media (max-width: 767px) { /* 모바일에서 썸네일 박스 크기 조절 */ .newest-webzine-type1 img { width: 80% !important; /* 원하는 비율로 조절 */ margin: 0 auto; display: block; }
/* 텍스트 정렬도 중앙으로 맞추고 싶다면 */ .newest-webzine-type1 { text-align: center !important; } }
안녕하세요 회신 드립니다.
1. 썸네일로 가장 깨지지 않는 사이즈는?
현재 코드상에서 불러오는 이미지 사이즈는 **268x268px**입니다. 하지만 최근 고해상도 모바일 기기(Retina 디스플레이 등)는 실제 화면 크기보다 2배 이상의 해상도를 요구합니다.
* **추천 사이즈:** **500x500px ~ 600x600px** 사이를 권장합니다.
* **이유:** 현재 4단 배열(`col-lg-3`)에서 한 칸의 가로폭이 보통 300px 내외이므로, 2배수인 600px 정도로 업로드하면 모바일과 PC 모두에서 선명하게 보입니다.
* **설정 방법:** KBoard 게시판 설정 또는 사용 중인 스킨의 `functions.php`에서 썸네일 크기 제한을 위 사이즈로 변경한 뒤 이미지를 새로 업로드해야 합니다.
2. 케이보드 작성 날짜 지우는 방법
가장 빠르고 간편한 방법은 **CSS**를 사용하는 것입니다. 워드프레스 관리자 페이지의 [외모] -> [사용자 정의하기] -> [추가 CSS]에 아래 코드를 복사해서 붙여넣으세요.
```css
/* 케이보드 리스트 날짜 숨기기 */
.newest-webzine-type1 .list-date {
display: none !important;
}
```
> **참고:** 만약 특정 게시판에서만 지우고 싶다면 해당 스킨 폴더의 `list.php` 파일에서 `...` 부분을 직접 삭제하는 것이 가장 깔끔합니다.
---
3. 모바일에서 썸네일 사이즈를 작게 줄이는 방법
현재 코드의 클래스를 보면 `col-12`로 설정되어 있습니다. 이는 모바일에서 화면을 **100% 차지(1단 배열)**하라는 의미라 이미지가 너무 크게 보이는 것입니다. 이를 **2단 배열**로 바꾸면 이미지가 적절한 크기로 줄어듭니다.
방법 A: HTML 클래스 수정 (추천)
모든 항목의 가장 바깥쪽 `div` 클래스를 다음과 같이 수정하세요.
* **수정 전:** `class="col-12 col-md-4 col-lg-3 mb-4"`
* **수정 후:** `class="col-6 col-md-4 col-lg-3 mb-4"`
* `col-12`를 `col-6`으로 바꾸면 모바일에서 한 줄에 2개씩 나오면서 크기가 절반으로 줄어듭니다.
방법 B: CSS로 강제 조정
HTML 수정이 어렵다면 CSS로 이미지의 최대 크기를 제한할 수 있습니다.
```css
@media (max-width: 767px) {
/* 모바일에서 썸네일 박스 크기 조절 */
.newest-webzine-type1 img {
width: 80% !important; /* 원하는 비율로 조절 */
margin: 0 auto;
display: block;
}
/* 텍스트 정렬도 중앙으로 맞추고 싶다면 */
.newest-webzine-type1 {
text-align: center !important;
}
}
감사합니다.