선택자의 종류
용어 | 내용 | CSS에서 적용 방법 |
태그선택자 | HTML 태그에 속성 적용 | p, table, body, header, nav 등 HTML 태그 |
클래스선택자 | .(점)으로 시작하는 선택자 | .classname(개발자가 이름 지정) |
아이디선택자 | #(샵)으로 시작하는 선택자 | #idname(개발자가 이름 지정) |
종속선택자 | 선택자에 종속된 선택자 | p.classname (이름을 붙여서 사용) |
하위선택자 | 선택자 내부의 모든 자식 선택자 | p a |
전체선택자 | 전체 문서에 영향을 줌 | *(별표) |
그룹선택자 | 여러 선택자를 복합적으로 적용할 때 | p, .classname, #idname, table |
자식선택자 | 선택자 바로 밑의 자식 선택자 | p > a |
인접선택자 | 붙어있는 선택자와 선택자에 특정 효과를 줄 때 사용 | h1 + p |
CSS 적용방법
1. 인라인 방식
태그에 직접 스타일을 적용하는 방식
ex) <p style="color:red;">...</p>
스타일을 바로바로 확인해 볼수 있다.
하지만 웹표준 이전의 방식과 차이가 없고, 유지보수에 불편하므로 비추하는 방식.
2. 임베디드 방식
헤드에 스타일을 지정해서 적용하는 방식
ex) <head>
<style type="text/css" media="screen">
h1 {color:#ffc;}
</style>
</head>
단일문서일때, 개발의 편의를 위해서 사용
인라인 방식에 비해 같은 스타일을 여러군데 적용할때 편리.
3. @import 방식
외부에 별도로 .css 파일을 만들어 적용하는 방식
ex) <head>
<style type="text/css" media="screen">
@import url(main.css);
</style>
</head>
구식 브라우저에서는 인식하지 못한다.
CSS파일 내부에서 다른 CSS파일을 불러올 수 있다.
4. link 방식
외부에 별도로 .css 파일을 만들어 적용하는 방식
ex) <head>
<link href="main.css" rel="stylesheet" type="text/css" media="screen" />
</head>
속도면에서 @import보다 빠르게 로딩된다.
많은 CSS파일을 관리하기에 편하다.
강추하는 방식.
[출처] [CSS3] 선택자 분류, CSS적용하는방법|작성자 꼬꼬냥
[출처] [CSS3] 선택자 분류, CSS적용하는방법|작성자 꼬꼬냥
파란실버라이트
To remember the time when I started learning Silver Light!