종합반 페이지 작성 방식 안내 (디자이너·운영자용)

2026-11-05 · 대상: 종합반·특강·패키지 홍보 페이지 · 사용자 주소 /lecture-contents/{페이지코드}/

한 줄 요약

페이지마다 개발 작업이 들어가지 않습니다. 운영자는 관리자 화면에서 강좌·안내 문구·파일을 넣고, 디자이너는 HTML·CSS를 쓰면서 버튼에는 링크(href)를, 구역에는 이름(id)을 붙이면 됩니다. 구역 이동, 탭, 퀵메뉴, TOP, 유튜브 재생, 수강신청, 신청 전 안내 팝업, 시간표·진도표 내려받기는 사이트가 해 줍니다. 스크립트는 쓰지 않습니다.

예전처럼 onclick이나 javascript:로 짠 코드를 붙여 넣어도 됩니다. 저장할 때 사이트가 그 안에서 갈 곳을 읽어 링크로 바꿔 둡니다. 새로 만들 때는 이 문서 규칙대로 쓰는 것이 가장 확실합니다.

1. 관리자 화면에서 넣는 것 (운영자·디자이너)

1-1. 페이지 열기

1. 관리자 왼쪽 메뉴 강의 › 강의관리 › 페이지 관리
2. 새로 만들면 [페이지 등록], 고치면 목록에서 페이지명을 누릅니다.
3. 위쪽 기본 정보 칸
   • 페이지명(필수), 자격증, 노출 설정(노출/미노출), 노출메뉴
   • 구성 방식: 일반형(위에서 아래로 이어 보임) 또는 탭형(강의소개·시간표·교재·수강신청 탭)
4. 저장하면 사용자 페이지 주소가 생깁니다. 미노출이어도 주소는 생기고, 미노출 페이지는 관리자 미리보기로만 봅니다.

1-2. 강좌 연결 (예전의 수강코드 연결)

1. 같은 화면 연결 강의 칸의 연결할 강의 검색에 강의명이나 강의코드를 넣고 고릅니다.
2. 여러 개면 고른 순서대로 신청 영역의 강좌 고르기에 나옵니다(위·아래 단추로 순서를 바꿈).
3. 이것만으로 페이지 아래 공통 수강신청 영역이 이어집니다.
   • 강좌 고르기 → (선택형 종합반이면) 과목·교수 고르기 → 수강 방식 → 교재 → [수강신청] → 장바구니 → 결제
   • 로그인하지 않았으면 로그인 화면으로 갔다가 돌아오고, 고른 값이 그대로 남아 있습니다.
   • 판매하지 않는 강좌는 신청 단추가 잠기고, 이미 듣는 회원에게는 강의실로 가기가 보입니다.
4. 한 강좌는 노출 중인 페이지 하나에만 연결할 수 있습니다(겹치면 저장할 때 알려 줍니다).
5. 교재를 함께 팔려면 편집할 칸의 교재 탭에서 교재를 검색해 고릅니다(탭형이면 교재 탭이 생깁니다).

1-3. 수강신청 전 안내 팝업

1. 같은 화면 수강신청 전 안내 팝업 칸에 문구를 넣습니다(2,000자까지, 줄바꿈 그대로 보임).
2. 사용자가 [수강신청](또는 [장바구니에 담기])을 누르면 팝업이 뜨고, [확인하고 신청]을 눌러야 신청이 이어집니다. [취소]를 누르면 그대로 있습니다.
3. 비워 두면 팝업 없이 바로 신청합니다.

1-4. 시간표·진도표 파일 올리기

1. 같은 화면 시간표 파일(사용자 내려받기) · 진도표 파일(사용자 내려받기) 에서 [올리기] 를 눌러 파일을 고릅니다. PDF·엑셀·한글·워드·파워포인트·압축 파일 등을 올릴 수 있습니다.
2. 저장하면 사용자 화면 시간표 자리 위에 [시간표 내려받기] [진도표 내려받기] 단추가 자동으로 생깁니다.
3. 디자인 안의 버튼에서 받게 하려면 2-7의 링크를 겁니다.
4. 바꾸려면 [바꾸기], 떼려면 [지우기] 를 누른 뒤 저장합니다.

1-5. 유튜브 주소(설명회 영상 등)

