그누보드 기본 테마 로그인 영역 좌우 위치 변경 방법
페이지 정보
본문
그누보드 기본 테마 로그인 영역 좌우 위치 변경 방법
그누보드 기본 테마에서 오른쪽에 위치한 로그인 및 aside 영역과 container 영역의 위치를 왼쪽으로 변경하려는 운영자와 개발자를 위한 버전별 CSS 수정 가이드입니다.
로그인 및 aside 영역을 왼쪽으로 이동하기 위한 CSS 파일 수정 경로
그누보드 기본 테마에서 오른쪽에 위치한 로그인 및 aside 영역과 container 영역의 위치를 왼쪽으로 변경하려면 사용하는 환경에 따라 지정된 CSS 파일을 수정해야 합니다.
수정 대상 파일 경로
- 일반 기본 테마 사용 시:
css/default.css - 테마를 적용하여 사용하는 경우:
theme/basic/css/default.css
그누보드 버전별 수정 코드
파일 내에서 #aside와 #container의 float 속성 및 마진 값을 아래와 같이 교체합니다.
#aside선택자 수정:#aside {float:left;width:235px;padding:0;height:100%;margin:20px 20px 20px 0}#container선택자 수정:#container {position:relative;float:right;min-height:500px;height:auto!important;margin:20px 0;height:500px;font-size:1em;width:930px;zoom:1}
#aside선택자 수정:#aside {float:left;width:305px;padding:0;background: #e7ebf3;height: 100%;border: 1px solid #adbfd2;margin:20px 20px 20px 0}#container선택자 수정:#container {z-index:4;position:relative;float:right;min-height:500px;height:auto!important;margin:20px 0;height:500px;font-size:1em;width:875px;zoom:1}
CSS 수정 후 변경 사항이 적용되지 않을 때
파일을 수정했음에도 브라우저에 이전 CSS가 캐시에 남아 바로 반영되지 않을 수 있습니다. 이 경우 개발자 도구(F12)를 켠 상태에서 새로고침 버튼을 길게 눌러 강력 새로고침을 실행하거나 브라우저 설정에서 인터넷 사용기록 및 캐시를 삭제하여 반영 여부를 확인합니다.
그누보드 5.3 및 5.4 버전별 로그인 영역(#aside, #container) 좌우 위치 변경 방법
그누보드 기본 테마에서 오른쪽에 위치한 로그인 영역 및 aside 영역을 왼쪽으로 이동하려면 css/default.css 또는 테마를 사용하는 경우 theme/basic/css/default.css 파일을 수정해야 합니다. 버전별로 선택자의 width 값과 margin 값이 다르므로 해당하는 버전에 맞춰 코드를 변경합니다.
1. 수정 파일 경로
- 기본 경로:
css/default.css - 테마 사용 시 경로:
theme/basic/css/default.css
2. 그누보드 5.4 버전 수정 코드
01. #aside 선택자 수정
- 수정 전:
#aside {float:right;width:235px;padding:0;height:100%;margin:20px 0 20px 20px} - 수정 후:
#aside {float:left;width:235px;padding:0;height:100%;margin:20px 20px 20px 0}
02. #container 선택자 수정
- 수정 전:
#container {position:relative;float:left;min-height:500px;height:auto!important;margin:20px 0;height:500px;font-size:1em;width:930px;zoom:1} - 수정 후:
#container {position:relative;float:right;min-height:500px;height:auto!important;margin:20px 0;height:500px;font-size:1em;width:930px;zoom:1}
3. 그누보드 5.3 버전 수정 코드
01. #aside 선택자 수정
- 수정 전:
#aside {float:right;width:305px;padding:0;background: #e7ebf3;height: 100%;border: 1px solid #adbfd2;margin:20px 0 20px 20px} - 수정 후:
#aside {float:left;width:305px;padding:0;background: #e7ebf3;height: 100%;border: 1px solid #adbfd2;margin:20px 20px 20px 0}
02. #container 선택자 수정
- 수정 전:
#container {z-index:4;position:relative;float:left;min-height:500px;height:auto!important;margin:20px 0;height:500px;font-size:1em;width:875px;zoom:1} - 수정 후:
#container {z-index:4;position:relative;float:right;min-height:500px;height:auto!important;margin:20px 0;height:500px;font-size:1em;width:875px;zoom:1}
다음 행동
- 코드를 수정한 뒤 웹 브라우저에서 사이트를 새로고침하여
aside영역과container영역의 좌우 위치가 정상적으로 바뀌었는지 확인합니다.
CSS 수정 후 로그인 영역 위치 변경이 반영되지 않을 때 해결 방법
CSS 파일을 수정했음에도 화면에 로그인(aside) 영역의 위치 변경이 즉시 반영되지 않는다면, 브라우저가 기존에 캐시된 CSS 파일을 불러오고 있기 때문일 가능성이 높습니다. 이 경우 아래의 조치를 취해볼 수 있습니다.
1. 브라우저 캐시 삭제 및 강력 새로고침
- 브라우저에 기존 CSS가 저장되어 있어 바로 적용되지 않는 현상이 있을 수 있으므로 브라우저 캐시를 삭제하거나 강력 새로고침(
Ctrl + F5)을 진행하여 수정 사항이 반영되는지 확인합니다.
2. 수정 대상 파일 경로 확인
- 테마를 사용 중인 경우
theme/basic/css/default.css파일을 수정해야 합니다. 기본 경로인css/default.css와 테마 경로 중 실제로 적용되고 있는 정확한 파일를 수정했는지 개발자 도구(F12)의element항목에서 불러오는 CSS 경로를 다시 점검해 볼 수 있습니다.
상황별 판단 및 행동 가이드
내 상황: 그누보드 5.3 또는 5.4 버전의 기본 테마 로그인 및 aside 영역을 오른쪽에서 왼쪽으로 옮기고자 할 때
- 선택 기준: 현재 사용 중인 그누보드 버전(5.3 또는 5.4)과 테마 적용 여부(
css/default.css혹은theme/basic/css/default.css파일 위치) - 다음 행동: 버전에 맞게
#aside와#container의float속성(각각right를left로,left를right로 변경)과 마진·너비 값을 수정 파일에 적용합니다.
실전 FAQ
Q. CSS 파일을 수정했는데도 화면에 로그인 영역 위치 변경이 반영되지 않을 때는 어떻게 해야 하나요?
- 예외 및 대안: 브라우저가 이전에 불러온 캐시 파일을 유지하고 있기 때문일 가능성이 높습니다. 개발자 도구(F12)를 켠 상태에서 새로고침 버튼을 길게 눌러 '강력 새로고침'을 실행하거나 브라우저 캐시를 삭제해야 합니다. 또한 테마를 사용하는 환경에서 기본 경로(
css/default.css)가 아닌 실제 적용 중인 테마 경로(theme/basic/css/default.css)를 올바르게 수정했는지 개발자 도구의 엘리먼트 탭에서 불러오는 파일 경로를 다시 점검해 볼 수 있습니다.
함께 보면 좋은 글
참고자료
기타 참고자료
- 이전글그누보드 현재접속자 목록에서 닉네임 대신 실명(이름) 출력하기 26.10.02
- 다음글G4 현재 접속자 목록에 관리자 포함시키기 26.10.02
댓글목록
등록된 댓글이 없습니다.