sk story :)

Project/Web Study2009/01/08 15:28

CSS 2.1 Case-Sensitive

CSS charaters and case
All CSS style sheets are case-insensitive, except for parts that are not under the control of CSS. For example, the case-sensitivity of values of the HTML attributes "id" and "class", of font names, and of URIs lies outside the scope of this specification. Note in particular that element names are case-insensitive in HTML, but case-sensitive in XML.

CSS는 대소문자 구분을 하지 않는다. 대신 HTML에 CSS를 적용할때 id, class, font-name은 대소문자 구분함

즉 CSS는 기본적으로 대소문자 관계없이 사용가능하지만, HTML에 CSS를 적용할때는 id, class, font-name을 제외하고는 대소문자를 구별해서 사용할 필요가 없고 XML에 CSS를 적용할때는 대소문자를 구별 해서 사용해야함

그 이유는 HTML에서는 태그(element)들에 대해 대소문자 구분을 하지 않고 XML에서는 태그(element)들에 대해 대소문자를 구분함

참고자료 : http://www.w3.org/TR/CSS21/syndata.html#characters

Posted by

No Trackback No Comment

Leave your greetings.

Project/Web Study2009/01/07 11:32

CSS 2.1 Selector

CSS Selector...더 많이 있지만 필요한 개념 몇 가지만 정리한다.

1. Type Selectors
h1 {font-family: sans-serif}
- 가장 흔히 볼 수 있는 selector이며 body 안의 <h1> 태그(element)가 있을 경우 sans-serif 폰트를 적용한다.

2. Universal Selector
* {font-family: sans-serif}
- <body>안의 모든 태그(element)들에 sans-serif 폰트를 적용한다.
- div table p a h1.....{font-family: sans-serif}등 여러 태그(element)들을 selector로 나열 할 수 있지만 간단히 "*" 하나면 body 안의 모든 tag에 적용 할 수 있다.
- 또한 decendent selector와 같이 사용한다면 특정 태그 안의 모든 태그를 지정할때는 universal selector(*)로 간단히 적용 시킬 수 있다.

예) div * {font-family: sans-serif} - <div> tag안에 모든 태그(element)들에 대해 sans-serif 폰트를 적용한다.

3. Decendent Selectors
h1 em { color: blue }
- 여러개의 자손(decendent) 태그(element)들로 이루어진 selector이다.
- 즉 <h1>태그안의 <em>태그에만 blue color를 적용한다. 위 예제에서 em (element)태그가 자손(decendent) 관계에 있다.
(html 예제)
<body>
<h1>
   <em>This is blue font</em>
</h1>
</body>

그런데 만약 아래 같이 <h1> 과 <em> 사이에 다른 태그가 섞여 있다면 어떻게 될까?
<body>
<h1>
<p>
<em>This is blue font</em>
   </p>
</h1>
</body>
결과는 ancestor relation(조상관계)라고 해서 속성이 em 태그에 속성이 적용된다.
영어로 설명 하자면...<em> tag is child of <p>tag...<p>tag is child of <h1> tag...<em> tag is grand child of <h1>...ㅡㅡ;

영어로는 이들 관계를 부모, 자식, 조상 관계라고 표현하는데 이해하기 편하게 그렇게 부르는것 같다. 하지만 이해하기 더 어렵다는것....
참고로 <em> 태그는 이택릭체를 의미하는 html font 태그이다.

4. Child Selectors
body > P { color: blue }
- body P { color: blue } Decendent Selectors 의 경우 <body> 태그 안의 모든 <p>태그에 blue color가 적용되지만 body > P { color: blue } 의 경우 <body> tag안에 바로 붙어 있는 <p>태그에만 blue color가 적용된다.
- direct child일 경우에만 적용된다라고 생각면 될것 같다.

5. Questioin?
아래 html문서는 어떻게 나타날것인가?
HTML sample
<head>
   <style type="text/css">
   * { color: blue; background-color: yellow; }
   p.test * em { color: white; background-color: red; }
   </style>
</head>
<body>
   <p class="test">
   blue font color and yellow backround
<span>
   <em>white font and red backround color</em>
</span>
   </p>
</body>
- <p> 태그의 클래스 test 안의 모든 태그는 Universal Selector(*)를 적용 받아야 하지만 em 태그의 경우에는 Decendent Selectors 영향으로 폰트 색상은 white, 배경색은 red 컬러가 적용된다.

참고자료 : http://www.w3.org/TR/CSS21/selector.html

Posted by

No Trackback No Comment

Leave your greetings.

Project/Web Study2009/01/06 15:44

CSS 2.1 Table Margin

'margin'
Applies to : all elements except elements with table display types other than table-caption, table and inline-table

table-caption, table and inline-table외 table 타입을 제외하고 모든 element에 적용한다...
즉...table-caption, table and inline-table을 빼고 나머지 table에는 margin을 적용하지 않는다...

참고자료 : http://www.w3.org/TR/CSS21/box.html#margin-properties

Posted by

No Trackback No Comment

Leave your greetings.

Project/Tools2009/01/05 11:29

Firebug 1.2.1

이미 웹 개발자들 사이에서는 널리 알려진 툴이지만 개인적으로 주로 사용하는 기능관련하여 간단히 소개하고자 한다.

Firebug는 Firefox Add-on 사이트에서 다운로드 가능하며 Firefox에서 바로 설치 가능하다.

1. HTML, CSS - 검사"inspection"를 선택한 후 페이지내에서 원하는 오브젝트를 선택하면 해당 HTML 소스로 이동한다. 오른쪽에는 CSS 페이지의 속성이 적용된 위치도 같이 나타내준다. 레이아웃을 선택할 경우 박스 모델(Box Model)의 Content, Margin, Padding, Boarder의 정보를 볼 수 있다. 또한 자신이 원하는 위치에서 바로 수정하여 페이지를 확인해 볼 수 도 있다.