따로 넣는 칸은 없습니다. 디자인 HTML의 버튼 링크에 유튜브 주소를 그대로 씁니다(2-8). 누르면 새 창으로 나가지 않고 페이지 위 창에서 재생됩니다.

1-6. 디자인 HTML·CSS 붙여 넣는 곳

1. 같은 화면 편집할 칸 탭: 상단 디자인 / 강의소개 / 시간표 / 교재 / 하단 디자인
   • 강의소개는 두 칸입니다. 강의소개 · 설명 디자인(수강신청 영역 위)과 강의소개 · 신청 아래 추가 디자인(수강신청 영역 아래)
2. 칸마다 [HTML 코드] 단추를 눌러 코드 화면으로 바꾼 뒤 붙여 넣습니다.
   • 편집 화면에서 글자나 그림을 고르고 [HTML 코드]를 누르면 그 코드가 선택된 채로 그 줄까지 내려갑니다.
3. CSS는 맨 아래 CSS 칸에 넣습니다. <style>…</style> 째 붙여 넣어도 됩니다.
   • HTML 칸에 <style> 블록이 섞여 있어도 저장할 때 CSS 칸 뒤로 옮겨 줍니다.
4. [미리보기] 로 저장 전 모습을 PC·휴대폰 너비로 보고, 신청 단추를 눌러 안내 팝업도 확인한 뒤 [등록](고칠 때는 [수정 저장]) 을 누릅니다.
5. 저장할 때마다 판이 남습니다(최근 50판). 아래 버전 이력에서 예전 판으로 되돌릴 수 있습니다.

1-7. 그림 올리기와 주소 쓰기

1. 관리자 왼쪽 메뉴 디자인 관리 › 디자인 이미지 에서 그림을 올립니다(JPG·PNG·GIF·WEBP, 폴더로 나눠 둘 수 있음).
2. 그림마다 [주소 복사] 를 누르면 그림 주소가, [<img> 복사] 를 누르면 <img> 태그가 복사됩니다. 여러 장을 고르고 [선택 주소 복사] · [선택 <img> 태그 복사] 도 됩니다.
3. HTML에는 복사한 주소를 그대로 씁니다.

<img src="복사한 주소" alt="그림 설명">

• 그림 주소는 https://… 이거나 이 사이트 안 경로(/…)로 씁니다. data: 주소는 지워지고, http:// 주소는 브라우저가 막아 보이지 않을 수 있습니다.
• 큰 그림은 사이트가 너비별 작은 사본을 만들어 휴대폰에서 가볍게 보여 줍니다.
• 예전 사이트 서버의 그림 주소는 언젠가 사라질 수 있으니 디자인 이미지에 올려 새 주소로 바꿔 주세요.

2. HTML·CSS 작성 기준 (디자이너)

2-1. 버튼 → 같은 페이지의 구역으로 이동

구역에 id를 붙이고, 버튼 링크를 #그id로 씁니다.

<a href="#gn-benefit">스페셜 혜택</a>
...
<div id="gn-benefit"> 스페셜 혜택 내용 </div>

• id는 영문·숫자·-·_로 씁니다. 페이지 안에서 겹치지 않게 합니다.
• 구역이 닫힌 탭 안에 있으면 그 탭을 먼저 열고 내려 줍니다.
• 위쪽 고정 머리말에 가리지 않게 머리말 높이만큼 덜 내립니다.

2-2. 수강신청으로 이동

<a href="#apply">수강신청</a>

• 페이지의 공통 수강신청 영역으로 내려갑니다. 탭형이면 강의소개 탭을 연 뒤 내려갑니다.
• 신청 영역(강좌·수강 방식·교재 고르기, 신청 단추)은 사이트가 그립니다. 디자이너가 만들지 않습니다.

2-3. 중간 탭(강의 정보 · 시간표 · 교재 · 수강신청)

탭형으로 고르면 사이트가 [강의소개 | 시간표 | 교재 | 수강신청] 탭 줄을 자동으로 그립니다. 시간표 칸이 비어 있고 시간표·진도표 파일도 없으면 시간표 탭이, 교재를 고르지 않았으면 교재 탭이 생기지 않습니다.

디자이너가 직접 탭 줄을 그리려면 링크를 이렇게 겁니다.

<div class="gn-tab">
  <ul>
    <li><a href="#lc-intro">강의 정보</a></li>
    <li><a href="#lc-time">강의 시간표</a></li>
    <li><a href="#lc-books">교재 신청</a></li>
    <li><a href="#apply">수강신청</a></li>
  </ul>
