반응형
css 클래스 셀렉터에 대하여 알아보기
네 안녕하세요, 이번 포스팅에서는 클래스 셀렉터에 대하여 알아보도록 하겠습니다.
html에서 클래스는 id와 함께 기능적인 부분을 구현할 때 자주 쓰이는 기능입니다.
이번 시간에는 그러한 기능을 가진 클래스를 이용하여 스타일을 적용하는 방법에 대해 알아볼 것입니다.
그럼 시작하도록 하겠습니다.
1. class 셀렉터 : '.' 이용
class 셀렉터는 html 태그에서 사용하는 class 속성과 연결을 합니다.
그래서 class 속성을 사용해서만 연결을 지을 수 있다는 특징이 있습니다.
그리고 class 속성 셀렉터를 작성을 할 때는 본인이 작성하고자 하는 클래스의 이름 앞에 '.'을 붙여서 짓습니다.
그럼 간단한 예제와 함께 같이 봅시다.
<!DOCTYPE html>
<html lang="ko">
<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>
.warning { /* class 셀렉터 */
color : red;
}
body.main { /* class 셀렉터 */
background : aliceblue;
}
</style>
</head>
<body class="main">
<h3>Web Programming</h3>
<hr>
<div>
<div>2학기 <strong>학습 내용</strong></div>
<ul>
<li>HTML5</li>
<li><strong>CSS</strong></li>
<li>JAVASCRIPT</li>
</ul>
<div class="warning">60점 이하는 F!</div>
</div>
</body>
</html>
반응형
이렇게 간단한 코드를 하나 작성을 했습니다.
보시면 제가 '.warning', 그리고 body 태그에 쓰기 위해서 'body.main'이라고 쓴 것을 보실 수 있을 겁니다.
굳이 body 태그에 붙인다고 body를 쓸 필요는 없지만,
이렇게 써도 된다는 것을 보여드리려고 작성을 했습니다.
하지만 이러한 방법보다는 위에 있는 '.warning'과 같은 방식을 더 많이 쓰며 일반적입니다.
그럼 결과 화면은 어떻게 나왔는지 한 번 봅시다.
이렇게 main 클래스와 warming 클래스가 각각 적용이 되어서 잘 나온 것을 보실 수가 있습니다.
여기까지 클래스 셀렉터에 대하여 알아보았습니다.
다음 포스팅에서는 id 셀렉터에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사드립니다~
반응형
'html, css, 자바스크립트 > css' 카테고리의 다른 글
css 전체 셀렉터에 대하여 알아보기 (0) | 2023.03.13 |
---|---|
css id 셀렉터에 대하여 알아보기 (0) | 2023.03.13 |
css 태그 이름 셀렉터에 대하여 알아보기 (0) | 2023.03.13 |
css 규칙에 대하여 알아보기 (0) | 2023.03.13 |
css link 태그 이용하여 외부 스타일 시트 불러오는 방법 알아보기 (2) | 2023.03.13 |
댓글