css 관련메모2
Sec03.zipcss 임포트 소스
예시1)헤더에서 불러오기
<link rel="stylesheet" type="text/css" href="mycss" />
예시1)스타일내에서 불러오기
<style type="text/css">
@im★port
url(style/base.css);
</style>
css내 문자셋팅 선언(charset)
@charset "euc-kr";
@charset "utf-8";
css의 선택자 유형
타입선택자
p{}
h1{}
table{}
전체선택자(유니버셜선택자)
* { color : blue ; font-size : 24px ; }
class & id 선택자
p .note { }
ul #gnb { }
속성선택자(ie6에서 적용안됨)
img 요소증에 title속성이 있는 요소만 적용됨
img[title] { background-color : #ffccff ; }
a 요소증에 target="_blank"속성이 있는 요소만 적용됨
a[target="_blank"] { background-color : #ffccff ; }
a 요소중에서 class속성값이 공백문자로 구분하여 여러 개 있는경우
a[class~="new"] { background-color : #ffccff ; }
a 요소중에 class속성값에 하이픈(-)이 포함된경우
a[class|="new"] { background-color : #ffccff ; }
a 요소중에 href 속성의 값에 http로 시작하는 경우
a[class|="new"] { background-color : #ffccff ; }
a 요소중에 href 속성의 값에 www가 포함되는 경우
a[class|="new"] { background-color : #ffccff ; }
가상 요소와 가상클래스 (첨부파일참조)
ex)
.note2 p:first-line {
color:green; } 첫줄
.note3 p:first-letter {
font-size:20px; color:green; font-weight:bold; }첫글자
p:before {
content:"문단시작";} 문단 블릿위치
p:after {
content:"문단종료";} 문단 끝위치
.child p:first-child {
color:red; }첫번째 타입 전체
링크가상클래스 (순서틀리면 안됨 LoVe HAte)
a { text-decoration :
none ; }
a:link { color : blue ; }
a:visited { color : purple ;
}
a:hover{ color : orange ; }
a:active{ color : red ; }
a:focus {
background-color : #ffc ; }
하위선택자
>공백을 통해 부자관계를 구분한다.
ex)#navigation li{color:blue;}
선택자 그룹화
> ","로 구분해서 넣어주면 된다.
ex)h1, #link{ color:red;}
자식선택자(ie6에서
적용안됨)
>부모의 직접적인 자식에게만 적용이 되고 > 로
구분한다.
ex) #navigation > li{border:1px solid red;}
인접형제선택자
h1 다음에 h2가 올경우에만 허용되는 선택자
※ 중간에 다른 요소가 껴있으면 적용안됨
h1 + h2 { color : blue ;}
css의 색상
키워드 색상 종류
aqua #00FFFF
블랙
블루
fuchsia #FF00FF
gray
purple #800080
lime #00ff00
marroon #800000
navy #000080
olive #808000
그린
오렌지
레드
실버
teal #008080
화이트
옐로우
표현형식
1. red (카워드방식)
2. #342353 (16진수)
3. color:rgb(255,0,0); (rgb 형식-10진수)
4. color:rgb(0%,0%,100%); (백분율형식)
줌(zoom)
이미지나 각종요소들 정비율로 키우거나 줄이는기능
(익스와 사파리 크롬지원 / 사파리 오페라 지원안함)
ex)
img{zoom:1.5}