“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
선택자(selector)
선택자란 CSS로 UI의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다.
CSS로 속성을 부여하는 형식은 다음과 같습니다.
- 선택자의 종류
- type 선택자
- id 선택자
- class 선택자
등이 있습니다. 그 중에서 id 선택자와 class 선택자 그리고 둘의 차이점을 알아보겠습니다.
1. id 선택자
id 사용할 때 중요한 것은 한페이지에서 한번만 사용이 가능합니다.
id는 페이지 내에서 특정 위치나 태그를 지정하는 것이기 때문에 오직 페이지내에서 한번만 사용할 수 있습니다.
css에서의 정의하는 방법은 #id_name{속성명:속성값; 속성명:속성값;} 이런식으로 적용합니다.
2. class 선택자
자주 사용되는 스타일에 적용하는 것이라고 생각하시면 됩니다.
예를 들어서 빨강색 or 파란색 들 색상을 미리 지정하고 HTML에 적용시키는 방법입니다.
css에서 정의하는 방법은 .class_name{속성명:속성값; 속성명:속성값;} 이런식으로 적용합니다.
3. id와 class의 차이점
가장 큰 차이점은 class는 여러명이 공유할 수 있지만, id는 한명당 하나씩만 가져야 하는 유일무이한 값이어야 한다는 것이다.
class는 동일한 값을 갖는 요소(element)들이 여러개 존재할 수 있으며, 하나의 element가 여러개의 class에 포함될 수도 있다.
따라서 class는 style을 구분하는 기준으로 많이 사용한다.
id는 동일한 값을 갖는 elment가 여러개 존재할 수 없으며, 하나의 element는 하나의 id 값만 가질 수 있다.
'유일무이', '고유한 값' 등으로 이해하면 될 것 같다.
따라서 id는 특정한 element에 이름을 붙이는 데 주로 사용한다.
style은 tag <class<id 순서로 우선 적용되어, 이런 특징을 이용해 단계적으로 element 간의 중복을 제거할 수 있다.
