공무원
소방
지방직 7급 D-7

넥스트공무원 넥스트공무원

목록으로 돌아가기
    TOP 네비게이션 닫기

    1. ASP

    1-1. 인클루드 주석 예시

    • 1) 일반적인 예시 m\gong\main.asp
    <% 'S: 패스 배너 %>
<!-- #include virtual = "/m/gong/bnr_zone/pass.asp"-->
<% 'E: 패스 배너 %>

<% 'S: Mega's Pick, 이벤트 %>
<!-- #include virtual = "/m/gong/bnr_zone/pick_event.asp"-->
<% 'E: Mega's Pick, 이벤트 %>
    • 2) 분기/직렬을 구분하고자 할 때, [] 추가 m\gongssel\main.asp
    <% 'S: [MO] 방문상담 배너 %>
<!-- #include virtual = "/common/banner/offline_banner.asp"-->
<% 'E: [MO] 방문상담 배너 %>

    1-2. asp 파일 내부 주석

    • 1) <%%> 내부 common\menu\header_gongssel.asp
    <%
  '기능 제목
  *필요에 따라 우측 주석 설명기입
%>

예시)
<%
  '직렬전문 랜덤 로딩
  Randomize '초기화
  random_maj_code = Int(Rnd * 2) + 3 '행정직/기술직 랜덤
  ...중략...
%>

    1-3. 컨텐츠

    • 1) 공용 배너일 경우, 컨텐츠 상하단 기입 / 고유 id 명시 m\gongssel\bnr_zone\promote.asp
    <!-- S: [PC] 상품 홍보 배너 - 1 / main_promoteSlider1 -->

    
    ... 중략 ...

    
<!-- E: [PC] 상품 홍보 배너 - 1 / main_promoteSlider1 -->
    • 2) 개인 커스텀 파일의 경우 (ex. 이벤트 pr페이지), 컨텐츠 하단 기입 event\@template\index.asp
    
    
    
        중략
    • 3) 큰 범위의 구분(직렬 등) m_inc\main_pass_bnr.asp
    • *분기처리의 경우, 주석이 분기 안에 들어가도록 함*
    <% if hcode = "gong" then %>
<%' S: [공무원/MO] 메인 최초 진입 패스 딤팝업 / first_passPop %>
...중략...
<%' E: [공무원/MO] 메인 최초 진입 패스 딤팝업 / first_passPop %>
<% end if %>

    2. CSS

    2-1. 공통파일

    • 2-1-1. 공통 기능 정의 common\css\main\megagong_main_offline_v24.css
    • - 공통 레이아웃이나 메인 페이지의 CSS를 작성할 때 아래의 규칙들을 활용한다.
    • - 주석의 상세 설명은 영어를 적어도 되고, 한글로 적어도 되는데 한 파일 안에서 영어나 한글 중 하나로 통일해서 작성하는 것을 권장한다.
    /* S: [common] settings */
...생략...
/* E: [common] settings */

/* S: [common] slick */
...생략...
/* E: [common] slick */

/* S: [common] 타이틀 */
...타이틀...
/* E: [common] 타이틀 */

/* S: login */
...로그인 스타일링...
/* E: login */

/* S: 검색 */
...검색 스타일링...
/* E: 검색 */
    • 2-1-2. PC(>1200px)에서만 사용하거나 MO(≤1200)에서만 사용되는 요소, 공통이면 생략
    • - 메인과 같이 인클루드 되는 파일이 다수 존재하는 페이지의 CSS라면 주석명으로 파일을 덧붙일 수 있다.
    /* S: [PC] event.asp 이벤트 모음 페이지 */
...생략...
/* E: [PC] event.asp 이벤트 모음 페이지 */

/* S: [MO] info.asp */
...생략...
/* E: [MO] info.asp */

/* S: 선생님 리뉴얼 */
...생략...
/* E: 선생님 리뉴얼 */
    • - PC, MO과 함께 파일명 혹은 작업 내용을 작성한다. (같이 작성해도 됨)
    • - PC, MO 둘다 사용되는 요소는 앞에 아무것도 명시하지 않는다.
    • - 혹 나중에 파일명 혹은 작업 내용이 변경되면 같이 변경한다.
    • 2-1-3. 특정 직렬(and 기기)에서만 사용되는 요소
    /* S: [sobang/PC] review.asp */
