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

강좌·기초

BOARD 강좌·기초

그누보드 내용 관리 스킨에 지도 스크립트 추가 방법

페이지 정보

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

본문

그누보드 내용 관리 스킨에 지도 스크립트 추가 방법

그누보드 내용 관리 페이지에 에디터 입력이 제한되는 지도 스크립트를 스킨 파일을 수정하여 안전하게 삽입하는 방법을 안내합니다.

내용 관리 스킨에 지도 스크립트 추가 방법

그누보드 내용 관리 페이지는 보안상의 이유로 에디터 내 스크립트 실행이 제한됩니다. 따라서 카카오맵이나 네이버 지도 등 스크립트가 포함된 지도를 삽입하려면 스킨 파일을 직접 수정해야 합니다.

1. 내용 관리 스킨 폴더 생성

  • PC 스킨 경로: skin/content/basic
  • 모바일 스킨 경로: mobile/skin/content/basic
  • 기존 basic 폴더를 복사하여 지도 삽입용 새 스킨 폴더(예: map)를 동일한 경로에 생성합니다.

2. content.skin.php 파일 수정

  • 새로 생성한 map 스킨 폴더 내의 content.skin.php 파일을 엽니다.
  • 파일 내용 중 관리자 페이지에서 입력한 내용이 출력되는 아래 코드를 찾습니다.
    <?php echo $str;?>
  • 지도를 표시할 위치에 따라 해당 코드 상단 또는 하단에 지도 HTML/스크립트 코드를 직접 삽입합니다.
  • 참고: 반응형 사이트나 모바일 페이지에서 지도가 영역을 벗어나지 않게 하려면 지도 가로 사이즈를 100%로 설정하십시오.

3. 관리자 페이지에서 스킨 적용

  • 관리자 페이지의 내용 관리 설정으로 이동합니다.
  • 해당 내용 관리 페이지의 스킨 설정을 새로 만든 map 스킨으로 변경하여 저장합니다.

4. 모바일 환경 주의사항

  • 모바일 페이지에서 별도의 스킨을 적용하려면 mobile/skin/content/ 또는 테마 사용 시 theme/테마명/mobile/skin/content/ 경로에 동일하게 map 폴더를 생성하고 content.skin.php를 수정해야 합니다. 모바일 전용 스킨이 별도로 지정되지 않은 경우 PC 스킨이 우선 적용될 수 있으므로, 관리자 페이지의 모바일 스킨 설정 항목을 확인하십시오.

모바일 내용 관리 페이지 지도 출력 및 스킨 수정 방법

모바일 환경에서 PC와 별도로 지도를 출력하거나 모바일 전용 스킨을 적용하려면, 모바일 전용 스킨 경로에 있는 content.skin.php 파일을 수정해야 합니다. 그누보드는 PC와 모바일 스킨 경로가 분리되어 있으므로, 각각의 경로에 동일한 수정 작업을 적용해야 합니다.

1. 모바일 스킨 경로 확인 및 수정

테마 사용 여부에 따라 모바일 스킨의 위치가 달라집니다. 아래 경로 중 현재 사이트 환경에 맞는 폴더로 이동하여 content.skin.php 파일을 수정하십시오.

  • 일반 환경: mobile/skin/content/basic/content.skin.php
  • 테마 사용 시: theme/테마명/mobile/skin/content/basic/content.skin.php

2. 지도 코드 삽입

PC 스킨 수정과 동일하게, 해당 파일 내에서 내용이 출력되는 <?php echo $str;?> 코드를 찾습니다. 이 코드의 상단 또는 하단에 지도 HTML 및 스크립트 코드를 삽입합니다.

<!-- 지도 코드 삽입 예시 -->
<div id="map" style="width:100%; height:400px;"></div>
<?php echo $str;?>

