영카트 테마 메인 배너 영역 레이아웃 깨짐 및 로딩 지연 해결 방법

• 목록
• 스크랩

영카트 테마 메인 배너 영역 레이아웃 깨짐 및 로딩 지연 해결 방법

사이트 접속 시 영카트 메인 배너 영역이 로딩 중 아래로 길게 펼쳐지는 레이아웃 깨짐 현상의 원인과 CSS 수정 및 복구 방법을 안내합니다.

영카트 메인 배너 영역 로딩 지연 및 레이아웃 깨짐 원인

사이트 접속 시 메인 배너 영역이 로딩되는 동안 일시적으로 아래로 길게 펼쳐졌다가 다시 돌아오는 현상은 웹 페이지 로딩 시 발생하는 레이아웃 시프트(CLS)의 일종입니다.

• 원인: 배너 컨테이너에 고정된 높이값(height)이 지정되어 있지 않아, 브라우저가 배너 이미지를 모두 불러오기 전까지 해당 영역의 공간을 확보하지 못해 발생하는 현상입니다.

메인 배너 영역 레이아웃 깨짐 및 로딩 지연 해결 방법

사이트 접속 시 메인 배너 영역이 로딩되는 동안 일시적으로 아래로 길게 펼쳐졌다가 돌아오는 현상은 배너 컨테이너에 고정된 높이값(height)이 지정되어 있지 않아 발생합니다. 브라우저가 배너 이미지를 모두 불러오기 전까지 레이아웃을 잡지 못하기 때문입니다.

수정 파일 및 적용 순서

1. FTP 또는 파일 관리자를 통해 theme/redshop/skin/shop/basic/style.css 파일을 엽니다.
2. 파일 내에서 #sbn_idx 선택자를 찾습니다.
3. 기존 속성에 height:350px;와 overflow:hidden; 속성을 추가합니다.

수정 전후 비교 코드

/* 수정 전 */
#sbn_idx { width:845px; float:left; position:relative; }

/* 수정 후 */
#sbn_idx { width:845px; height:350px; overflow:hidden; float:left; position:relative; }

주의사항 및 복구 방법

• 예시의 350px은 특정 환경을 기준으로 한 높이값이므로, 실제 사용하는 배너 이미지 크기에 맞춰 적절히 조정해야 이미지가 잘리거나 여백이 생기는 것을 방지할 수 있습니다.
• 수정 후 레이아웃에 문제가 발생하면 style.css 파일에서 추가한 height와 overflow 속성을 삭제하여 이전 상태로 되돌릴 수 있습니다.
• 파일 저장 후 브라우저에서 새로고침하여 배너 영역이 로딩 시 확장되지 않고 고정된 높이로 유지되는지 확인합니다.

상황별 판단 및 행동 가이드

내 상황	선택 기준	다음 행동
메인 배너 로딩 중 영역이 아래로 길게 펼쳐짐	컨테이너 높이값 미지정 확인	theme/redshop/skin/shop/basic/style.css 내 #sbn_idx에 height 및 overflow:hidden 추가
CSS 수정 후 이미지가 잘리거나 여백 발생	실제 배너 이미지 규격 확인	예시의 350px 대신 실제 이미지 높이값으로 수치 변경
코드 수정 후 레이아웃 오류 발생	원상복구 필요	추가한 height와 overflow 속성 삭제 후 저장

실전 FAQ

Q. 안내된 경로에 파일이나 선택자가 없습니다.

• 예외: 사용 중인 테마나 스킨 버전에 따라 파일 경로 및 선택자 명이 다를 수 있습니다. 브라우저 개발자 도구(F12)를 사용하여 배너 영역을 감싸는 컨테이너의 클래스나 아이디를 직접 확인하십시오.

Q. 높이 고정 후 반응형 레이아웃이 어색합니다.

• 대안: 고정 높이(px)는 모바일 환경에서 이미지를 잘리게 할 수 있습니다. 미디어 쿼리(@media)를 사용하여 기기 해상도별로 높이값을 다르게 지정하는 방식을 고려하십시오.

함께 보면 좋은 글

• 그누보드 기본 테마 우측 aside 영역 제거 및 메인 영역 확장 방법
• 그누보드 게시판 write.skin.php 여분 필드 추가 시 레이아웃 깨짐 해결
• 그누보드 최신글 제목 길이에 따른 레이아웃 깨짐 현상 해결 방법

참고자료

기타 참고자료

• mercury-seed.com — 영카트 테마 메인 배너 영역 레이아웃 깨짐 및 로딩 지연 해결 방법