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

개발러 L의 뻔fun한 코딩

css 클래스 셀렉터에 대하여 알아보기