DEVINFO 데빈포 그누보드 포럼 쉽게 찾는 그누보드 실전 정보
BOARD

팁·활용

BOARD 팁·활용

그누보드 5.3 기본 갤러리 최신글 스킨 썸네일 설정 사이즈로 고정하기

페이지 정보

profile_image
작성자 최고관리자
댓글 0건 조회 5회 작성일 26-10-20 15:00

본문

그누보드 5.3 기본 갤러리 최신글 스킨 썸네일 설정 사이즈로 고정하기

그누보드 5.3 기본 최신글 갤러리 스킨(pic_basic)에서 썸네일이 퍼센트(%) 가변 크기로 출력되어 설정한 수치대로 고정되지 않을 때, HTML 태그와 CSS 스타일을 수정하여 썸네일 크기를 고정하는 방법을 확인합니다.

그누보드 5.3 기본 갤러리 최신글 썸네일 가변 출력 원인

그누보드 5.3 기본 갤러리 최신글 스킨(pic_basic)에서 썸네일이 설정된 사이즈로 고정되지 않고 퍼센트(%) 크기로 가변 출력되는 원인은 스킨의 이미지 출력 설정 및 CSS 스타일이 가변형(퍼센트 단위)으로 지정되어 있기 때문입니다.

해당 스킨은 썸네일 설정 사이즈($thumb_width, $thumb_height)가 코드 상단에 존재하더라도, CSS 파일(style.css)의 목록 리스트 항목(li) 스타일에서 width:20%;와 같은 퍼센트 너비 값이 설정되어 있어 화면 크기에 따라 썸네일 크기가 가변적으로 늘어나거나 줄어들도록 구성되어 있습니다. 이로 인해 썸네일 설정 사이즈로 고정되지 않고 비율에 맞춰 늘어나거나 소수점으로 깨지는 현상이 발생할 수 있습니다.

그누보드 5.3 기본 최신글 갤러리 스킨 썸네일 사이즈 고정 방법

썸네일 사이즈 고정 전, 반드시 해당 스킨 폴더(pic_basic)의 파일을 백업하십시오. 수정 절차는 다음과 같습니다.

1. 썸네일 설정 사이즈 확인

latest.skin.php 상단의 $thumb_width, $thumb_height 변수 값을 확인합니다.

2. 파일 수정 절차

  • latest.skin.php 수정: a 태그에 style 속성을 추가하여 너비를 고정합니다.
    <a href="<?php echo $list[$i]['href']?>" class="lt_img" style="width:<?php echo $thumb_width?>px">
  • style.css 수정: .pic_lt li 선택자 내의 가변 너비(width:20%;) 속성을 삭제합니다.
    /* 수정 전 */
.pic_lt li{float:left;width:20%;padding:0 10px}
/* 수정 후 */
.pic_lt li{float:left;padding:0 10px}

반응형 레이아웃 적용 시 주의사항

고정 픽셀(px) 값을 적용하면 반응형 화면에서 레이아웃이 유연하게 대응하지 못할 수 있습니다. 수정 후 모바일 및 PC 해상도별 최신글 출력 화면을 반드시 확인하십시오. 레이아웃이 어긋날 경우, 미디어 쿼리(@media)를 사용하여 해상도별로 width 값을 재조정하거나 스킨의 전체적인 레이아웃 구조를 검토해야 합니다.

갤러리 최신글 썸네일 사이즈 고정 가이드

  • 상황: 그누보드 5.3 기본 갤러리 최신글 스킨(pic_basic)에서 썸네일이 퍼센트(%) 가변 크기로 출력되어 설정 사이즈로 고정되지 않는 경우
  • 선택 기준: 스킨 파일 백업 후, latest.skin.php의 썸네일 설정값을 기준으로 a 태그에 고정 너비(px)를 적용하고 CSS의 가변 너비(%) 속성을 제거
  • 다음 행동: latest.skin.php 수정 및 style.css의 width 속성 삭제 후, PC와 모바일 환경에서 레이아웃 깨짐 여부 확인

실전 FAQ

  • Q. latest.skin.php에서 $thumb_width와 $thumb_height 값을 수정했는데도 화면에 반영되지 않고 작게 나오는 이유는 무엇인가요?
    • A. 그누보드 5.3 기본 갤러리 스킨(pic_basic)은 이미지 출력 설정과 스타일시트(style.css)의 리스트 항목(li) 너비가 퍼센트(%) 단위로 지정되어 있기 때문입니다. PHP 변수 값만 바꾸고 CSS의 width:20%; 속성을 제거하지 않으면 설정 사이즈로 고정되지 않습니다.
  • Q. style.css에서 width 속성을 삭제한 뒤 반응형 레이아웃에서 화면이 깨지거나 어긋날 때는 어떻게 대처해야 하나요?
    • A. 고정 픽셀(px) 값을 적용하면 반응형 화면에서 레이아웃이 유연하게 대응하지 못할 수 있습니다. 스킨 수정 전 파일을 백업하고, 적용 후 모바일 및 PC 해상도별 최신글 출력 화면을 확인하며 추가적인 미디어쿼리 스타일 보완 여부를 검토하십시오.

함께 보면 좋은 글

참고자료

기타 참고자료

댓글목록

등록된 댓글이 없습니다.