CSS

http://www.bestwebframeworks.com/css/

http://stylizedweb.com/2008/02/14/10-best-css-hacks/
http://www.bennadel.com/blog/1354-The-Power-Of-ZOOM-Fixing-CSS-Issues-In-Internet-Explorer.htm

 

 

참고자료

CSS float 속성 이해

 

 

CSS 포함 하기

• html 내에

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

• 별도의 파일로

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

 @import - 구버전의 웹브라우져에서는 인식 안 됨

 

 

CSS 유효성 검사기

http://jigsaw.w3.org/css-validator

 

 

선택자

 

여러개의 element 선택

h1, h2 { }

 

class 선택자

p.greentea { } /* class가 greentea인 <p/> 선택 */

.greentea{ } /* class가 greentea인 모든 태그 */

 

id 선택자

#footer { } /* id가 footer인 모든 태그 */

p#footer{}

 

자식(Child) element 선택

div h2{ color:red} /* <div/> 하위에 있는<h2/> 선택  */

.detail p {}   /* class가 "detail"로 지정되어 있는 하위의 <p/> 선택 */

 

상태에 따른 선택자

a:visited{}

a:link {}

상태는 active, hover, link, visited, first-child 등

 

의사(Psdudo) element 선택자

p:first-letter {}

p:first-line {}

 

속성(Attribute) 선택자

img[width] {border:black thin solid;} /* width 속성을 가진 모든 이미지 선택 */

img[height="300"] {border:red thin solid; } /* 값이 300인 height 속성을 가진 모든 이미지 선택 */

image[alt~="flowers"]  {border:red thin solid; }  /* "flowers"라는 단어를 포함하는 alt 속성을 가진 모든 이미지 */

 

형제(Sibling) element 선택자

 h1+p {}  /* <h1> 다음에 오는 <p> 선택 */

 

선택자 결합

div#greentea > blockquote {}  /* <blockquote/>의 부모가 되어야하는 "greentea" id를 가진 <div/> 자손 선택자 */

div#greentea > blockquote p {} /* <blockquote/>의 자손이자 "greentea" id를 가진 <div/>의 자손인 <p/> 선택 */

div#greentea > blockquote p:first-line /* 그 <p/>의 첫 줄 */