https://coding-diary100.tistory.com/45
CSS_ 기본 개념과 문법
CSS(Cascading Style Sheet) 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어 CSS 문법 HTML 문서 사이에 요소를 사용하여 적용하는 방법 각각 페이지 마다
coding-diary100.tistory.com
class 선택자
-특정 집단의 요소를 한번에 스타일을 적용
-.기호를 사용해서 같은 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>
HTML 코드
<!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: 60px;}
.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>
'코딩공부 > HTML,CSS,JavaScript' 카테고리의 다른 글
| CSS_속성 선택자 (2) | 2023.03.28 |
|---|---|
| CSS_자식,자손,형제 선택자 (0) | 2023.03.28 |
| CSS_id선택자 (0) | 2023.03.28 |
| CSS_상속 (0) | 2023.03.28 |
| CSS_요소 선택자 (0) | 2023.03.28 |
