Ext JS - Learning Center

Manual:Ext CSS Overview (Korean)

From Learn About the Ext JavaScript Library

Jump to: navigation, search
Summary: Ext CSS Overview
Author: Ext community (번역 : Rhio.Kim)
Published: Unkown
Ext Version: 1.1
Languages: en.png English kr.png Korean

스타일 재설정

Ext는 브라우저의 기본적인 padding, border, margin 등을 재설정하기 위한 CSS를 포함합니다.

모든 브라우저에서 document 엘리먼트에 같은 margin과 padding 이 적용되지 않습니다. 이것은 표준화된 스타일 시트와 구성화된 명시적인 스타일과 함께 웹 개발을 매우 간단히 시작할 수 있도록 해줍니다. 이런 컨셉은 YUI reset.css 파일에서 따왔습니다.


기본 스타일 재설정

기본적인 스타일 재설정은 다음과 같습니다.

예제: 

html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, p, blockquote, th, td {
  margin:0;
  padding:0;
}

변형된 전체 리스트는 CSS파일을 보면 알 수 있다.

만약 모든 문단이 여백을 다르게 갖기를 원하면 기본 설정이 로드되고 나서 여러분의 CSS안에 정의해야만 합니다. 그리고 여러분의 CSS파일은 꼭 다음의 것을 포함해야 합니다: 

p {
  margin:5px;
}

예제 2: 만약 다음과 같은 간단한 HTML이 있어서 그것을 Internet Explorer에서 제대로 보이게 할 필요가 있다면: 

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
 
<div id="tree-div" style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;"></div>
 
<h1>IE CSS Example</h1>
 
<table border="0" cellpadding="5" cellspacing="1" bgcolor="#333333">
  <tr>
    <td bgcolor="#FFFFFF">row1, col1</td>
    <td bgcolor="#FFFFFF">row1, col2</td>
    <td bgcolor="#FFFFFF">row1, col3</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF">cell spacing is 1</td>
    <td bgcolor="#FFFFFF">cellpadding is 5</td>
    <td bgcolor="#FFFFFF">border is 0</td>
  </tr>
</table>
<p>paragraph1 <strong>ipsem <em>plorim</em> </strong></p>
<p>paragraph2</p>
<ul>
  <li>list item 1</li>
  <li>list item 2 </li>
  <li>list item 3 </li>
</ul>
<p>paragraph3</p>
</body>

ext-all.css 다음에 아래의 CSS를 추가하세요: 

h1 {
	font-size:31px;
	padding-top:0px;
	padding-bottom:18px;
	}
td {
	padding:5px;
	}
p {
	margin-top:19px;
	margin-bottom:13px;
	}
ul {
	margin-top:19px;
	margin-left:39px;
	margin-bottom:13px;
	list-style-type: disc; 
	list-style-image: none; 
	list-style-position: outside;
	}
strong {
	font-weight:bold;
	}
em {
	font-style: italic;
	}

테이블은 특별한 문제를 내포하고 있다고 알려져 있습니다. 만약 다른 셀 패딩값을 갖는 테이블이 있다면 어떻게 해야할까요? 한가지 해결책은 Ext.query로 모든 cellpadding이 있는 태그를 찾고 style="padding:XXpx;"로 치환시키면 될 것입니다. 그러나 또 다른 문제가 있습니다. Ext가 기본 reset 파일에 의존해서 만약 여러분이 문서 전체에서 기본 reset을 되돌리려 한다면 그것들이 깨지게 될 것입니다. 예를 들어 circular disc를 UL로 추가하려 한다면 Ext 구조상 모든 것들이 디스크가 되는 것을 알게 될 것입니다. 해결 할 수 있는 방법은 다음과 같이 필요로 하는 곳에 CSS 후손(descendant) 선택자(셀렉터)를 이용해 적용할 수 있는 특정한 클래스를 만드는 것입니다: 

.ieDefault h1 {
	font-size:31px;
	padding-top:0px;
	padding-bottom:18px;
	}
.ieDefault td {
	padding:5px;
	}
.ieDefault p {
	margin-top:19px;
	margin-bottom:13px;
	}
.ieDefault ul {
	margin-top:19px;
	margin-left:39px;
	margin-bottom:13px;
	list-style-type: disc; 
	list-style-image: none; 
	list-style-position: outside;
	}
.ieDefault strong {
	font-weight:bold;
	}
.ieDefault em {
	font-style: italic;
	}

그럼 기본 reset으로부터 "보호"(protect)받기 위해서 이것을 해당 위치에 적용해 줍니다. 

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
 
<div id="tree-div" style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;"></div>
<!-- ========== PROTECT FROM BASE RESET ========== -->
<div class="ieDefault">
<h1>IE CSS Example</h1>
 
<table border="0" cellpadding="5" cellspacing="1" bgcolor="#333333">
  <tr>
    <td bgcolor="#FFFFFF">row1, col1</td>
    <td bgcolor="#FFFFFF">row1, col2</td>
    <td bgcolor="#FFFFFF">row1, col3</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF">cell spacing is 1</td>
    <td bgcolor="#FFFFFF">cellpadding is 5</td>
    <td bgcolor="#FFFFFF">border is 0</td>
  </tr>
</table>
<p>paragraph1 <strong>ipsem <em>plorim</em> </strong> </p>
<p>paragraph2</p>
<ul>
  <li>list item 1</li>
  <li>list item 2 </li>
  <li>list item 3 </li>
</ul>
<p>paragraph3</p>
</div>
</body>

아무리 그래도 이 방법을 사용하면 몇 가지 문제를 발견할 것입니다. 왜 “plorim”은 굵은체가 아닐까? 이유는 reset.css에 있습니다. 

address,caption,cite,code,dfn,em,strong,th,var{fon t-style:normal;font-weight:normal;}

em은 strong 태그에 감싸여 font-weight:”normal” 으로 재설정되도록 되어 있습니다! em에서 font-weight를 없앨 방법은 없어 보입니다. iframe으로 지역을 감쌀 수 있지만 이상적인 방법인 것 같지는 않습니다.


Read more: EXT THREADS

YUI

WHY RESET?

Retrieved from "http://www.extjs.com/learn/Manual:Ext_CSS_Overview_(Korean)"
  • This page was last modified on 21 January 2009, at 16:04.
  • This page has been accessed 762 times.