...생략...
/* E: [sobang/PC] review.asp */

/* S: [ansung] review.asp */
...생략...
/* E: [ansung] review.asp */

/* S: [gong/MO] review.asp */
...생략...
/* E: [gong/MO] review.asp */
    • - PC, MO 둘다 사용되는 요소는 앞에 아무것도 명시하지 않는다.

    2-2. 워싱인 경우

    • 2-2-1. 워싱하는 내용이 많은 경우
    • - 기존 주석 영역 바로 하단에 [ws] 추가 작성한다.
    /* S: 모의고사 배너 - 기존 코드 예시 */
.wrap_content .mockSky {position: absolute;right: -130px;top: 0}
/* E: 모의고사 배너 - 기존 코드 예시 */
    
/* S: [ws] 240809 모의고사 배너 추가 */
.wrap_content .mockSky {color: red;}
.wrap_content .mockSky p {color: green;}
...생략...
/* E: [ws] 240809 모의고사 배너 추가 */

/* S: [ws-v2] 241128 모의고사 배너 추가 */
.wrap_content .mockSky2 {position: absolute;right: -130px;top: 0}
.wrap_content .mockSky2 .btn {font-size: 0;position: absolute;top: 50%;left: 0;width: 100%;height: 50%}
.wrap_content .mockSky2 .btn a {position: absolute;top: 0;left: 0;width: 100%;height: 50%}
.wrap_content .mockSky2 .btn a + a {top: 50%}
...생략...
/* E: [ws-v2] 241128 모의고사 배너 추가 */

/* S: [ws-v3] 241226 모의고사 배너 직렬별 색상 추가 */
.wrap_content .mockSky2.gong .btn {height: 30%;top: 70%}
.wrap_content .mockSky2.gong .btn a {height: 100%}
.wrap_content .mockSky2.gong.confm .btn {font-size: 0;position: absolute;top: 50%;left: 0;width: 100%;height: 50%}
.wrap_content .mockSky2.gong.confm .btn a {position: absolute;top: 0;left: 0;width: 100%;height: 50%}
.wrap_content .mockSky2.gong.confm .btn a + a {top: 50%}
...생략...
/* E: [ws-v3] 241226 모의고사 배너 직렬별 색상 추가 */
    • 2-2-2. 워싱하는 내용이 적은 경우
    • - 작업자 재량껏 클래스 변경없이 간단한 수정일 경우, 기존 코드에 작성하고 2~3줄 정도의 추가라면 상황에 따라 S/E 없이 상단만 주석 기입한다.
    /* S: 모의고사 배너 - 기존 코드 예시 */
.wrap_content .mockSky {position: absolute;right: -130px;top: 0}
.wrap_content .mockSky {color: red;}
.wrap_content .mockSky p {color: green;}
...후략...
    
/* [ws] 241128 모의고사 배너 추가 */
.wrap_content .mockSky2 {position: absolute;right: -130px;top: 0}
.wrap_content .mockSky2 .btn {font-size: 0;position: absolute;top: 50%;left: 0;width: 100%;height: 50%}
.wrap_content .mockSky2 .btn a {position: absolute;top: 0;left: 0;width: 100%;height: 50%}
.wrap_content .mockSky2 .btn a + a {top: 50%}

/* E: 모의고사 배너 - 기존 코드 예시 */

    3. JS

    3-1. 간단한 로직의 경우

    • - 상단에만 주석 작성한다.
    // 비디오 알럿처리 
$(".video_box.alert").click(function(){
    alert('곧 공개됩니다.')
});

    3-2. 참고 파일 위치나 설명이 필요한 경우

    • - /(슬래시) 구분 후 작성
    // [MO] depth2 메뉴 이동 / common\menu\header_mo_gnb.asp
<% if InfoMenu then %>
moGnbSlideToByName("공지사항"); 
... 중략 ... 
<% end if %>

    3-3. 긴 로직의 경우 또는 공통함수

    • - S(시작) / E(끝) 명시
    // S: [공통] 메인 배너 랜덤색상 / 오프라인 전용
... 중략 ... 
// E: [공통] 메인 배너 랜덤색상 / 오프라인 전용