728x90
반응형
SMALL
1. 전체 선택자
- 스타일을 모든 요소에 적용
- * 기호를 사용해서 표현
- 너무 많은 요소가 있는 HTML 문서에 사용할 경우 클라이언트에 부하를 줄 수 있음
* { 속성명1: 속성값1; 속성명2: 속성값2; ...}📍 개별적으로 적용한 스타일은 전체 선택자에 적용한 스타일보다 우선순위가 높음!
<!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>전체 선택자</title>
<style>
h2 {color: deepskyblue; font-size: 50px; }
* {color: gray;}
</style>
</head>
<body>
<h2>전체 선택자</h2>
<ol>
<li>스타일을 모든 요소에 적용 </li>
<li>* 기호를 사용해서 표현</li>
<li>너무 많은 요소가 있는 HTML 문서에 사용할 경우 클라이언트에 부하를 줄 수 있음</li>
</ol>
</body>
</html>
2. 요소 선택자
- 특정 요소가 쓰인 모든 요소에 스타일을 적용
<!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>요소 선택자</title>
<style>
h2 {font-size: 50px; }
p {color: deepskyblue;}
</style>
</head>
<body>
<h2>요소 선택자</h2>
<p>특정 요소가 쓰인 모든 요소에 스타일을 적용함</p>
<p><span>span 요소</span></p>
<p><strong>strong 요소</strong></p>
<p><ins>ins 요소</ins></p>
<p><mark>mark 요소</mark></p>
</body>
</html>
3. id 선택자
- 웹 문서만의 특정 부분 스타일을 적용
- # 기호를 사용해서 id 속성을 가진 요소에 스타일을 적용
[CSS]
h2 { font-size: 30px;} /* 안녕하세요와 반갑습니다 모두 적용 */
h2#hello { font-size: 20px} /* h2 태그이면서 id가 hello 인 안녕하세요가 20px로 변경됨 */
#hello {color: pink;} /* 안녕하세요를 pink 컬러로 적용*/
[HTML]
<h2 id="hello">안녕하세요</h2>
<h2>반갑습니다</h2><!DOCTYPE html>
<html lang="en">
<head>
<title>id 선택자</title>
<style>
#container {
background-color: gold;
padding: 20px;
width: 600px;
height: 200px;
text-align: center;
margin: 100px auto; /*위아래를 100px 떨어지게하고 양쪽을 같은 크기만큼 떨어트림 -> 가운데정렬*/
}
#header {
background-color: deepskyblue;
width: 200px;
height: 200px;
text-align: center;
margin: 100px auto;
line-height: 200px; /*전체높이만큼 주면 가운데로 옴*/
}
</style>
</head>
<body>
<h2>id 선택자</h2>
<div id="container">div 첫번째 영역</div>
<div id="header">div 두번째 영역</div>
</body>
</html>
4. class 선택자
- 특정 집단의 요소를 한번에 스타일을 적용
- . 기호를 사용해서 같은 class 이름을 가진 요소에 스타일을 적용
[css]
h2 { font-size: 20px;} /*안녕하세요,반갑습니다 적용*/
h2.hello { color: deeppink;} /*안녕하세요 적용*/
.hello { color: deepskyblue;} /*안녕하세요, 하이 적용*/
p { font-weight: bold;} /*하이, 또 만났군요 적용*/
[html]
<h2 class="hello">안녕하세요</h2>
<h2>반갑습니다</h2>
<p class="hello">하이</p>
<p>또 만났군요</p><!DOCTYPE html>
<html lang="en">
<head>
<title>class 선택자</title>
<style>
.redstyle {color:red;}
.bluestyle {color: blue}
#bigText {font-size: 40px}
.boldstyle {font-weight: bold;}
</style>
</head>
<body>
<h2 id="bigText">클래스 선택자</h2>
<p ><span class="redstyle boldstyle">클래스 선택자</span>는 특정 집단의 요소를 한번에 스타일을 적용합니다. <span class="redstyle">. 기호</span> 를 사용해서 <span class="bluestyle"> 같은 class 이름</span>을 가진 요소에 스타일을 적용합니다.</p>
</body>
</html>
5. 그룹 선택자
- 여러개의 요소를 나열하고 , 로 구분하여 스타일을 적용
h2, p { text-align: center; }<!DOCTYPE html>
<html lang="en">
<head>
<title>그룹 선택자</title>
<style>
h2, p, h3, ul {text-align: center;} /*여러 요소를 묶음*/
h2 {color: aqua; font-size: 50px;}
li {display: inline-block; margin-right: 40px; font-weight: bold; color:deeppink;}
</style>
</head>
<body>
<h2>그룹 선택자</h2>
<p>여러개의 요소를 나열하고 , 로 구분하여 스타일을 적용</p>
<h3>선택자의 종류</h3>
<ul>
<li>전체 선택자</li>
<li>요소 선택자</li>
<li>id 선택자</li>
<li>class 선택자</li>
<li>group 선택자</li>
</ul>
</body>
</html>
728x90
반응형
LIST
'Web > CSS' 카테고리의 다른 글
| [CSS] TEXT 설정 - 1️⃣ 글자 색상, 글자 간격, 띄어쓰기 간격 (0) | 2023.03.30 |
|---|---|
| [CSS] CSS의 컬러 - 색상이름, RGB 색상값, 16진수 색상값 (0) | 2023.03.30 |
| [CSS] 하이퍼링크 스타일링 설정하는 법 (0) | 2023.03.30 |
| [CSS] 선택자의 종류 - 2️⃣ 자식 선택자, 자손 선택자, 형제 선택자, 속성 선택자, 가상 선택자 (0) | 2023.03.30 |
| [CSS] CSS란? & HTML에 CSS 적용하는 법 (0) | 2023.03.30 |
