CSS Selectors
선택자. 누굴 선택할 것인가?
HTML 요소를 선택하여 스타일을 적용할 수 있도록 한다
- 전체 (" * ") 선택자
- 요소( tag ) 선택자
- 클래스 (class) 선택자
- 아이디 (id) 선택자
- 속성(attr) 선택자
▷기본 선택자
- 전체 (" * ") 선택자
모든 태그, 모든 text 전체를 선택하는 것
<style>
* {
color: rgb(33, 151, 59);
}
</style>
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
color: rgb(33, 151, 59);
}
</style>
</head>
<body>
<h1> h1은 여기예요 </h1>
<h2> h2은 여기예요</h2>
<h3> h3은 여기예요 </h3>
<h4> h4은 여기예요 </h4>
<p>목록</p>
<ul>
<li>하늘</li>
<li>바다</li>
<li>산
<ol>
<li>나무</li>
<li>꽃</li>
<li>풀</li>
</ol>
</li>
</ul>
<p>Lorem, <span>ipsum</span> dolor.</p>
</body>
</html>- 요소( tag ) 선택자
tag 속성에 대한 선택을 하는 것
h1~h6, p 같은거
<style>
h2 {
color: rgb(238, 200, 77);
}
</style>문서 전체에 있는 h2 tag를 선택하겠다.
<style>
h3,
h4 {
color: rgb(33, 151, 59);
}
</style>요소 선택자는 이렇게 콤마( ,) 를 사용해서 이어갈 수 있다.
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2 {
color: rgb(238, 200, 77);
}
</style>
</head>
<body>
<h1> h1은 여기예요 </h1>
<h2> h2은 여기예요</h2>
<h3> h3은 여기예요 </h3>
<h4> h4은 여기예요 </h4>
<p>목록</p>
<ul>
<li>하늘</li>
<li>바다</li>
<li>산
<ol>
<li>나무</li>
<li>꽃</li>
<li>풀</li>
</ol>
</li>
</ul>
<p>Lorem, <span>ipsum</span> dolor.</p>
</body>
</html>
'WEB > CSS_ concepts' 카테고리의 다른 글
| [CSS] CSS 기본 선택자 _ id 선택자 샾(#) , attr 선택자 (0) | 2024.03.10 |
|---|---|
| [CSS] CSS 기본 선택자 _ Class 선택자 쩜(.) / 권장되는 스타일 구조 (color 설정) (0) | 2024.03.10 |
| [CSS] CSS <style> </style>적용 방법 Inline, Internal, External (0) | 2024.03.10 |
| [CSS] CSS 구문 (0) | 2024.03.10 |
| [CSS] CSS란? (0) | 2024.03.10 |