css 선택자

CSS에서 선택자는 정말 중요하다.
CSS 자체가 HTML의 스타일을 정의하는 시트인데, 어떤 HTML 요소에 스타일을 입힐껀지 정하는것이 바로 선택자이기 때문이다.
정말 선택자만 잘 사용해도 코드양을 효과적으로 많이 줄일 수 있다.


다음은 많이 사용하는 선택자들을 모아서 정리한 것이다.

형식	이름	의미
*	전체 선택자	모든 태그의 스타일을 지정
body	태그 선택자	특정 이름을 가진 태그의 스타일을 지정
h1 p	하위 선택자	첫번째 태그 안에있는 두번째 태그의 스타일을 지정
h1 > p	자식 선택자	첫번째 태그 안에있는 두번째 태그 중 자식에 해당되는 태그에만 스타일을 지정
h1 + p	인접 선택자	첫번째 태그 안에있는 바로 인접하여 나오는 두번째 태그에만 스타일을 지정
#wrap	ID 선택자	해당 ID를 가지고 있는 태그에만 스타일을 지정
.gnb	Class 선택자	해당 Class를 가지고 있는 태그에만 스타일을 지정

위 표에 명시되어 있는 선택자 외에도 [속성 선택자], [nth-child 선택자]등 다양한 선택자가 존재하지만 대체적으로 위의 선택자가 가장 많이 사용되므로 표로 작성하였다.

선택자를 잘 사용하게 되면, 무분별하게 사용되는 ID와 Class를 줄일 수 있으며 보다 효율적으로 CSS를 작성할 수 있다.

그리고 추 후 유지보수에도 큰 도움이 될것이다.

선택자들의 형식은 생각보다 직관적이므로 다양한 선택자들을 활용하여 보다 아름다운(?) 코딩이 될 수 있도록 우리모두 노력하자!!!

[출처] [CSS] 선택자|작성자 Tionnii