[css] selector를 잘알자.

css는 다음과 같은 형식으로 정의한다.

  selector { property : value ; }

css를 쓰기위해선 selector에 대해 잘 아는것이 필요하다.

자주 쓰이는 몇가지를 정리한다.

1. Type Selector ( E )

  모든 E element에 스타일이 적용된다.

2. Class Selector ( .E )

  class가 E인 element에 적용된다.

3. ID Selector ( #E )

  id가 E인 element에 적용된다.

4. Descendant Selector ( E F )

  E element 하위에 있는 F element에 적용된다.

5. Attribute Selector ( E[att=val] )

  att 속성(attribute)값이 val인 E element에 적용된다.


참고 http://www.w3.org/TR/REC-CSS2/selector.html
       http://developer.mozilla.org/en/docs/Writing_Efficient_CSS

[css] cursor : pointer 를 써라

버튼을 이미지로 처리할 때 다음과 같이 코딩을 한다.

<img src="btn_close.gif" style="cursor:hand;">

그러나 이 코드는 IE에서만 원하는 결과를 얻을 수 있다.


다음과 같이 코드를 작성하라.

<img src="btn_close.gif" style="cursor:pointer;">


다음의 w3c표준 문서를 참고하라.

http://www.w3.org/TR/REC-CSS2/ui.html#propdef-cursor


IE 5.0 이하 버전에서 cursor:pointer가 동작하지 않는다고 합니다.(확인은 안해봤음)

IE 5.0이하 버전을 지원해야 할 경우 다음과 같이 css를 작성하여 사용하면 되겠습니다.

<style type="text/css">
#foo {
cursor:pointer;
cursor:hand;
}
</style>
 

[css] px를 꼭 붙이자

다음과 같이 css를 작성하였다.

input {
  font-size:12px;
  font-family:dotum, 돋움;
  color:#707070;
  border:#d1d1d1 solid 1;
  padding:2;
}

IE에선 잘 나온다. 그러나 Firefox에서 보면 다음과 같이 나온다.

다음과 같이 작성하여야 한다.

input {
  font-size:12px;
  font-family:dotum, 돋움;
  color:#707070;
  border:#d1d1d1 solid 1px;
  padding:2;
}

이제 원하던 모양이 나왔다^^