그누보드 게시판 write.skin.php 여분 필드 추가 시 레이아웃 깨짐 해결

• 목록
• 스크랩

그누보드 게시판 write.skin.php 여분 필드 추가 시 레이아웃 깨짐 해결

그누보드 글쓰기 스킨에 여분 필드를 추가할 때 발생하는 레이아웃 깨짐 현상의 원인과 HTML 태그 구조 수정 방법을 확인하고 적용할 수 있습니다.

그누보드 write.skin.php 여분 필드 추가 시 레이아웃 깨짐 원인

그누보드 게시판 작성 페이지에 여분 필드(wr1~wr10)를 추가하는 과정에서 select 등 특정 입력 폼이 의도한 위치에 출력되지 않고 페이지 상단으로 밀려 올라가거나 전체적인 테이블 레이아웃이 깨지는 현상의 원인은 HTML 테이블 구조 오류에 있습니다.

그누보드 게시판 스킨은 기본적으로 HTML 테이블(table, tr, td) 구조를 사용하여 입력 폼을 배치합니다. 이때 tr 태그 내부에 td 태그 없이 select와 같은 입력 요소를 직접 배치하면 브라우저가 이를 올바른 테이블 구조로 인식하지 못해 렌더링 오류가 발생하게 됩니다.

write.skin.php 여분 필드 추가 시 HTML 태그 구조 수정 방법

그누보드 게시판 작성 페이지인 write.skin.php에 여분 필드(wr_1~wr_10)를 추가할 때, select 등의 입력 폼이 상단으로 밀리거나 테이블 레이아웃이 깨지는 문제는 주로 HTML 테이블 구조가 어긋났기 때문에 발생합니다.

원인

그누보드 게시판 스킨은 기본적으로 HTML 테이블(table, tr, td) 구조로 입력 폼을 배치합니다. 이때 tr 태그 내부에 td 태그 없이 select 같은 입력 요소를 직접 넣으면 브라우저가 올바른 테이블 구조로 인식하지 못해 렌더링 오류가 생깁니다.

올바른 코드 구조 수정 방법

모든 입력 폼 요소는 반드시 tr 태그 안의 td 태그 내부에 위치해야 합니다. 수정 전과 수정 후의 코드를 비교하여 올바른 태그 구조로 변경합니다.

수정 전 (오류 발생 코드)

<tr>
  <select name="wr_4" id="wr_4" required>
    <option value="">테스트4</option>
    ...
  </select>
</tr>

수정 후 (올바른 코드)

<tr>
  <th scope="row"><label for="wr_4">테스트4</label></th>
  <td>
    <select name="wr_4" id="wr_4" required>
      <option value="">테스트4</option>
      ...
    </select>
  </td>
</tr>

작업 시 주의사항 및 확인 방법

1. 파일 백업: 코드를 수정하기 전 반드시 작업 중인 write.skin.php 파일을 백업합니다.
2. 결과 확인: 코드를 수정한 후 게시판 글쓰기 화면을 새로고침하여 입력 폼이 의도한 순서대로 정상 출력되는지 확인합니다.

내 상황	선택 기준	다음 행동
수정 작업 시작 전	데이터 보호	write.skin.php 파일 백업
여분 필드 추가 후 레이아웃 깨짐	HTML 구조 확인	tr 태그 내부에 th(라벨)와 td(입력 폼)가 올바르게 배치되었는지 확인
수정 후 결과 확인	렌더링 검증	게시판 글쓰기 화면 새로고침 후 출력 순서 확인

Q: td 태그 내부에 넣었는데도 레이아웃이 깨집니다.

• 확인 사항: 이전 tr 태그가 </tr>로 정상적으로 닫혔는지 확인하십시오. 태그가 열린 채로 유지되면 이후 레이아웃이 밀리는 원인이 됩니다.

Q: 수정 후에도 입력 폼이 보이지 않습니다.

• 확인 사항: 브라우저 캐시 문제일 수 있습니다. 강력 새로고침(Ctrl+F5)을 시도하거나, 서버 측 캐시 설정이 있다면 해당 캐시를 삭제 후 다시 확인하십시오.

함께 보면 좋은 글

• 영카트 테마 메인 배너 영역 레이아웃 깨짐 및 로딩 지연 해결 방법
• 그누보드 최신글 제목 길이에 따른 레이아웃 깨짐 현상 해결 방법
• 그누보드 게시판 및 전체 검색 결과에 여분 필드 포함하는 방법

참고자료

기타 참고자료

• mercury-seed.com — 그누보드 게시판 write.skin.php 여분 필드 추가 시 레이아웃 깨짐 해결