블로그 이미지

카테고리

데꾸벅 (194)
Publisher (39)
Scripter (97)
Programmer (1)
Designer (30)
Integrator (18)
Pattern Searcher (4)
News (2)
강좌 및 번역 (3)

최근에 올라온 글

최근에 달린 댓글

Extjs Sample :: 기본문서구조

Scripter/EXTJS / 2008. 2. 18. 19:39
이 포스팅은 넥스트리에서 내부프로젝트를 진행할때 표준문서로 삼았던 자료입니다.
현재 내용이 표준이 아니므로 참조하실때 유의하시기 바랍니ㅏㄷ.

1. HTML 구조


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Component Basic Information</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />        <!-- extjs stylesheet    -->
<link rel="stylesheet" type="text/css" href="../common/style/css-all.css" />            <!-- bcf stylesheet      -->
<link rel="stylesheet" type="text/css" href="../common/style/component.css" />            <!-- bcf stylesheet      -->
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>            <!-- extjs script        -->
<script type="text/javascript" src="../extjs/ext-all-debug.js"></script>                <!-- extjs script        -->
<script type="text/javascript" src="../extjs/adapter/ext/localXHR.js"></script>            <!-- extjs Extended      -->
<script type="text/javascript" src="../extjs/adapter/ext/RowExpander.js"></script>        <!-- extjs Extended      -->
<script type="text/javascript" src="../scripts/global.js"></script>                        <!-- bcf global variable -->
<script type="text/javascript" src="../scripts/requestUrl.js"></script>                    <!-- Url Handling        -->
<script type="text/javascript" src="./scripts/versionRegisterWin.js"></script>            <!-- current page script -->
<script type="text/javascript" src="./scripts/versionModifyWin.js"></script>            <!-- current page script -->
<script type="text/javascript" src="./scripts/artifactRegisterWin.js"></script>            <!-- current page script -->
<script type="text/javascript" src="./scripts/componentModifyWin.js"></script>            <!-- current page script -->
<script type="text/javascript" src="./scripts/artifactListGrid.js"></script>            <!-- current page script -->
<script type="text/javascript" src="./scripts/artifactModifyWin.js"></script>            <!-- current page script -->
<script type="text/javascript" src="./scripts/basicInfoTopPanel.js"></script>            <!-- current page script -->
<script type="text/javascript" src="./scripts/basicInfo.js"></script>                    <!-- current page script -->
</head>
<body>
<!-- Real Body Container Start -->
<div id="div_basicInformation_Container">
기본 내용이 들어간다. 
</div>
</body>
</html>

 

HTML 작성규칙 :

  1. 반드시 웹표준에 맞게 구조화 되게 작성한다.
  2. DOCTYPE을 반드시 명기할것. (XHTML1.0 Trasitional DTD)
  3. 모든 HTML Element(TAG)들은 소문자로 표현한다. (XHTML1.0 Spec)
  4. HTML Element들의 properties와 attribute들은 최소화한다.
  5. ExtJS의 스타일은 <link /> 태그로 작성한다.
    예외 : factoryware(가칭)의 스타일은 @import를 이용한 include방식으로 작성한다 ( 일괄적인 수정용이)
  6. <script></script>태그의 type은 반드시 작성해 주며 위와 같은 순서대로 작성한다.
    ExtJS Framework JS > ExtJS Extension Module > Global Variables > 현재페이지에 필요한 Javascript resources

 

2. StyleSheet의 구조


@import url("layout.css");    /* Page Layout */
@import url("openpage.css");    /* OpenPage Layout */
/* Elements */
@import url("font.css");    /* Font */
@import url("form.css");    /* Form */
@import url("link.css");    /* Link */
@import url("table.css");    /* table */


 body {
    padding:0;
    margin:0;
    width:100%;
    height:100%;
}


DIV#_DIV_SEARCH_RESULT_ {
    font-family: segoe ui,tahoma,arial;
    font-size:12px;
    width:100%;
    height:100%;
    overflow:auto;
}

DIV#_DIV_SEARCH_RESULT_ H3{
    border:#DDD dotted 1px;
    padding:5px;
    margin:5px;
    height:200px;
    text-align:center;
    font-weight:normal;
    font-family:segoe ui,Dotumn,tahoma

}

 


 

 

 

CSS 작성규칙 :

  1. 기본적으로 ExtJS의 모든 화면 구성은 <div></div> <table></table>을 사용하여 작성되며 모두 x-prefix로 시작된다.

  2. inline Style은 최대한 자제한다.
    예외사항 : ExtJS의 component들은 대부분 position:relative로 작성되기 때문에 IE6, IE7 Bug에 의한 부분은 배제된다.
    또한 Javascript로 ExtJS의 모듈로 들어가는 부분은 제외된다.

  3. ExtJS의 스타일을 제외한 부분은 되도록이면 @import를 이용하여 작성한다.
    (예외 : eclipse css validator에서는 @import를 invalid로 인식하여 예외적으로 사용, 그러나 사용상, 웹표준에 어긋나는 표현은 아님!)

  4. Block Label Element와 Inline Lable Element는 적절히 조화롭게 사용하되 ExtJS의 특징상 Block Lable 요소중에서 부득이하게 네비게이션을 Table로 사용하는 경우가 발생하므로 이경우는 예외로 처리한다.

  5. factoryware는 IE6이상, Firefox2.0 을 기본 브라우저로 하며 IE7.0 , Firefox3.0, Opera9.0 호환모드로 작성한다.
    IE6 Hack, IE7 Hack 작성시 ExtJS의 기본 스타일을 반드시 지켜야 한다.

  6. selector를 사용하려면 Id 값은 해당 화면에서 반드시 하나만 존재해야 하며 같은 스타일을 유지하려면 되도록 class selector를 사용한다.
    (사용예 : <div id="_DIV_SEARCH_RESULT_" class="link_color  x-btn-test"></div> )

  7. Id selector를 사용할 경우 반드시 HTML element를 붙여준다. (예외적으로 전체적으로 적용할때는 제외한다.)
    (사용예 : DIV#_DIV_SEARCH_RESULT_ {내용} )

  8. class selector는 쪼개어 multiple로 작성한다.
    (사용예 : <div class="first_class  second_class third_class"></div> )

  9. 명명규칙 :
    - camel 표기법이 아닌 _ (under-line)을 이용한 명명법을 쓴다. (Javascript에서 사용시 한눈에 보기 쉽게 작성
    - Id 값은 되도록 대문자로 작성한다.
    - class값은 소문자로 작성한다.


 

 

 

Javascript 명명규칙
Edit section

주석처리


XHTML validaion처리를 위하여 주석은 아래와 같이 작성한다. 

 <style type="text/css">
/*<![CDATA[*/

/*]]>*/
</style>

<script type="text/javascript">
//<![CDATA[

//]]>
</script>

 

 


'Scripter > EXTJS' 카테고리의 다른 글

Extjs Sample :: Viewport를 이용한 기본레이아웃잡기  (3) 2008.02.18
Extjs Sample :: 기본문서구조만들기  (0) 2008.02.18
Extjs Qtips 사용하기  (0) 2008.02.18
Extjs Template 사용하기  (0) 2008.02.18
Extjs 단축키 지정  (0) 2008.02.18
Post by 넥스트리소프트 데꾸벅(techbug)
, |

티스토리툴바