</div>

• 예전 코드의 #tab1(강의 정보) #tab2(시간표) #tab3(교재) #tab4(수강신청)도 같은 뜻으로 받습니다.
• 디자이너 탭 줄(탭 링크 2개 이상)이 상단 디자인에 있으면 사이트 탭 줄은 화면에서 감춥니다(두 줄이 겹치지 않게).
• 지금 열린 탭 링크에는 aria-current="true"가 붙습니다. 켜진 모양은 CSS로 줍니다.

.gn-tab a[aria-current="true"] { background:#1b2a4a; color:#fff; }

• 일반형에서는 같은 링크가 그 구역(강의소개·시간표·교재·수강신청)으로 내립니다.
• 시간표·교재가 없는 페이지에서 시간표·교재 링크를 누르면 수강신청 영역으로 내립니다(멈추지 않게).

2-4. 오른쪽 퀵메뉴

<div class="lc-quick">
  <ul class="gn-quick">
    <li><a href="#apply">수강 신청</a></li>
    <li><a href="#lc-time">강의 시간표</a></li>
    <li><a href="#lc-books">교재 신청</a></li>
    <li><a href="#gn-info">강의 정보</a></li>
    <li><a href="#gn-benefit">스페셜 혜택</a></li>
    <li><a href="#download-timetable">시간표 내려받기</a></li>
  </ul>
</div>

• 바깥 상자에 class="lc-quick"을 주면 화면 오른쪽 가운데에 고정됩니다. 예전 코드의 class="quick"(안쪽 quick_con 위치는 디자이너 CSS대로)도 고정됩니다.
• 가로 1024px 이상(PC)에서만 보이고, 그보다 좁으면(태블릿·휴대폰) 본문을 가리지 않게 감춥니다. 좁은 화면에서는 상·하단 바로가기 버튼으로 이동하게 해 주세요.
• 색·크기·여백은 디자이너 CSS로 정합니다. 위치를 고정하는 일만 사이트가 합니다.

2-5. TOP(맨 위로)

따로 만들지 않아도 사이트가 오른쪽 아래에 TOP 단추를 자동으로 그립니다(480px 넘게 내리면 보임). 디자인 안에 TOP 버튼을 두고 싶으면:

<a href="#top">TOP</a>

2-6. 그 밖의 화면·사이트로 가는 링크

<a href="/lectures/123/">강의 상세 보기</a>
<a href="https://tnwacademy.com/books/" target="_blank">교재 목록</a>

https:// 주소나 사이트 안 경로(/…)는 그대로 열립니다. target="_blank"(새 창)도 됩니다.

2-7. 시간표·진도표 내려받기 링크

1-4에서 파일을 올린 뒤 버튼에 겁니다.

<a href="#download-timetable">시간표 내려받기</a>
<a href="#download-progress">진도표 내려받기</a>

파일을 아직 올리지 않았으면 "아직 올라오지 않았습니다" 안내만 뜹니다.

2-8. 유튜브·비메오 영상

<a href="https://youtu.be/영상ID"><img src="버튼 그림 주소" alt="설명회 영상 보기"></a>

• youtu.be/…, youtube.com/watch?v=…, youtube.com/shorts/…, youtube.com/live/…, vimeo.com/… 주소를 링크로 걸면 페이지 위 창에서 재생됩니다.
• 페이지 안에 영상을 바로 박아 두려면 삽입 코드를 씁니다. 유튜브·비메오 삽입 주소만 남습니다.

<iframe src="https://www.youtube.com/embed/영상ID" allowfullscreen></iframe>

2-9. 링크를 안 넣은 단추 (예전 코드 살리기)

링크(href)가 없는 <a>는 글자(그림이면 alt)를 보고 갈 곳을 정합니다. "바로가기"라는 글자는 빼고 봅니다.

보조 기능입니다. 새로 만들 때는 2-1~2-8처럼 링크를 직접 넣어 주세요.

2-10. 저장할 때 지워지는 것과 남는 것

관리자에서 저장하면 보안을 위해 아래처럼 정리됩니다.

지워지는 것

남는 것

• 일반 태그: div p span a img ul ol li dl dt dd table thead tbody tr th td h1~h6 strong b em i u s br hr blockquote figure figcaption header footer nav article aside details summary section video source picture 등
• 속성: class id style(위 제한 안) title role aria-label aria-hidden, 링크의 href target, 그림의 src alt width height srcset sizes loading, 표의 colspan rowspan, 영상의 src controls poster muted loop playsinline
• HTML 칸의 <style> 블록은 지우지 않고 CSS 칸 뒤로 옮깁니다.

CSS 칸

• @media, :hover, :before·:after, !important, @keyframes, 그라데이션 모두 됩니다.
• 안 되는 것: @import(외부 CSS·웹 글꼴 불러오기), @scope, 중첩 선택자 &. 이것이 있으면 저장이 거절되고 까닭이 표시됩니다.
• 글꼴은 사이트 기본 글꼴(Pretendard)을 쓰는 것을 권합니다. 꼭 다른 글꼴이 필요하면 @font-face에 https:// 글꼴 파일 주소를 씁니다(글꼴 서버가 다른 사이트 사용을 허용해야 보입니다).

2-11. 페이지 너비와 휴대폰 기준

• 디자인 칸은 화면 전체 너비로 그려집니다. 구역 바탕색·바탕 그림은 끝까지 깔리고, 안쪽 내용 너비는 디자이너 CSS로 정합니다. 사이트 본문 너비는 1200px이니 안쪽은 1160~1200px로 맞추는 것을 권합니다.

.gn-inner { max-width:1160px; margin:0 auto; padding:0 16px; box-sizing:border-box; }

• 틀 없이 바로 쓴 문단·제목·목록·표는 사이트가 1200px 가운데에 둡니다.
• 사이트 머리말은 위에 붙어 있고 높이는 약 72px(내리면 줄어듦)입니다. 구역 이동은 이 높이만큼 덜 내립니다. 디자인 맨 위에 머리말 높이만큼 빈칸을 둘 필요는 없습니다.
• 휴대폰 대응
  • 그림·영상·표는 화면보다 넓어지지 않게 사이트가 줄입니다(max-width:100%).
  • 고정 너비(width:1160px)를 쓴 상자는 @media로 좁은 화면 값을 따로 주세요.

@media (max-width: 767px) {
  .gn-inner { padding:0 12px; }
  .gn-btns { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
}

• 퀵메뉴는 1024px 미만에서 감춰집니다(2-4).
• 사이트 화면 너비 기준: 휴대폰 ~767px, 태블릿 768~1023px, PC 1024px~

2-12. class 이름 짓기 (사이트와 겹치지 않게)

• 디자이너 CSS는 이 페이지의 디자인 칸 안에만 적용되어 사이트 머리말·꼬리말·수강신청 영역에는 닿지 않습니다.
• 반대로 사이트 공통 이름표가 디자인에 섞이면 사이트 모양이 끼어들 수 있습니다. hidden block flex grid container relative absolute fixed sticky border rounded shadow sr-only 같은 짧은 영어 이름은 피해 주세요.
• 모든 class·id 앞에 앞머리를 붙입니다. 예: gn-(종합반), 또는 페이지별 p27-.

<div class="gn-hero gn-inner"> … </div>

• lc-로 시작하는 이름은 사이트가 쓰는 이름이라 새로 만들지 마세요. 단, 이 문서에 적은 lc-quick(퀵메뉴)과 링크 #lc-intro #lc-time #lc-books는 그대로 씁니다.

3. 관리자 기본 기능 (개발 없이 됨)

예전에 페이지마다 손으로 하던 일은 모두 자동으로 되게 해 두었습니다.

4. 별도 개발이 필요한 것 (정말 남는 것만)

참고: 실제 결제 시험은 개발이 아니라 시험 범위(카드·간편결제, 환불까지 할지)를 정하는 일입니다. 범위를 알려 주시면 함께 시험합니다.

5. 붙여 넣어 바로 쓰는 견본

사용법: 페이지 편집 화면에서 구성 방식을 탭형으로 고르고, 아래 HTML을 상단 디자인 칸에, CSS를 CSS 칸에 붙여 넣습니다. 연결 강의에 강좌를 고르고, 시간표 파일·진도표 파일을 올리고, 수강신청 전 안내 팝업에 문구를 넣은 뒤 [미리보기] 로 확인합니다. 그림 주소·영상 주소·글은 바꿔 쓰세요.

<!-- 오른쪽 퀵메뉴(PC 1024px 이상에서만 보임) -->
<div class="lc-quick">
  <ul class="gn-quick">
    <li><a href="#apply">수강 신청</a></li>
    <li><a href="#lc-time">강의 시간표</a></li>
    <li><a href="#lc-books">교재 신청</a></li>
    <li><a href="#gn-info">강의 정보</a></li>
    <li><a href="#gn-benefit">스페셜 혜택</a></li>
    <li><a href="#download-progress">진도표 받기</a></li>
  </ul>
</div>

<!-- 첫 화면 -->
<section class="gn-hero">
  <div class="gn-inner">
    <h1 class="gn-title">2027 세무사 심화 종합반</h1>
    <p class="gn-sub">1차·2차 동차 합격을 위한 심화 과정</p>
    <!-- 상단 바로가기 4개 -->
    <ul class="gn-btns">
      <li><a href="#apply">수강신청 바로가기</a></li>
      <li><a href="#download-timetable">시간표 내려받기</a></li>
      <li><a href="#gn-benefit">스페셜 혜택</a></li>
      <li><a href="https://youtu.be/영상ID">설명회 영상</a></li>
    </ul>
  </div>
</section>

<!-- 같은 페이지 구역(바로가기·퀵메뉴가 여기로 이동) -->
<section id="gn-info" class="gn-sec">
  <div class="gn-inner">
    <h2>한눈에 보는 강의 정보</h2>
    <p>교육 기간, 강의 시간, 수강료를 적습니다.</p>
  </div>
</section>

<section id="gn-benefit" class="gn-sec gn-sec-alt">
  <div class="gn-inner">
    <h2>스페셜 혜택</h2>
    <img src="디자인 이미지에서 복사한 주소" alt="스페셜 혜택">
  </div>
</section>

<!-- 중간 탭(이 줄이 있으면 사이트 탭 줄은 감춰짐) -->
<nav class="gn-tab">
  <ul>
    <li><a href="#lc-intro">강의 정보</a></li>
    <li><a href="#lc-time">강의 시간표</a></li>
    <li><a href="#lc-books">교재 신청</a></li>
    <li><a href="#apply">수강신청</a></li>
  </ul>
</nav>

<p class="gn-top"><a href="#top">TOP</a></p>

.gn-inner { max-width:1160px; margin:0 auto; padding:0 16px; box-sizing:border-box; }
.gn-hero { background:#1b2a4a; color:#fff; padding:64px 0; text-align:center; }
.gn-title { font-size:40px; font-weight:800; margin:0 0 8px; }
.gn-sub { font-size:18px; opacity:.85; margin:0 0 28px; }
.gn-btns { display:flex; justify-content:center; gap:12px; list-style:none; padding:0; margin:0; }
.gn-btns a { display:block; padding:14px 22px; border-radius:10px; background:#fff; color:#1b2a4a; font-weight:700; text-decoration:none; }
.gn-sec { padding:56px 0; }
.gn-sec-alt { background:#f4f6fb; }
.gn-sec h2 { font-size:28px; margin:0 0 16px; }
.gn-tab ul { display:flex; max-width:1160px; margin:24px auto 0; padding:0; list-style:none; border-bottom:2px solid #1b2a4a; }
.gn-tab a { display:block; padding:14px 24px; color:#1b2a4a; font-weight:700; text-decoration:none; }
.gn-tab a[aria-current="true"] { background:#1b2a4a; color:#fff; }
.gn-quick { list-style:none; margin:0; padding:8px; background:#fff; border:1px solid #d6dbe6; border-radius:12px; }
.gn-quick a { display:block; padding:10px 14px; color:#1b2a4a; font-size:14px; font-weight:700; text-decoration:none; }
.gn-top { text-align:right; max-width:1160px; margin:16px auto; }
@media (max-width: 767px) {
  .gn-hero { padding:40px 0; }
  .gn-title { font-size:28px; }
  .gn-btns { display:grid; grid-template-columns:1fr 1fr; }
  .gn-tab ul { overflow-x:auto; }
  .gn-tab a { padding:12px 14px; white-space:nowrap; }
}

견본에 든 것: 퀵메뉴(lc-quick), 구역 이동(#gn-info·#gn-benefit), 수강신청(#apply), 중간 탭(#lc-intro·#lc-time·#lc-books·#apply), TOP(#top, 사이트 TOP 단추도 자동), 내려받기(#download-timetable·#download-progress), 유튜브 창 재생.