3. 주의사항 및 확인

  • 경로 분리: PC 스킨(skin/content/map/content.skin.php)만 수정할 경우 모바일에서는 지도가 나타나지 않습니다. 반드시 모바일 경로의 파일도 함께 수정해야 합니다.
  • 테마 우선순위: 테마를 사용하는 경우 theme/ 경로의 파일이 우선 적용됩니다. 수정 후에도 변경 사항이 보이지 않는다면, 현재 관리자 페이지의 내용 관리 설정에서 모바일 스킨이 올바르게 지정되어 있는지 확인하십시오.
  • 반응형 설정: 모바일 화면에서 지도가 영역을 벗어나는 경우, 지도 컨테이너의 가로 폭(width)을 100%로 설정하여 화면 너비에 맞게 조정하십시오.

반응형 사이트에서 지도 가로 크기 100% 설정 방법

반응형 사이트나 모바일 환경에서 지도가 화면 영역을 벗어나지 않고 꽉 차게 표시되도록 하려면, 지도 컨테이너의 CSS 스타일에서 가로 폭(width)을 100%로 설정해야 합니다.

설정 방법

  1. 스킨 파일 수정: 지도를 삽입한 content.skin.php 파일 내의 지도 컨테이너(보통 <div> 태그)를 찾습니다.
  2. 스타일 적용: 해당 태그의 style 속성이나 CSS 클래스에 width: 100%;를 추가합니다.

예시 코드:

<div id="map" style="width: 100%; height: 400px;"></div>

주의 사항

  • 고정 높이: 가로 폭은 100%로 설정하더라도, 지도의 높이(height)는 고정값(예: 400px)을 주어야 지도가 정상적으로 출력됩니다.
  • 반응형 고려: 모바일 기기에서는 화면 너비가 좁아지므로, width: 100% 설정을 통해 기기 너비에 맞춰 지도가 자동으로 조절되도록 합니다.
  • 적용 확인: 설정 후 관리자 페이지에서 스킨을 적용한 내용 관리 페이지에 접속하여, 브라우저 창 크기를 조절하며 지도가 영역에 맞게 변하는지 확인하십시오.

내용 관리 스킨에 지도 스크립트 추가 방법

그누보드 내용 관리 페이지는 보안상 에디터 내 스크립트 실행이 제한되므로, 스킨 파일을 직접 수정하여 지도를 삽입해야 합니다.

내 상황우선할 판단다음 행동
PC 페이지에 지도 삽입스킨 폴더 복사skin/content/basic을 map으로 복사 후 content.skin.php 수정
모바일 페이지에 지도 삽입모바일 전용 경로 확인mobile/skin/content/basic 또는 theme/테마명/mobile/skin/content/basic 파일 수정
반응형 사이트 적용CSS 가로 폭 설정지도 컨테이너 style에 width: 100%; 추가

적용 절차

  1. 스킨 폴더 생성: skin/content/basic 폴더를 복사하여 skin/content/map 폴더를 생성합니다.
  2. 코드 삽입: map/content.skin.php 파일 내 <?php echo $str;?> 코드 상단 또는 하단에 지도 HTML/스크립트 코드를 삽입합니다.
  3. 스킨 변경: 관리자 페이지의 [내용 관리] 설정에서 해당 페이지의 스킨을 map으로 변경합니다.

실전 FAQ

Q. 모바일에서 지도가 보이지 않아요. A. PC 스킨(skin/content/map)만 수정하면 모바일에는 적용되지 않습니다. mobile/skin/content/basic 경로에도 동일한 수정 작업을 진행해야 합니다. 테마를 사용 중이라면 theme/테마명/mobile/skin/content/basic 경로를 확인하세요.

Q. 지도가 화면을 뚫고 나가거나 잘려요. A. 지도 컨테이너의 width 값을 100%로 설정하세요. 높이(height)는 고정값(예: 400px)을 유지해야 지도가 정상적으로 렌더링됩니다.

Q. 관리자 페이지에서 스킨을 바꿨는데 반영이 안 됩니다. A. 테마를 사용하는 경우 theme/ 경로의 파일이 우선 적용됩니다. 수정 중인 파일이 실제 적용 중인 경로(테마 경로 vs 기본 경로)와 일치하는지 다시 확인하십시오.

함께 보면 좋은 글

참고자료

기타 참고자료

댓글목록

등록된 댓글이 없습니다.