반응형
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 태그로 인식하여 적용하게 된다.
반응형
'Web > CSS' 카테고리의 다른 글
| CSS - pre 자동 줄바꿈 적용하기 (0) | 2024.03.10 |
|---|---|
| CSS - Select 비활성화, 기본값 설정 (0) | 2022.05.08 |
| CSS - grid 기본 이해, 2차원 배열하기 (0) | 2022.04.26 |
| CSS - element 요소 정리 (0) | 2022.04.03 |
| Sass(SCSS)란, 사용법 (0) | 2022.03.29 |
