23.03.08 / 선택자 문법과 기본 선택자

선택자 ★★★★★

CSS를 이용해서 HTML의 어떤 요소를 꾸미려면,  많은 요소들 중 어떤 요소를 꾸밀지 명확하게 지정해야 한다. 선택자는 스타일을 적용할 대상을 지정하는 용도로 사용

[종류]

1. 기본 선택자 (가장 많이 쓰고 중요함)

- 전체 선택자 : 스타일을 문서의 모든 요소에 적용할때 사용한다. / 선택자에 * (애스터리스키)기호 사용

 

- 태그 선택자 : html의 태그 이름을 작성하고 css 속성과 값을 적어주는 방식 / 선택자에 태그에서 </> 제외하고 태그의 이름만 사용

-> W3C 에서 제공하는 선택자에 대한 설명에서는 "타입 선택자 (type selector)"라고 명시되어있다.

뒤에 나올 속성 선택자

<input type="text" value="123"> 에서 input type="text" 만 선택자로 사용할 경우 : input [type="text"]<input type="checkbox" checked> 선택자로 사용할 경우 input[type="checkbox"]:checked

 

 

- 아이디 선택자

- 클래스 선택자

[전역 속성] : class 와 id

클래스 또는 아이디 이름은 기억하기 쉽고 명확한 이름으로 작성한다.

클래스 또는 아이디 이름은 절대로 숫자 또는 특수 기호로 시작하면 안된다.

클래스 또는 아이디 이름은 대소문자를 구분한다.

클래스 이름은 소문자로 작성, 단어 뒤에 다른 단어를 붙이려면 띄어쓰기가 아니라_(언더바) 또는 -(대쉬)를 이용한다.

나쁜 예시 ) main1, main2, main-c

좋은 예시) main_login, main-join

 

class

 - 요소에 이름을 명시하려는 용도

 - 클래스 이름은 중복 가능하다.

 - 여러 이름을 가질 수 있다.

  <div class="black red"></div>   => calss 가 black과 red 둘 다 가지고 있음 

 <div class="black-red"></div>  또는  <div class="black_red"></div>)  => class가 black-red  또는 black_red 하나를 가지고 있음

 - 기호 : .클래스 이름

id

- 요소에 이름을 명시하려는 용도

- 아이디 이름은 중복 불가능하다. (html이나 css에서 아이디 이름을 중복해서 사용하고 출력해보면 속성 값이 적용은 된다. 하지만 나중에 자바스크립트나 제이쿼리 등과의 프로그래밍 언어와 결합했을 때 문제가 생길 수 있기 때문에 중복해서 사용하지 않는다.

- 기호 : #아이디 이름

 - 그룹 선택자 : 여러 선택자가 같은 스타일 규칙을 사용하는 경우 / 쉽표(,)로 구분해서 여러 선택자를 나열하고, 스타일 규칙을 한 번 만 작성한다.