[CSS 문법 ] 선택자 사용방법, 선택자 우선순위

안녕하세요 멀티 개발자가 되고 싶은 수호입니다.  오늘은  CSS에서 선택자와 결합자의 종류를 알아보겠습니다. 
어려운 내용을 덜어드리면서 최대한 쉽게 설명해볼려고 노력중입니다ㅠㅠ 이해해주셨으면 합니다. 🫢🫢

선택자의 종류 중 대표적인 3가지를 소개해보겠습니다. 
우선 선택자의 대한 개념부터 살펴보시죠


선택자란?🤔🤔
웹 페이지에서 특정 요소를 선택하여 스타일을 입히는 것을 말합니다. 말 그대로  "선택한 요소에다 스타일을 적용시킨다" 라는 것이죠. 

태그 선택자, 클래스 선택자, id 선택자로 세 가지 종류가 있습니다. 각각 선택자 사용방법이 다르기 때문에 예시 코드를 보여드리면서 설명하겠습니다. 

1. 태그 선택자
태그 선택자란? 🤔🤔
HTML 태그 이름을 직접 사용하여 해당 태그의 모든 요소를 선택합니다. 

태그 선택자 예시 코드

<style>
    a {
       backgroundcolor : red;
    }
</style>

예시 코드를 해석하면  HTML <a>의 해당하는 요소의 스타일을 적용시키는데 배경색을 red로 준다는 것입니다.
태그 선택자는 해당 <태그 이름>을  작성하고 스타일을 적용시킵니다. 

2. 클래스 선택자

클래스 선택자란?🤔🤔
HTML 요소의 class 속성 값을 사용하여 여러 요소를 선택합니다.

클래스 선택자 예시 코드

<style>
    .content {
        display : block;
    }
</style>

이 코드에서는 해당 클래스 값이 content인 요소에 스타일을 적용한다는 것입니다. 
태그 선택자와 달리 선택자 앞에 .(점)을 붙인 것을 볼 수 있습니다. 클래스 선택자 사용방법은 선택자 앞에  .(점)을 붙이고 선택자 이름을 작성하시면 됩니다.



3. id 선택자

id 선택자란? 🤔🤔
HTML 요소의 id 속성 값을 사용하여 해당 요소 하나만 선택합니다.

<style>
    #content {
        display : block;
    }
</style>

id 선택자는 선택자 앞에 # 기호를 붙여서  스타일을 적용시킵니다. 
여기서 클래스 선택자와 달리 id 선택자는 고유의 값만 적용시키기 때문에 주의해야겠죠?  

태그 선택자와 달리 클래스 선택자와 id선택자는 공통으로 값이 할당되어야 한다는 것입니다. 만약 해당 속성의 값이 할당되지 않다면 아무리 요소를 선택한다 하더라도 스타일 적용이 안된다는 것이죠. 

이렇게 선택자의 종류는 세 가지 말고도 다양한 선택자가 있습니다.

선택자 우선순위

다른 언어에서도 우선순위가 있듯이 선택자에서도 우선순위가 있습니다. 

우선순위 순서 🚩

 태그 선택자 < 클래스 선택자 < 아이디 선택 < 인라인 스타일  < !important 선언 


스타일을 작성할 때 가장 밑에 작성한 스타일이 우선적으로 적용된다.

!important 선언🤔
!important 선언은  값 뒤에 정의하게 되면 우선순위에서 가장 높게 설정할 수 있다.

인라인 스타일 🤔
인라인 속성으로 스타일을 적용하게 되면 가장 우선순위가 높다. 그리고 가독성이 많이 떨어집니다. 


그 외 선택자와 다중 클래스

### 자식 선택자
> 선택자의 자식의 요소의 스타일을 정의한다.
> 예) class="클래스"
> 예) .클래스 img

## 형제 선택자
> 선택자의 클래스를 다중으로 가지고 있을경우 스타일 적용
> 예) class="클래스 클래스2"
> 예) .클래스.클래스2 {여기에 작성한 스타일}

### 다중 클래스 
> 클래스 정의할 때 클래스의 옆에 문자열을 한칸 띄어서 작성한다.
> 예) class="box (여기에 클래스명 작성)"
> 예) class="클래스 클래스2"

/* 자식 선택자 */
.box img{
    width: 50%;
    display: block;
    margin: 0 auto;
    margin-top: 50%;
    transform: translateY(-50%); /* 요소의 위치를 이동시킬때*/
}

/* 형제 선택자 */
 .temp.box-content-01 {
    background-color: orange;
}
<!-- 다중 클래스  --> 
<div class="box box-content-01 temp">

다중 클래스란?
위 HTML 코드에서 div 요소에 box, box-content-01, temp라는 세 개의 클래스가 부여되었습니다. 이렇게 하나의 요소에 여러 개의 클래스를 부여하는 것을 다중 클래스라고 합니다.

이상으로 선택자의 종류와 우선순위 및 다중 클래스에 대해 알아보았습니다.  유용한 정보 되셨으면 좋겠습니다. 감사합니다.