css 네이밍규칙

✅ 공통 CSS 네이밍 규칙

📌 1. 전역 레이아웃 구조 (레이아웃 / Wrapper)

분류	클래스명 예시	설명
페이지 최상위	`.main-container`	페이지 전체를 감싸는 wrapper
콘텐츠 영역	`.content-area`	본문 콘텐츠가 들어가는 메인 공간
중앙 박스	`.center-box`, `.form-box`	화면 중앙 정렬용 박스 (로그인, 회원가입 등)
섹션	`.section`, `.section-title`	각 영역 단위 및 제목 텍스트

📌 2. 박스 / 리스트 / 카드

분류	클래스명 예시	설명
리스트 박스	`.list-box`, `.hospital-list`	반복 목록용 wrapper
카드형 박스	`.card`, `.info-card`	정보 요약, 병원 정보, 예약 카드 등에 사용
알림/경고박스	`.alert-box`, `.message-box`	유효성 검사, 에러 안내, 알림창 등 메시지 표시용

📌 3. 버튼 네이밍 규칙

분류	클래스명 예시	설명
공통 버튼	`.btn`	모든 버튼 공통 기본 스타일
기본 버튼	`.btn-primary`	주요 액션용 (검정, 파랑 등 강조 색)
보조 버튼	`.btn-secondary`	보조 동작용 (회색 등)
버튼 그룹	`.btn-group`	여러 개 버튼을 묶어서 정렬할 때

📌 4. Form 구성 요소

분류	클래스명 예시	설명
인풋 묶음	`.input-group`, `.form-row`	label + input 한 세트 묶음
폼 전체	`.signup-form`, `.login-form`	각 기능별 form 식별자

📌 5. 기타 기본 규칙

클래스 네이밍: kebab-case (예: .main-container, .form-title)
접두사 구분은 필요 시 사용 (ex. .mypage-, .admin-, .signup-)
페이지마다 별도 CSS 분리:
- main.css, signup.css, mypage.css, admin.css 등 기능별 구분

✅ 예시 구조 (회원가입 페이지)

html
복사편집
<div class="main-container">
  <div class="content-area">
    <div class="form-box signup-form">
      <h2 class="section-title">회원가입</h2>
      <div class="input-group">
        <label for="email">이메일</label>
        <input type="email" id="email" />
      </div>
      <div class="btn-group">
        <button class="btn btn-primary">가입하기</button>
        <button class="btn btn-secondary">취소</button>
      </div>
    </div>
  </div>
</div>