css 선택자(1) - 태그 선택자, 클래스 선택자, 아이디 선택자

선택자에는 기본적으로 태그, 클래스, 아이디 선택자 등이 있으며 그 외에 종속, 하위, 전체, 그룹 선택자 등이 웹 개발 실무에서 많이 사용된다.

태그 선택자

태그 선택자는 HTML 태그를 선택자로 사용하여 속성을 지정하는 방식이다.

예시로는 h1, h2, li 등이 있다.

태그 선택자 예시

h2, th 태그를 선택자로 사용하여 폰트 크기와 배경 색깔을 변경하는 코드이다.

클래스 선택자

사용자가 직접 이름(class)을 만들어 선택자로 속성을 지정하는 방식이다.

.(점)으로 시작하고 첫문자는 영문자로 시작해야하며, 대소문자를 구별합니다.

클래스 선택자는 클래스 속성에서 같은 클래스 이름을 가진 엘리멘트들이 적용 대상이 됩니다.

클래스 선택자 예시

green이라는 클래스를 만들어 h2 태그 두개에 적용하였습니다.

적용 결과 green 클래스를 부여한 h2 태그 두 곳의 색만 변경된 것을 확인할 수 있습니다.

아이디 선택자

사용자가 직접 이름(id)을 만들어 속성을 지정하는 방식입니다.

#(샵)으로 시작하고 첫문자는 영문자로 시작해야 하며, 대소문자를 구별합니다.

클래스 선택자와의 차이점은 하나의 문서에 한번만 사용 가능하다는 점입니다.

아이디 선택자 예시

blue라는 id를 만들어 폰트 색상을 파란색으로 변경하였습니다.