그누보드4 게시판 뷰 스킨 이미지 태그 위치·여백 제어 방법

• 목록
• 스크랩

그누보드4 게시판 뷰(view.skin.php) 화면에서 첨부된 이미지 번호와 CSS 속성({이미지:0}, {이미지:1 margin:10;}, {이미지:2 float:left;})을 활용하여 본문 내 이미지 위치와 여백을 자유롭게 제어하는 방법을 알아봅니다.

그누보드4 뷰 스킨 이미지 위치 제어 코드 적용 방법

그누보드4(G4) 게시판 뷰 스킨(view.skin.php) 파일에서 {이미지:0}과 같은 태그를 이용해 이미지의 위치와 정렬, 여백을 자유롭게 제어하려면 파일 제일 상단에 정규식 치환 코드와 view_image2 함수를 추가해야 합니다.

1. view.skin.php 상단 코드 추가

view.skin.php 파일의 가장 처음에 아래의 PHP 소스코드를 삽입합니다.

<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
$view[rich_content] = preg_replace("/{이미지\:([0-9]+)[:]?([^}]*)}/ie", "view_image2(\$view, '\\1', '\\2')", $view[content]); 

function view_image2($view, $number, $attribute) {
 if ($view['file'][$number]['view'])
 return preg_replace("/(\<img )([^\>]*)(\>)/i", "<div style='$attribute;text-align:center;'>\\1 \\2 \\3<br>▲ ".$view['file'][$number]['content']."</div>", $view['file'][$number]['view']);
 else
 return "";
}
?>

2. 글 작성 시 태그 사용법

위 코드를 적용한 뒤 게시글 작성 시 본문에 아래와 같은 형식으로 입력하여 위치와 속성을 제어할 수 있습니다.

• 첫 번째 사진 출력: {~이미지:0} (예시: {이미지:0})
• 사진 여백 지정: {~이미지:1 margin:10;} (예시: {이미지:1 margin:10;})
• 사진 왼쪽 배치: {~이미지:2 float:left;} (예시: {이미지:2 float:left;})
• 사진 오른쪽 배치: {~이미지:3 float:right;} (예시: {이미지:3 float:right;})
• 사진 왼쪽 배치 및 여백 지정: {~이미지:3 float:left; margin:10;} (예시: {이미지:3 float:left; margin:10;})

위치나 여백 속성은 스타일시트를 함께 고려하여 적용할 수 있습니다.

게시글 작성 시 이미지 위치 및 여백 제어 태그 입력 방법

그누보드 뷰 스킨(view.skin.php)에 rich_content 정규식 치환 기능과 view_image2 함수를 적용한 후, 글 작성 시 {이미지:번호 속성} 형식을 사용하여 이미지의 출력 위치, 정렬, 여백을 자유롭게 제어할 수 있습니다.

이미지 태그 작성 규칙 및 예시

• 기본 이미지 출력: 첫 번째 첨부된 사진을 보여주려면 {이미지:0}과 같이 입력합니다.
• 여백 지정: 두 번째 사진에 여백을 적용하고 싶다면 {이미지:1 margin:10;} 형식으로 입력합니다.
• 왼쪽 배치: 세 번째 사진을 왼쪽에 배치하려면 {이미지:2 float:left;} 형식으로 입력합니다.
• 오른쪽 배치: 네 번째 사진을 오른쪽에 배치하려면 {이미지:3 float:right;} 형식으로 입력합니다.
• 배치와 여백 동시 지정: 네 번째 사진을 왼쪽에 배치하고 여백까지 주려면 {이미지:3 float:left; margin:10;}과 같이 속성을 조합하여 입력합니다.

참고로 위치나 여백 등의 세부 속성은 스타일시트(CSS) 설정을 따르므로, 사용하려는 스타일에 맞추어 코드를 활용해야 합니다.

함께 보면 좋은 글

• 스마트에디터2 이미지 업로드 시 이미지 간 여백 추가하기
• 그누보드4 첨부 이미지 클릭 시 팝업 동작 제어 방법
• 그누보드 스마트에디터 및 썸네일 이미지 title 및 alt 속성 제어 방법

참고자료

기타 참고자료

• sir.kr — rich 스킨 view.skin.php 파일에서 첨부이미지 이미지 설명글 불러오기 - SIR - 개발자 커뮤니티