CSS- 선택자

※ 강의를 듣고 제가 이해한 것을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

1. 태그를 선택자로 이용해서 CSS 적용

h1 {
  color: red;
}

p {
  color: blue;
}

이 방식은 CSS를 적용하고 싶은 HTML의 태그를 선택자로 이용해서 적용하는 방식이다.

 

<h1>제목1</h1> <!--red-->
<h1>제목2</h1> <!--red-->
<p>본문1</p> <!--blue-->
<p>본문2</p> <!--blue-->

그런데 제목2에는 다른 색을 적용하고 싶고 본문2에도 다른 색을 적용하려면 태그 선택자만으로는

어렵다. 그래서 보다 정확하게 CSS를 적용하는데 사용할 수 있는 것이 있다.

그것은 아래의 클래스 선택자이다.

 

 

2. 클래스 선택자를 이용해서 CSS 적용

.title {
  color: red;
}

.main-text {
  color: blue;
}


<h1 class="title">제목1</h1> <!--red-->
<h1>제목2</h1>
<p class="main-text">본문1</p> <!--blue-->
<p>본문2</p>

클래스를 선택자로 이용하기 위해선 위 코드와 같이 CSS에 적용하고 싶은 태그들에 속성으로 class를 써주고 속성 값으로 클래스의 이름을 정해주면 된다.

그리고 CSS코드에 선택자로 클래스를 쓸때 .클래스 이름을 쓰면 된다.

여기서 . 기호는 클래스를 뜻한다. 

 

이렇게 태그마다 클래스를 속성으로 써주고 속성 값으로 클래스 이름을 다르게 써주면

같은 태그라도 클래스 이름이 다르기 때문에 CSS를 다르게 적용 시킬 수 있는 것이다.