스타일
| 구분 | 입력 방식 | 비고 | |
| 인라인 스타일 | <p style="color: red;"> | 요소에 직접 css스타일을 선언하여 구조와 표현의 분리가 안됨 | |
| 외부 스타일 | <link rel="stylesheet" type="text/css" href="style/default.css"/> | xhtml문서에 link요소를 이용하여 적용하는 방식, 로딩속도도 빠름 | |
| 내부 스타일 | <style type="text/css"> p{color:red;} </style> |
xhtml문서의 head에 직접 선언하는 방식, 로딩속도가 느려질 수 있음 | |
| 외부 스타일 | <style type="text/css"> @import url(style/base.css); </style> |
link방식과 동일하게 연결, 구버전브라우저에서는 읽지 못하므로 권장하지 않음 |
선택자
| 구분 | 구분 | 입력 방식 | 비고 | |
| before, after | p:before{content:"css시작";} p:after{content:"css끝";} |
앞과 뒤에 content속성을 사용하여 지정, | ie6 x | |
| class, id | .lnb{color:red ;} | class는 문서 내에서 여러 번 사용할 수 있는 선택자로, 요소 명과 클래스 명을 구분은 점(.)을 사용-[요소명 생략 가능] |
||
| class, id | #main{color:blue;} | id는 문서 내에서 한번 만 사용할 수 있으며, 요소 명과 아이디 명을 구분할 때는 파운드(#)을 사용[요소명 생략 가능] |
||
| 링크 | a | a:link{}, a:visited{}, a:hover{} a:active{}, a:focus{} |
a:link 링크 걸린 상태, a:visited 방문했던 사이트, a:hover 마우스 올려놓은 상태 a:active 클릭한 상태, a: focus 특정도 값이 같으므로 순서대로 작업 |
|
| 하위선택자 | div p{color:green;} | 특정선택자 안에 포함된 하위요소를 지정 | ||
| 인접 선택자 | h1+h2{color:blue;} | 계층구조로 접근했을 때 처음 등장하는 요소는 형, 뒤에 오는 요소를 동생으로, 형 요소 다음에 오는 동생요소에게만 스타일 적용 |
||
| 선택자 그룹화 | h1,h2,p,.lnb{padding:0;} | 다수의 요소에 동일한 선언을 지정하고자 할 경우 | ||
| 자식 선택자 | > | .parent > p{color:red ; } | 부모요소 아래에 포함된 자식요소에만 스타일 적용 | |
| 전체 선택자 | * | *{color:red;} | 문서의 모든 요소에 지정 | |
| 첫번째 자식요소 | :first-child | p:forst-child{background-color:yellow} | 첫번째 자식요소만 지정하여 스타일 적용 | |
| 첫번째 글자 | :first-letter | p:first-letter | 첫번째 글자만 선택하여 스타일 지정 | |
| 첫번째 줄 | :first-line | p:first-line | 첫번째 줄만 선택하여 스타일 지정 | |
| 마지막 자식 | :last-child | p:last-child | 마지막 자식요소를 선택하여 스타일 지정 | |
| 선택한 요소 제외 | :not( ) | p { color: #000000; } :not(p) {color: #ff0000;} |
선택한 요소만 제외하고 스타일 지정 | |
| index 지정 선택 | p:nth-child(2) | ()안의 index 값을 선택 odd / even |
||
| 체크한 것만 선택 | :checked | input:checked{ height:50px; width: 50px;} |
체크한것만 선택하여 스타일 지정 | |
| 속성 선택자 | input[type="text" |