그누보드 내용 관리 페이지 이미지 가로폭 및 레이아웃 깨짐 해결 방법

• 목록
• 스크랩

그누보드 내용 관리 페이지 이미지 가로폭 및 레이아웃 깨짐 해결 방법

그누보드 내용 관리(content) 페이지에서 등록한 이미지가 화면 가로폭을 벗어나 레이아웃이 깨지는 문제를 해결하고, PC와 모바일 환경에서 안정적으로 출력하는 방법을 알아봅니다.

그누보드 내용 관리 페이지 이미지 레이아웃 깨짐 해결 방법

그누보드 내용 관리(content) 페이지에서 에디터나 파일 첨부로 등록한 이미지가 레이아웃 가로 사이즈보다 커서 영역을 벗어나거나 레이아웃이 깨질 때는 사용 중인 스킨 폴더의 style.css 파일에 최대 너비 제한 코드를 추가해야 합니다.

1. 수정할 스킨 파일 경로 확인

사용 환경에 따라 수정해야 할 style.css 파일의 위치가 다릅니다.

• PC 환경: skin/content/basic/style.css
• 모바일 환경: mobile/skin/content/basic/style.css
• 테마를 사용하는 경우: 내용 관리에서 테마용 스킨으로 선택되어 있다면 테마 경로에 있는 스킨 파일을 수정해야 합니다.

2. CSS 코드 추가

해당 style.css 파일을 열어 아래 코드가 없는지 확인한 후 추가합니다.

#ctt_con img {max-width:100%;height:auto}
#ctt_himg img, #ctt_timg img {max-width:100%;height:auto}

3. 예외 및 주의사항

• 그누보드 5.3.2.3 이상 버전에서는 해당 내용이 패치되어 반영되어 있을 수 있습니다.
• 이미지가 영역을 벗어나는 원인이 CSS 설정 부재가 아니라, 이미지 HTML 태그 자체에 고정 width 값이 직접 지정되어 있는 경우라면 해당 width 값을 삭제하거나 조정해야 할 수 있습니다.

내용 관리 스킨의 style.css 파일 경로

그누보드 내용 관리(content) 페이지에서 이미지가 레이아웃을 벗어나는 문제를 해결하기 위해 수정해야 할 style.css 파일의 환경별 경로는 다음과 같습니다.

• PC 환경: skin/content/basic/style.css
• 모바일 환경: mobile/skin/content/basic/style.css

만약 내용 관리에서 별도의 테마용 스킨을 선택하여 사용 중인 경우, 기본 경로 대신 테마 경로에 있는 스킨 파일을 수정해야 합니다.

그누보드 5.3.2.3 이상 버전에서의 CSS 수정 필요 여부

그누보드 5.3.2.3 버전에서는 내용 관리 페이지의 이미지 가로폭 및 레이아웃 관련 내용이 코어에 패치되었습니다. 따라서 사용 중인 그누보드 코어 버전이 5.3.2.3 이상인 경우 해당 문제가 이미 패치되어 있을 수 있으므로, 실제 사이트의 내용 관리 페이지에서 이미지가 영역을 벗어나 깨지는 현상이 발생하는지 먼저 확인한 뒤 CSS 수정 여부를 결정하는 것이 좋습니다.

이미지 태그에 고정 width 값이 지정된 경우의 해결 방법

이미지 태그 자체에 고정 width 속성(예: width="350")이 직접 들어가 있는 경우에는 CSS 최대 너비 설정이 정상적으로 적용되지 않을 수 있습니다. 이럴 때는 내용 수정 화면에서 해당 이미지 태그의 width 값을 삭제하거나 조정해야 합니다.

3. 예외 상황: 이미지 태그에 고정 width 값이 지정된 경우

HTML 소스나 에디터 설정으로 인해 이미지 태그 자체에 고정 width 속성(예: width="350")이 직접 들어가 있는 경우에는 위 CSS 스타일이 정상적으로 적용되지 않을 수 있습니다. 이럴 때는 내용 수정 화면에서 해당 이미지 태그의 width 값을 삭제해야 합니다.

4. 버전별 참고 사항

그누보드 5.3.2.3 이상 버전에서는 해당 이미지 가로폭 제한 패치가 기본 반영되어 있으나, 구버전을 사용 중이거나 커스텀 스킨을 적용한 환경에서는 위 CSS 수동 추가가 필요할 수 있습니다.

그누보드 내용 관리 이미지 깨짐 해결 가이드

• 내 상황: 그누보드 내용 관리(content) 페이지에서 등록한 이미지가 레이아웃 가로폭을 벗어나 화면이 깨질 때
• 선택 기준: 사용 중인 그누보드 버전이 5.3.2.3 미만이거나 테마/커스텀 스킨 환경이어서 최대 너비 제한 CSS가 적용되지 않은 경우
• 다음 행동: PC(skin/content/basic/style.css) 및 모바일(mobile/skin/content/basic/style.css) 스킨의 style.css 파일을 열고 #ctt_con img {max-width:100%;height:auto} 코드를 추가

실전 FAQ

Q. 코드를 추가했는데도 이미지가 계속 영역을 벗어납니다.

• 원인 및 대안: 이미지 HTML 태그 자체에 고정 width 속성(예: width="350")이 직접 지정되어 있으면 CSS 최대 너비 설정이 무시될 수 있습니다. 내용 관리 에디터 수정 화면에서 해당 이미지의 고정 width 값을 삭제하거나 조정해야 합니다.

함께 보면 좋은 글

• 영카트 테마 메인 배너 영역 레이아웃 깨짐 및 로딩 지연 해결 방법
• 그누보드 게시판 write.skin.php 여분 필드 추가 시 레이아웃 깨짐 해결
• 그누보드 최신글 제목 길이에 따른 레이아웃 깨짐 현상 해결 방법

참고자료

기타 참고자료

• sir.kr — 문의드립니다. - SIR - 개발자 커뮤니티
• gnustudy.com — 내용 관리에서 이미지 첨부했을 때 가로폭 맞추기 - 기타스킨강좌, 그누보드5강좌