CSS 클래스 선택자
class 라는 전역 속성을 태그에 설정하여, 스타일 시트를 적용하기 위해서는 클래스 선택자를 사용해야 합니다.
그럼 예제를 통해서 살펴보도록 하겠습니다.
먼저, HTML 코드 중 span 과 p 태그의 속성으로 class 를 설정합니다. class 뒤에 값은 개발자가 원하는 이름을 설정합니다. span 과 p 태그에 동일한 class 이름이 설정되었죠.
[index.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example HTML Page</title>
<link rel="stylesheet" href="/CSS/main.css">
</head>
<body>
<div>
<h1>This is a <span class="atom">heading</span></h1>
<p class = "atom">This is a paragraph.</p>
</div>
</body>
</html>HTML 로 골격 즉 구조를 잡았으니 이제는 CSS 로 꾸며봅시다.
[main.css]
/* CSS 코드 */
.atom{
color : orangered;
}CSS 코드에서는 바로 클래스 선택자를 사용했습니다.
클래스 선택자의 문법 은 이러합니다.
.클래스이름{
/*스타일 지정 */
}
위 코드에서도 .atom 으로 클래스 선택자를 선언하고 스타일을 지정 합니다.
해당 스타일 시트는 HTML 에서 클래스 속성을 가진 span 과 p 요소들에 적용이 됩니다.
그 결과 하기와 같은 결과 값이 나옵니다.
HTML 태그 전역속성인 class 를 사용해서, 특정 요소들에 스타일 시트를 적용할 수 있는 방법이
바로 클래스 선택자 를 사용하는 것 입니다.
오늘은 기본 선택자 중 클래스 선택자를 알아보았습니다.
감사합니다.
반응형
'앱 만들기 > CSS' 카테고리의 다른 글
| CSS 기본 선택자 네가지 (0) | 2023.06.06 |
|---|---|
| CSS ID 선택자 란? (1) | 2023.06.05 |
| CSS 타입 선택자(Type selector) 란? (2) | 2023.06.02 |
| CSS 전체선택자 란? (2) | 2023.06.01 |
| 브라우저 스타일 초기화 하는 방법 (2) | 2023.05.30 |
댓글