Web/CSS

CSS 마침표 "."의 의미

올엠 2022. 4. 2. 19:40
반응형

CSS에서 Style을 지정할 때 "."은 선택자로 특정 스타일을 지정하는 용도로 활용된다.

 . 기호는 class 값을 고유 선택자로 지정할 때 사용된다.

이러한 선택자는 HTML 태그에 고유 식별자를 지정해서 개별적인 디자인 효과를 줄 때 사용하므로 특정 스타일을 구분할 때 효과적이다.

 

. 점 고유 선택자

나, 너, 우리라는 h1 태그를 달고 있는 글자를 출력하고자 한다. 이때 "나"라는 h1 태그에만 빨간색 효과를 주고자 한다면, class를 red를 지정하고, .h1라는 스타일 이름을 생성해 테스트를 해보도록 하자.

<!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>Document</title>
</head>
<body>
    <h1 class="h1">나</h1>
    <h1>너</h1>
    <h1>우리</h1>
</body>
<style>
    .h1 {
        color: red;
    }
</style>
</html>

아래와 같이 고유 식별자로 지정한 .h1를 통해 빨간색이 적용 된다.

 

. 이 없는 건 

바로 html 에 기본적 태그에 사용할 수 있다. 만약 위에 사용하고자 한다면, h1 으로 지정할 경우 h1 전체 태그에 적용할 수 있다. 아래와 같이 h1 태그로 지정하고 화면을 다시 확인해보자.

<style>
    h1 {
        color: red;
    }
</style>

h1 태그 전체에 적용되게 된다.

이는 홈페이지의 전체적인 스타일을 맞추기 위해 사용하는 태그 전체 적용하고자 할 때 유용할 수 있다. 

이처럼 .을 이용해서 고유 식별자로 만들수 있고, .이 없는 경우에는 html 태그로 인식하여 적용하게 된다.

반응형