선택자
- CSS 선택자는 CSS 규칙을 적용할 요소를 정의한다
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: grey;}
</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>
✔️ 상속
- 부모 요소의 속성값이 자식 요소에게 전달되는 것
- https://www.w3.org/TR/CSS22/propidx.html
요기서 표로 쉽게 볼 수 있음!
Full property table
'cursor' [ [ ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit auto yes visual, interactive
www.w3.org
3. id 선택자
- 웹문서 안의 특정 부분 스타일을 적용
- # 기호를 사용해서 id 속성을 가진 요소에 스타일을 적용
CSS
h2 {font-size: 30px; } /* 안녕하세요, 반갑습니다 모두 적용 */
h2#hello { font-size: 20px; } /* 안녕하세요 20 px로 변경 */
#hello {color: pink; } /* 안녕하세요 pink 컬러로 적용 */
HTML
<h2 id="hello">안녕하세요</h2>
<h2>반갑습니다</h2>
예제코드
<!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>id 선택자</title>
<style>
#container{
background-color: gold;
padding: 20px;
width: 600px;
height: 300px;
text-align: center;
margin: 100px auto;
}
#header {
/* 배경색: deepskyblue
가로: 200px
세로: 200px
글자 -> 가운데 정렬
박스 -> 가운데 정렬
*/
background-color: deepskyblue;
width: 200px;
height: 200px;
text-align: center;
margin: 100px auto;
list-style: 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.helo { color: deeppink; } /* 안녕하세요 적용 */
.hello{ color: deepskyblue} /* 안녕하세요 적용 */
p { font-weight: bold;} /* 하이 또만났군요 적용 */
html
<h2 class="hello">안녕하세요</he>
<h2> 반갑습니다 </h2>
<p class = "hello">하이</p>
<p> 또 만났군요 </p>
예제코드
<!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>class선택자</title>
<style>
.redStyle { color: red;}
.blueStyle { color: blue}
#bigText { font-size: 25px;}
.boldStyle{ font-weight: bold;}
</style>
</head>
<body>
<h2 id="bigText">class 선택자</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; }
HTML 구조 확인하기
<head>
<title>테스트</title>
</head>
<body>
<h2>HTML의 구조</h2>
<p>HTML의 <b>구조</b>입니다</p>
</body>
</html>
<html>
<head> <body>
<title> <h2> <p>
테스트 HTML의 구조 HTML의 <b> 입니다
구조
'KDT 수업 > HTML | CSS' 카테고리의 다른 글
| [CSS] CSS의 색상(color) (0) | 2023.03.30 |
|---|---|
| [CSS]선택자의 종류2 (0) | 2023.03.30 |
| [CSS]CSS란? (0) | 2023.03.29 |
| [HTML] day2: 하이퍼링크/책갈피 (0) | 2023.03.24 |
| [HTML] day1 (+ 추가) 파일 경로 작성방법 (0) | 2023.03.24 |