무조건 뷰파일 개별 css 만들어서 쓰세요!

전체 구조 규칙

footer.jsp 와 header.jsp 가 들어가는 모든 뷰파일은 common.css 로 연결해주세요.

common.css

jsp 파일 아래 구조와 같이 진행

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ include file="includes/header.jsp" %>

<div class="content-wrapper">
  <!-- 여기에 각자 컨텐츠 작성 -->
</div>

<%@ include file="includes/footer.jsp" %>

CSS

중앙 정렬 (각뷰파일용 css)

.content-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

공통 클래스 및 ID 네이밍 규칙

🌐 레이아웃 관련 클래스

클래스명 용도
wrapper 페이지 전체 감싸는 최상위 박스
header-container 헤더 내부 레이아웃
footer-container 푸터 내부 레이아웃
content-wrapper 페이지 고유 콘텐츠 영역
center-menu 내비게이션 메뉴
main-banner 메인 배너 영역 (메인에서만 사용)

📛 명명 규칙