본문 바로가기
Svelte/CSS

CSS 마침표 "."의 의미

by 올엠 2022. 4. 2.
반응형

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 태그로 인식하여 적용하게 된다.

반응형

'Svelte > CSS' 카테고리의 다른 글

CSS - Select 비활성화, 기본값 설정  (0) 2022.05.08
CSS - grid 기본 이해, 2차원 배열하기  (0) 2022.04.26
CSS - element 요소 정리  (0) 2022.04.03
CSS 마침표 "."의 의미  (0) 2022.04.02
Sass(SCSS)란, 사용법  (0) 2022.03.29
MVC - .Net razor how to selection dynamic CSS  (0) 2020.10.28

댓글0