[CSS3] 선택자 분류, CSS적용하는방법 [CSS3] 선택자 분류, CSS적용하는방법

PROGRAMING/HTML5

파란실버라이트 2012. 2. 21. 11:47

선택자의 종류

용어	내용	CSS에서 적용 방법
태그선택자	HTML 태그에 속성 적용	p, table, body, header, nav 등 HTML 태그
클래스선택자	.(점)으로 시작하는 선택자	.classname(개발자가 이름 지정)
아이디선택자	#(샵)으로 시작하는 선택자	#idname(개발자가 이름 지정)
종속선택자	선택자에 종속된 선택자	p.classname table.classname p#idname (이름을 붙여서 사용)
하위선택자	선택자 내부의 모든 자식 선택자	p a p .classname p #idname (선택자와 선택자 사이에 빈칸)
전체선택자	전체 문서에 영향을 줌	*(별표)
그룹선택자	여러 선택자를 복합적으로 적용할 때	p, .classname, #idname, table (각각의 선택자를 ,(콤마)로 분리)
자식선택자	선택자 바로 밑의 자식 선택자	p > a ul > li (> 기호 사용)
인접선택자	붙어있는 선택자와 선택자에 특정 효과를 줄 때 사용	h1 + p (+ 기호 사용)

CSS 적용방법

1. 인라인 방식

태그에 직접 스타일을 적용하는 방식
ex) <p style="color:red;">...</p>

스타일을 바로바로 확인해 볼수 있다.

하지만 웹표준 이전의 방식과 차이가 없고, 유지보수에 불편하므로 비추하는 방식.

2. 임베디드 방식

헤드에 스타일을 지정해서 적용하는 방식

ex) <head>

h1 {color:#ffc;}

</style>

</head>

단일문서일때, 개발의 편의를 위해서 사용

인라인 방식에 비해 같은 스타일을 여러군데 적용할때 편리.

3. @import 방식

외부에 별도로 .css 파일을 만들어 적용하는 방식
ex) <head>

@import url(main.css);

</style>

</head>

구식 브라우저에서는 인식하지 못한다.

CSS파일 내부에서 다른 CSS파일을 불러올 수 있다.

4. link 방식

외부에 별도로 .css 파일을 만들어 적용하는 방식
ex) <head>

</head>

속도면에서 @import보다 빠르게 로딩된다.

많은 CSS파일을 관리하기에 편하다.

강추하는 방식.

[출처] [CSS3] 선택자 분류, CSS적용하는방법|작성자 꼬꼬냥

[출처] [CSS3] 선택자 분류, CSS적용하는방법|작성자 꼬꼬냥