[Web] CSS - 기본 선택자

전체 선택자

스타일 문서의 모든 요소에 적용할 때 사용합니다. 주로 모든 하위 요소에 스타일을 한꺼번에 적용할 때 사용합니다. *(애스터리스크)를 사용하여 나타냅니다.

*{속성: 값;...}

웹 브라우저의 기본 스타일을 초기화할 때 자주 사용합니다. 예를 들어 웹 문서 내용을 브라우저 창에 바짝 붙지 않도록 문서 내용과 브라우저 테두리 사이를 나타내는 마진과 패딩을 0으로 초기화합니다.

 

타입 선택자

특정 태그를 사용한 모든 요소에 스타일을 적용합니다.

태그명 {스타일 규칙}

 

클래스 선택자

같은 태그라도 일부 다른 스타일을 사용하고 싶을 때, 타입 선택자를 이용하여 특정 부분만 스타일을 적용할 수 있습니다.

.클래스명{스타일 규칙}

클래스 선택자를 이용해 만든 스타일을 클래스 스타일이라 하는데, 이미 만들어 둔 클래스 스타일을 적용할 때는 태그 안에 class="클래스명"처럼 class 속성을 이용한다.

<p class="MyClassStyle">안녕하세요</p>

 

id 선택자

클래스 선택자와 마찬가지로 웹 문서의 특정 부분을 선택해서 스타일을 지정할 때 사용합니다. 마침표 대신에 #을 이용해 id선택자를 정의합니다.

#아이디명{스타일 규칙}

클래스 선택자와는 다르게 id 선택자는 문서에서 단 한번만 적용할 수 있습니다. 그렇기 때문에 주로 문서의 레이아웃과 관련된 스타일을 지정하거나 웹 요소에 JS프로그램을 사용하면서 요소를 구별할 때 사용합니다.

 

그룹 선택자

여러 선택자에서 같은 스타일을 정의하고 싶을 때 그룹 선택자를 이용합니다. 쉼표(,)로 선택자를 나열해 스타일을 정의합니다.

선택자1, 선택자2 {스타일 규칙}