[CSS] Selector, Class와 Id의 차이점

HTML과 CSS의 역할(관심사)을 구분하게 되면 구조를 파악하기도 쉬워지고, 수정하기도 편리해진다는 장점이 있다. 

이렇게 파일을 구분하게 되면 HTML의 어떤 부분을 CSS에서 지목해야하는 상황이 생길 수밖에 없다.

 

이 때 필요한 개념이 바로 Selector이다. Selector을 사용하면 코드도 간결해지고, 나중에 속성들을 한번에 바꾸기도 편하다. '중복제거'는 모든 언어에서 마찬가지로 핵심적인 요소이기 때문에 Selector 또한 매우 중요하다..!

 

HTML, CSS 연결하기

---

HTML과 CSS를 연결하는 방식은 두 가지가 있다.

둘 다 CSS 문법은 같지만, HTML파일과 합쳐서 하나의 파일로 사용하느냐 혹은 파일을 구분해서 사용하느냐에 따라 차이가 있다.

 

첫번째는 <style>태그를 이용해서 HTML body 앞부분에 넣어주는 방식이다. 즉, <style>은 이제부터 CSS를 사용할거라고 선전포고하는 태그라고 할 수 있다. 하지만 요즘은 잘 안쓰는 방식..이라고 한다.

 

두번째는 CSS파일을 따로 만들고, <link>태그만 HTML에 삽입해 두 파일을 연결해주는 방식이다. 앞으로는 이 방법만 사용할 예정이다.

 

 

Selector

---

이제 CSS 부분만 살펴보자. HTML에 있는 <a>태그를 CSS에서 지목해 디자인적인 속성을 변경해주고 싶다면 아래의 코드처럼 쓰면 된다. 이렇게 하면 HTML 본문에 있는 모든 a태그에 지정한 속성들을 일괄로 적용해주게 된다. 여기서 a가 바로 Selector이다.  참고로 { }는 property,  none과 black은 value라고 한다. 

 

a {
    color : black;
    text-decoration : none;
   }
   
   

 

여기서 속성을 모든 <a>태그가 아니라 딱 한 부분만 바꾸고 싶은거라면 어떻게 해야하지?! 라는 의문이 들 수 있다.

좀 더 나아가서는, 수많은 <a> 태그들 중 두세개만 바꾸고 싶은데, 그 두세개의 중복이 거슬린다면? 이런 의문까지도 들 수 있다.

 

그래서 HTML은 class, id와 같이 태그가 같더라도 더 구체적으로 구분할 수 있는 기회를 준다.

 

a태그를 다시 예로 들면, HTML에서 <a href src="-" class= "developer" id="jooing"> 이런 식으로 class나 id를 지정해줄 수 있다. 물론 둘 중 하나를 생략하거나 둘 다 생략해도 상관은 없다. 

 

여기서 중요한 것은 class를 CSS에서 선택하고자 한다면, 아래와 같은 방식으로 클래스명 앞에는 . 을 붙여야 하고, id를 선택하고자 한다면 #을 붙여야 한다는 것이다. 

.developer {
    color : yellow;   
    text-decoration : none;
}

#jooing{
    color : yellow;   
    text-decoration : none;
}

 

 

class와 Id의 차이점

---

그리고 여기서 한 가지 더 중요한 것이 있는데, 바로 class와 id의 차이점이다.

가장 큰 차이점은 class는 여러명이 공유할 수 있지만, id는 한명당 하나씩만 가져야 하는 유일무이한 값이어야 한다는 것이다.

 

class는 동일한 값을 갖는 요소(element)들이 여러개 존재할 수 있으며, 하나의 element가 여러개의 class에 포함될 수도 있다. 따라서 classs는 style을 구분하는 기준으로 많이 사용한다.

 

id는 동일한 값을 갖는 element가 여러개 존재할 수 없으며, 하나의 element는 하나의 id값만 가질 수 있다. '유일무이', '고유한 값' 등으로 이해하면 될 것 같다. 따라서 id는 특정한 element에 이름을 붙이는 데 주로 사용한다.

 

style은 tag < class < id  순서로 우선 적용되어, 이런 특징을 이용해 단계적으로 element 간의 중복을 제거할 수 있다.