[CSS 기초] css 선택자 (1) 태그, 클래스, 아이디 선택자

 

안녕하세요 PNcoding입니다 :)

 

이번 포스팅에선 CSS를 처음 사용하기 위해 필수인 선택자에 대해 알아보도록 할게요!

 

---

 

*선택자 란?

HTML의 태그를 선택하는 방법으로 원하는 태그를 선택 후 스타일을 지정할 수 있습니다.

 

 

---

 

1. 태그(tag) 선택자

HTML의 태그 즉, 요소(element)를 선택하는 방법입니다. 

 

/* CSS 코드 */
div {
    width: 100px;
    height: 100px;
    background-color: salmon;
}

<!-- HTML코드 -->
<div>div 태그 1</div>
<div>div 태그 2</div>
<div>div 태그 3</div>

 

원하는 태그명을 작성 후 { } (중괄호)를 열어 CSS 속성을 작성을 하면 선택한 태그에게 스타일을 적용할 수 있습니다.

이때 body내의 선택한 모든 태그가 동일한 스타일이 적용됩니다.

 

태그 선택자 결과 화면

---

 

2. 클래스(class) 선택자

요소(element)에 class 속성을 부여하여 동일한 class명을 가진 요소를 선택합니다.

 

/* CSS 코드 */
.box {
    border: 5px solid black;
  }

<!-- HTML 코드 -->
<div class="box">div 태그 1</div>
<div>div 태그 2</div>
<div class="box">div 태그 3</div>

 

클래스 선택자는 태그 선택자와 다르게 선택을 할 땐 반드시  .  을 붙여 선택합니다.

예시)

.클래스명{ }

 

class 선택자 결과 화면

 

결과를 확인하면 클래스명이 작성 되지 않은 2번 요소를 제외한 1번, 3번 요소만 스타일이 적용된 결과를 볼 수 있습니다.

이로서 클래스 선택자는 클래스명으로 동일한 명의 요소만 스타일이 적용 된 걸 알 수 있습니다.

 

 

---

 

3. 아이디(id) 선택자

요소(element)에 id 속성을 부여하여 id명을 가진 요소를 선택합니다.

 

/* CSS 코드 */
#box_2 {
    font-size: 20px;
    color: white;
}

<!-- HTML 코드 -->
<div class="box">div 태그 1</div>
<div id="box_2">div 태그 2</div>
<div class="box">div 태그 3</div>

 

아이디 선택자는 클래스 선택자와 비슷하지만 반드시 선택자명 앞에  #  을 붙여 사용합니다.

예시)

#아이디명{ }

아이디 선택자 결과 화면

 

결과 화면을 확인하면 아이디 선택자가 작성된 두번째 요소가 스타일이 적용된 걸 볼 수 있습니다.

아이디 선택자와 클래스 선택자는 . (마침표) 및 #을 작성하는게 다를 뿐 두 선택자는 비슷하게 보일 수 있습니다.

 

하지만 아이디 선택자를 사용할 시 주의하셔야 할 점이 있습니다.

두가지 차이점을 알아 보겠습니다.

 

1. 클래스 선택자

• 클래스명은 같은 이름으로 중복 사용 가능
• 같은 클래스명을 한번에 선택 가능

2. 아이디 선택자

• 아이디명은 body 내부에서 유일한 이름으로 사용해야 되며, 아이디명은 중복 사용 불가
• 클래스 선택자 보다 우선순위가 높음

따라서 두가지 차이점을 고려하여 선택자를 사용하는 것이 중요합니다.

 

 

---

이렇게 CSS 의 3가지 선택자 종류에 대하여 알아 보았습니다.

 

다음 포스팅에선 추가적인 선택자와 사용 방법에 대해 알아보도록 하겠습니다 :)