선택자 기초
- 선택자(Selector): 스타일을 적용하고자 하는 HTML 요소를 선택하는 역할 ex) h1, p, span, div, a 등등 일반적인 태그
- 여러개의 선택자를 ,를 이용하여 스타일을 한번에 지정 가능
단순 선택자
-
타입 선택자 (Type Selector): 해당 태그를 가지는 모든 요소에 스타일을 적용
<style> p { color:red;} </style> -
아이디 선택자 (Id Selector)
- Id로 스타일을 적용. 해당 Id 하나에 적용(Id는 단 하나)
- #main { color: red;}
- 아이디(Id): HTML 문서 내에서 동일한 아이디는 존재할 수 없음. 다른 요소와 구분되는 점을 만들어줌
<head> <style> #snow{ color:red;} </style> </head> <body> <h2 id="snow">안녕하세요.</h2> </body> -
클래스 선택자(Class Selector): 클래스 이름으로 스타일을 적용. 같은 클래스 이름이면 모두 적용.
- 클래스(Class): 비슷한 특징을 갖는 요소를 지정하여 묶을 수 있음. 여러 번 사용이 가능
- .main { color: red;}
<head> <style> .contents{ font-size: 24px;} </style> </head> <body> <p class="contents">안녕하세요.</p> <p class="contents">반갑습니다.</p> </body> -
전체 선택자(Universal Selector)
- 모든 요소에 스타일을 적용. 모든 요소에 적용하기 때문에 속도 저하 가능성 있음.
- *{color: red;}
<style> * { color: red;} </style> -
속성 선택자(Attribute Selector)
- 특정 속성을 소유하는 모든 요소에 스타일을 적용
- 선택자[속성명="속성값"] { color: red;}
<head> <style> a[target="_blank"] { color: red;} </style> </head> <body> <a href="#" target="_blank">구글 새 창</a> </body>
복합 선택자
-
자식 선택자(Child Selector)
-
선택자A의 모든 자식 중 선택자B와 일치하는 요소 선택
-
선택자A > 선택자B { color: red;}
-
-
후손 선택자(Descendant Selector)
-
선택자A의 모든 후손 중 선택자B와 일치하는 요소 선택
-
선택자A 선택자B { color: blue;}
-
Pseudo 클래스
- 요소의 특별한 상태를 지정할 때 씀
- :link :방문하지 않은 링크일 경우
- :visited : 방문한 링크일 경우
- :hover: 요소에 마우가 올라와 있을 경우
<head>
<style>
a:link { color: yellow;}
a:visited { color: green;}
a:hover { background-color: blue;}
</style>
</head>
<body>
<a href="#">구글 새 창</a>
</body>
병아리 삐약삐약