선택자(Selector)
선택을 해주는 요소
이를 통해 특정 요소들을 선택해 스타일을 적용할 수 있다,
HTML 요소 선택자
CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택 가능
<style>
h3{ color:red;
text-decoration: underline; }
</style>
<body>
<h3>Hello World</h3>
</body>
아이디 선택자
CSS를 적용할 대상으로 특정 요소를 선택할 때 사용한다. # 사용
<style>
#a { color:red;
text-decoration: underline; }
</style>
<body>
<h3 id="a">Hello World></h3>
</body>
클래스(class) 선택자
특정 집단(class) 의 여러 요소를 한 번에 선택할 때 사용한다.
<style>
.a {
color:red;
text-decoration: overline;
}
.a1 {
color:blue;
font-size:30px;
}
</style>
<body>
<h3 class="a">Hello World</h3>
<h1 class="a1">Hello></h1>
</body>
그룹(group) 선택자
여러 선택자를 같이 사용할 때 사용한다.
여러 선택자를 쉼표(,)로 구분하여 연결한다.
<style>
h1 { color:black; }
h1, h2 { text-align:center; }
h1, h2, p { background-color: red; }
</style>
전체 선택자
요소 내부의 모든 요소를 선택한다.
<style>
* { color: red; text-decoration: none; }
</style>
일치 선택자(Basic Combinator)
A와B를 동시에 만족하는 요소 선택
#AB {
margin: 0 auto;
width: 1280px;
}
자식 선택자(Child Combinator)
A의 자식 요소 B를 선택
#A>B {
margin: 0 auto;
width: 1080px;
}
자손 선택자(Descendant Combinator)
A의 자식(자식 등 안에 있는 모든 태그들) 요소 B를 선택
#A B{
margin: 0 auto;
width:1080px;
}
의사 선택자
| :link | 방문하지 않은 링크 일 때 |
| :visited | 방문한 링크 일 때 |
| :hover | 마우스가 올라와 있을 때 |
| :active | 클릭된 상태일 때 |
| :focus | 포커스에 들어와 있을 때 |
-- a 요소가 방문하지 않은 링크
a:link { color:red; }
-- a 요소가 방문한 링크 일 때
a:visited { color: green; }
-- a 요소에 마우스가 올라와 있을 때
a:hover { font-weight: bold; }
-- a 요소가 클릭된 상태 일 때
a:active { color: blue; }
스타일 적용 우선 순위
1. 속성 값 뒤에 !important 가 들어간 속성
2. HTML에서 style 을 직접 지정한 속성
3. #id 로 지정한 속성
4. .클래스 , :추상클래스 로 지정한 속성
5. 태그이름 으로 지정한 속성
6. 상위 객체에 의해 상속된 속성
'Frontend > CSS' 카테고리의 다른 글
| [CSS]Position (0) | 2022.05.30 |
|---|---|
| [CSS] Flexbox (0) | 2022.05.21 |