- 전체(91)
- html5(1)
- web accessibility(11)
- Cross Browsing(20)
- html basic(7)
- css basic(23)
- meta(2)
- form(12)
- table(2)
- menu(2)
- box(1)
- button(1)
- font(1)
- etc(8)
- CSS 애니메이션
CSS 선택자 형식(CSS Selector)
2012.07.05 18:22:09
1. *
1 |
* { margin : 0 ; padding :o} |
페이지에 있는 모든 단일 요소를 타겟, 절대적인 요소에 해당
자식 선택자와 함께 사용할 수 있다.
1 |
#container *
{ border :
1px solid
black ;
} |
가능 브라우저: IE6+, FireFox, Chrome, Safari, Opera
2.
#X
1 |
#container
{ width :
960px ; margin : auto } |
ID Selector
중복사용 불가능
가능 브라우저: IE6+, FireFox, Chrome, Safari, Opera
3. .X
1 |
.error{ color : red } |
Class Selector
중복사용 가능하여 여러 요소를 타겟팅
가능 브라우저: IE6+, FireFox, Chrome, Safari, Opera
4. X Y
1 |
li a { text-decoration : none } |
선택자 다음의 후손 선택
선택자 다음에 오는 후손 선택자에 특별히 style을 적용 할 때 사용
가능 브라우저: IE6+, FireFox, Chrome, Safari, Opera
5. X
1
2 |
a { color : red ; } ul { margin-left : 0 ;
} |
태그에 타켓팅
문서의 같은 태그 모두에 style이 적용
가능 브라우저: IE6+, FireFox, Chrome, Safari, Opera
6. X:visited and
X:link
1
2 |
a:link {
color :
red ; }
a:visited {
color :
purple ;
} |
가능 브라우저: IE7+, FireFox, Chrome, Safari, Opera
7. X + Y
1 |
ul + p {
color :
red ;
} |
인접 선택자
바로 앞 태그가 ul인 p태그에만 style이 적용
가능 브라우저: IE7+, FireFox, Chrome, Safari, Opera
8. X > Y
1 |
div#container >
ul { border :
1px solid
black ;
} |
#container > ul Selector의 경우
댓글 0
댓글 쓰기 권한이 없습니다.
51 | accesskey | 2014.11.14 |
50 | Caption을 제어하는 방식을 | 2014.11.11 |
49 | display:none과 visibility: hidden | 2014.11.11 |
48 | [tip]ie7에서 caption 인식 밀리는 현상 발생 | 2014.11.11 |
47 | 게시판 목록에서 제목항목 자동 ...로 말줄임 | 2014.11.07 |
46 | li의 list style type | 2014.11.06 |
45 | box-sizing | 2014.11.05 |
44 | Cufon 사용방법 | 2014.07.01 |
43 | font:11px/18px | 2014.06.23 |
42 | temp | 2014.06.20 |
41 | 파일 | 2014.06.20 |
40 | CSS 폰트 단위 | 2013.09.02 |
> | CSS 선택자 형식(CSS Selector) | 2013.08.02 |
38 | CSS3로 그라데이션 이미지 만들기 | 2013.08.02 |
37 | text-shadow 크로스브라우징 | 2013.02.25 |
36 | 브라우저별 CSS | 2013.02.25 |
35 | 그라데이션 주기 | 2012.08.06 |
34 | Image Sprite 기법이란 무엇입니까? | 2013.08.02 |
33 | IR(Image Replacement) 기법이란 무엇입니까? | 2013.08.02 |
32 | 이미지에 포함된 텍스트의 양이 너무 많을때 | 2013.08.02 |