M9 Editor

개요

M9에서 사용하는 HTML 코드의 기본 작성 규칙과 들여쓰기, 빈 줄 사용, DTD 및 인코딩 선언방법,HTML 요소 작성 방법, 주석 작성 방법을 설명한다.

기본규칙

최종수정 20180813D

html코드는 기본적으로 1칸의 띄워쓰기를 인식하고 줄바꿈에 대해 자유롭다.
div는 block elementer 지만 display-inline-block 설정시 block 요소와는 다르게 공백을 인식하게 되므로 주의한다.

기본적으로 아래의 규칙을 따른다.

W3C Validation 을 통과해야 한다.
DTD를 제외한 모든 요소와 속성은 소문자로 작성한다.
속성값은 큰따옴표(")로 묶는다.
특수기호는 엔티티코드로 사용한다.
스크립트 선언을 지양한다.

영문 소문자 사용

DTD를 제외한 모든 요소와 속성은 소문자로 작성한다.


/* 잘못된 예 */
<SPAN Class="desc"> 설명 </SPAN>

/* 올바른 예 */
<span class="desc"> 설명 </span>

속성값 표기

속성값은 큰따옴표(")로 묶는다.


/* 잘못된 예 */
<img src='test.gif' width='100' height='100' alt='테스트'>

/* 올바른 예 */
<img src="test.gif" width="100" height="100" alt="테스트">

특수기호 사용

특수 기호는 엔티티 이름(entity name)을 사용해서 엔티티 코드(entity code)로 변환한다. 엔티티 번호(entity number)는 사용하지 않는다.
M9에서는 특수기호를 사용하지 않지만 필요한 경우에는 참고한다.

<, >, ", ', & 등의 특수기호를 엔티티코드로 변환하지 않으면 브라우저가 이를 시작/종료 태그나 속성으로 잘못 해석할 수 있으니 특수기호 사용시에 주의한다.

스크립트 선언 지양

이벤트핸들러와 스크립트는 HTML 산출물에 선언하지 않는다.


/* 잘못된 예 */
<input type="text" id="user" name="user" onfocus="this.className='focus'"> 

/* 올바른 예 */
<!-- [D]입력 박스에 포커싱 됐을때, class="focus" 추가 -->
<input type="text" id="user" name="user" class="focus">

들여쓰기 규칙

최종수정 20180813D

들여쓰기를 하면 가독성이 높아지고 전체 HTML구조를 쉽게 파악할 수 있다. 마크업의 중첩이 깊어질 때마다 자식요소는 1탭 들여쓴다.

1탭의 크기는 공백 4칸으로 설정한다.


<li class="inline-block padding-height-2 top center e-block e-padding-0">
    <div class="inline-block border middle e-block e-width-auto e-margin-width" style="width:180px">
        <div class="padding f-english f-large f-bolder user-background-1">STEP 0<span class="_calculate">3</span></div>
        <div class="padding">
            <div class="padding-bottom f-title f-bolder" style="border-bottom-style:dashed;border-bottom-width:1px">전문상담사</div>
            <div class="padding-height-2">
                <ul class="list-style-3 left">
                    <li>체질/건강상태 체크</li>
                    <li>수술부위 특성검사</li>
                    <li>전문의 상담</li>							
                    <li>전문의 상담</li>		
                    <li>전문의 상담</li>																		
                </ul>
            </div>		
        </div>
    </div>
    <i class="axi axi-chevron-right axi-3x inline-block top e-margin-0 e-rotate-90" style="margin:85px 0 0 0"></i>
</li>

빈 줄

최종수정 20180813D

의미있는 객체를 구분하기 위해 코드 그룹 사이에 1줄씩 빈 줄을 만드는것을 허용한다.
빈줄의 간격은 1줄로 통일시킨다.


<li class="inline-block padding-height-2 top center e-block e-padding-0">
    <div class="inline-block border middle e-block e-width-auto e-margin-width" style="width:180px">
        <div class="padding f-english f-large f-bolder user-background-1">STEP 0<span class="_calculate">3</span></div>
        <div class="padding">
            <div class="padding-bottom f-title f-bolder" style="border-bottom-style:dashed;border-bottom-width:1px">전문상담사</div>
            <div class="padding-height-2">
                <ul class="list-style-3 left">
                    <li>체질/건강상태 체크</li>
                    <li>수술부위 특성검사</li>
                    <li>전문의 상담</li>							
                    <li>전문의 상담</li>		
                    <li>전문의 상담</li>																		
                </ul>
            </div>		
        </div>
    </div>
    <i class="axi axi-chevron-right axi-3x inline-block top e-margin-0 e-rotate-90" style="margin:85px 0 0 0"></i>
</li>

<li class="inline-block padding-height-2 top center e-block e-padding-0">
    <div class="inline-block border middle e-block e-width-auto e-margin-width" style="width:180px">
        <div class="padding f-english f-large f-bolder user-background-1">STEP 0<span class="_calculate">3</span></div>
        <div class="padding">
            <div class="padding-bottom f-title f-bolder" style="border-bottom-style:dashed;border-bottom-width:1px">전문상담사</div>
            <div class="padding-height-2">
                <ul class="list-style-3 left">
                    <li>체질/건강상태 체크</li>
                    <li>수술부위 특성검사</li>
                    <li>전문의 상담</li>							
                    <li>전문의 상담</li>		
                    <li>전문의 상담</li>																		
                </ul>
            </div>		
        </div>
    </div>
    <i class="axi axi-chevron-right axi-3x inline-block top e-margin-0 e-rotate-90" style="margin:85px 0 0 0"></i>
</li>

<li class="inline-block padding-height-2 top center e-block e-padding-0">
    <div class="inline-block border middle e-block e-width-auto e-margin-width" style="width:180px">
        <div class="padding f-english f-large f-bolder user-background-1">STEP 0<span class="_calculate">3</span></div>
        <div class="padding">
            <div class="padding-bottom f-title f-bolder" style="border-bottom-style:dashed;border-bottom-width:1px">전문상담사</div>
            <div class="padding-height-2">
                <ul class="list-style-3 left">
                    <li>체질/건강상태 체크</li>
                    <li>수술부위 특성검사</li>
                    <li>전문의 상담</li>							
                    <li>전문의 상담</li>		
                    <li>전문의 상담</li>																		
                </ul>
            </div>		
        </div>
    </div>
    <i class="axi axi-chevron-right axi-3x inline-block top e-margin-0 e-rotate-90" style="margin:85px 0 0 0"></i>
</li>

DTD 및 인코딩

최종수정 20180813D

정의되어 있는 구조를 따른다.

HTML문서는 반드시 인코딩 정보를 선언한다. 인코딩 설정은 DB의 인코딩방식과도 관련이 있으므로 작업자는 기본적으로 어떻게 세팅이 되어있는지 파악하도록 한다.

뷰포트

최종수정 20180813D

M9에 정의되어 있는 뷰포트를 파악하고 있도록 한다.


/* M9 뷰포트 */
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">

class와 style 선언순서

최종수정 20180813D

특정 요소에 class와 style을 선언할 때는 선언 순서를 준수한다. 다음과 같이 class와 style은 제일 뒷부분에 선언한다.


/* 선언순서 */
<input type="text" id="user" title="사용자ID" class="input-txt" style="width:100px">

전역구조화 요소

최종수정 20180814D

변경시 새로 정리한다.

head

다음과 같은 순으로 정의되어 있으며 변경하지 않는다.

meta
title
link
script
style


<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="Reply-To(Email)" content="bbjjyy_1999@naver.com" />
<meta name="Location" content="경남 창원시 마산회원구 봉암북7길21, 5동 601호(봉암동,정보산업진흥본부)" />
<meta name="Robots" content="ALL" />

<!--// google //-->
<meta property="og:type" content="website" />
<meta property="og:title" content="sample-25~00 | 공지사항《고객센터" />
<meta id="facebook_description" property="og:description" content="" />
<meta property="og:image" content="http://staff03.mong9.com/etc_img/logo.png" />
<meta property="og:url" content="http://staff03.mong9.com/index.cgi?page_code=otherpage&code=notice&num=52" />
<meta property="og:site_name" content="웹프로소프트(Webprosoft)" />
<meta property="og:description" content="" />

<title>sample-25~00 | 공지사항《고객센터</title>

<link rel="canonical" href="http://staff03.mong9.com/index.cgi?page_code=otherpage&code=notice&num=52">

<script type="text/javascript"> 
//<![CDATA[
_SET = {}; // 전역변수
_SET["domain"] = "http://staff03.mong9.com"; // 홈페이지 도메인
_SET["mall_file"] = "./index.cgi"; // 홈페이지 기본주소
_SET["fontSize"] = "10pt"; // 홈페이지 기본 글크기
_SET["image_polder"] = "./m9_img"; // 이미지 위치
_SET["data_polder"] = "./m9_data"; // 데이터 위치
_SET["speech"] = 0; // 시각장애인용 설정값
_SET["png24_back"] = [];

_SET["company"] = "웹프로소프트";
_SET["company_en"] = "Webprosoft";
_SET["tel"] = "070-7309-6354";
_SET["fax"] = "055-259-5277";
_SET["address"] = "경남 창원시 마산회원구 봉암북7길21, 5동 601호(봉암동,정보산업진흥본부)";
_SET["post"] = "-";
_SET["mail"] = "bbjjyy_1999@naver.com";

document.execCommand("BackgroundImageCache",false,true);

//]]>
</script>
<script type="text/javascript" src="http://javascript.mong9.com/3.3/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://javascript.mong9.com/3.3/jquery/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://javascript.mong9.com/3.3/jquery/ui/jquery.ui.effect.min.js"></script>
<script type="text/javascript" src="http://javascript.mong9.com/3.3/int_utils.js"></script>
<script type="text/javascript" src="http://javascript.mong9.com/3.3/layer_func2.js"></script>
<script type="text/javascript" src="http://javascript.mong9.com/3.3/jquery/jquery.timer.js"></script>
<script type="text/javascript" src="http://javascript.mong9.com/3.3/m9ani.js"></script>
<script type="text/javascript" src="http://javascript.mong9.com/3.3/Image_Functions.js"></script>
<script type="text/javascript" src="./user_script.js"></script>
<link rel="stylesheet" href="./m9_data/etc/axicon/axicon.min.css">
<!--[if IE 7]>
<link rel="stylesheet" href="./m9_data/etc/axicon/ie7/ie7.css">
<![endif]-->
<!-- <link rel="stylesheet" type="text/css" href="http://link.mong9.com/3.3/css/mong9.css"> --> <!--// 공통 스타일시트 //-->
<link rel="stylesheet" type="text/css" href="./m9_data/page/mong9.css">
<link rel="stylesheet" type="text/css" href="./m9_data/page/default.css">
<link rel="stylesheet" type="text/css" href="./m9_data/page/style_sheet.css"> <!--// 사용자 스타일시트 //-->
<link rel="stylesheet" type="text/css" href="./m9_data/page/design_convert.css" />
<link rel="stylesheet" type="text/css" href="http://link.mong9.com/3.3/css/mong9_2.css"> <!--// 공통 스타일시트 //-->
<link rel="stylesheet" type="text/css" href="./m9_data/page/design_page.css" />
<link rel="stylesheet" type="text/css" href="./m9_data/page/design_page/design_page_up.css" />
<link rel="stylesheet" type="text/css" href="./m9_data/page/design_page/design_page_l_img_community.css" />
<script type="text/javascript" src="http://javascript.mong9.com/3.3/page_design.js"></script>
</head>

title

정의되어 있는 규칙을 따른다.


<title>M9::</title>

link

rel,type,href순서로 속성을 선언한다.


<link rel="stylesheet" type="text/css" href="css/mong9.css">

script

type,src순서로 속성을 선언한다.


<script type="text/javascript" src="js/mong9.js"></script>

style

type속성을 선언한다.


<style type="text/css">
</style>

body

body태그에 사용중인 class와 id를 지정한다.

정의되어 있는 구조를 따른다.


<body class="page_pattern" id="body_id">

폼 요소

최종수정 20180814D

정리중입니다.


/* mong9 */
<html lang="ko">

표 요소

최종수정 20180814D

정리중입니다.

기타 요소

최종수정 20180814D

정리중입니다.

주석

최종수정 20180814D

주석기호와 주석내용 사이에는 반드시 한칸의 공백을 둔다.

주석기호와 내용사이의 줄바꿈은 허용하지 않는다. 단,주석 내용 사이의 줄바꿈은 필요시 허용한다.

시작과 종료 주석의 주석 내용은 동일해야 한다.


<!-- 삽입내용 시작 -->
<div class="m9_editor">
<div class="grid2-1">
	<div class="column1">

		<!-- 무비 애니메이션 -->	
		<div ani_type="movie" class="movier only-web" style="height:150px;background:url(http://staff03.mong9.com/etc_img/sub_animate/bg.png) 50% -220px no-repeat">
			<div class="page_width relative">
				<div style="padding:30px 20px 0 20px">
					<strong movie_type="slide(delay:0,speed:200,direction:'right',distance:100);fade(delay:0,speed:100)" class="movier-one f-xxlarge f-bolder f-user-color1" style="margin-bottom:5px">고객센터</strong>
					<p movie_type="slide(delay:200,speed:800,easing:'easeOutBounce',scale:0.5)" class="movier-one f-bold" style="font-size:20px">항상 고객의 입장에서 생각하는 웹프로소프트가 되겠습니다.</p>
				</div>
			</div>	
		</div>
    <!-- //무비 애니메이션 -->

	</div>
</div>

<div class="clearboth"></div>
</div>
<!-- //삽입내용 시작 -->

M9 기본구조

개요

기본규칙

영문 소문자 사용

속성값 표기

특수기호 사용

스크립트 선언 지양

들여쓰기 규칙

빈 줄

DTD 및 인코딩

뷰포트

class와 style 선언순서

전역구조화 요소

head

meta

title

link

script

style

body

폼 요소

표 요소

기타 요소

주석

목차

다운로드

목차1-11