1. CSS 선택자
1) HTML 선택자
특정한 HTML태그를 선택해서 직접 적용한다.
<head>
<title>CSS3 Selector Basic Page</title>
<style>
/* h1 태그의 color 속성에 red 키워드를 적용합니다. */
h1 { color: red; }
/* p 태그의 color 속성에 blue 키워드를 적용합니다. */
p { color: blue; }
</style>
</head>
<body>
<h1>여기가 레드</h1>
<p>여기가 블루</p>
</body>2) 전체 선택자
HTML 페이지 내부의 모든 태그를 선택한다.
<head>
<title>CSS3 Selector Basic Page</title>
<style>
* { color: red; }
</style>
</head>
<body>
<h1>h1도 레드</h1>
<p>p태그도 레드</p>
</body>
3) ID 선택자
CSS를 적용할 대상으로 특정 요소를 선택할 때 사용한다. 이때 #을 써서 구분해 준다.
<head>
<title>CSS3 Selector Basic Page</title>
<style>
/* id 속성으로 rint를 가지는 태그의
color 속성을 red 키워드로 적용합니다. */
#rint { color: red; }
</style>
</head>
<body>
<h1 id="rint">CSS3 Selector Basic</h1>
<h2 id="rint">CSS3 Selector Basic</h2>
<h3 id="rint">CSS3 Selector Basic</h3>
</body>
4) CLASS 선택자
특정한 클래스의 여러 요소를 한 번에 선택할 때 사용한다. 이때 .을 써서 구분해 준다.
<head>
<title>CSS3 Selector Basic</title>
<style>
.item { color: red; }
.header { background-color: blue; }
</style>
</head>
<body>
<h1 class="item header">Lorem ipsum</h1>
</body>
2. 속성 선택 문법 기호
속성 선택자는 특성한 속성을 가진 태그를 선택할 때 사용한다
기본 속성 선택자 : 특정한 속성의 존재 유무와 속성 값을 판별할 때 사용
1) 선택자[속성~=값] : 속성을 포함 하며 value를 포함하는 문서객체를 선택
2) 선택자[속성^=VALUE] : 속성을 포함하며 속성 값이 value로 시작하는 요소 선택
3) 선택자[속성$=값] : 속성을 포함하며 속성 값이 value로 끝나는 요소 선택
4) 선택자[속성*=값] : 속성을 포함하여 속성 값이 정확히 value이거나 value를 포함해 가 포함되는 요소 선택
3. 결합 선택자
요소간의 계층 관계를 결합하여 특정 요소나 하위 요소를 선택한다.
1) 후손 선택자
선택자A 선택자B : 선택자A의 후손에 위치하는 선택자B를 선택
id 속성으로 header를 가지는 태그의 후손 위치에 있는 h1태그의 color속성을 red로 적용
#header h1 { color: red; }
2) 자손 선택자
선택자A > 선택자B : 선택자A의 자손에 위치하는 선택자B를 선택
#header > h1 { color: red; }
4. 동위 선택자
동위 선택자는 동위 관계에서 뒤에 위치한 태그를 선택할 때 사용하는 선택자
1) 선택자A + 선택자B : 선택자A 바로 뒤에 위치하는 선택자B를 선택
#A+B{
margin: 0 auto;
width: 1080px;
}
2) 선택자A ~ 선택자B : 선택자A 뒤에 위치하는 선택자B를 선택
#A~B{
margin: 0 auto;
width: 1080px;
}
선택자 우선 순위
!important > 인라인 스타일 > 아이디 선택자 > 클래스/속성/가상 선택자 > 태그 선택자 > 전체 선택자
참고자료 : 모던웹을위한 HTML5 + CSS3 입문
'🎨 Web_Front end > HTML & CSS3' 카테고리의 다른 글
| HTML 시멘틱 태그와 CSS포지션 속성 (0) | 2023.10.26 |
|---|---|
| 포지셔닝(float, overflow, clear) (0) | 2023.10.25 |
| HTML 인라인 요소, 블록 요소, 인라인블록 요소 (0) | 2023.10.25 |
| CSS 박스모델 (0) | 2023.10.24 |
| HTML 핵심 태그와 CSS의 핵심이론 (0) | 2023.10.23 |
