웹퍼블리셔-입문]CSS 선택자

선택자는 스타일을 지정할 대상을 의미합니다.

스타일을 지정하기 위해서는 위의 이미지처럼 선택자{ 스타일 속성 : 값; } 으로 작성하면 됩니다.

선택자의 종료에는 여러가지가 있는데 Class 선택자, ID 선택자를 먼저 보도록 하겠습니다.

 

1. Class선택자

먼저 body에 class명을 지정한 뒤 style에서 적용시킵니다.

.클래스명 { 스타일 속성 : 값; }

이러한 형식으로 지정하면 클래스 명이 "red"로 되어있는 모든 태그에 같은 스타일이 적용됩니다.

단, 클래스명은 숫자가 앞에 오지 않게, 태그명과 같이 않게 주의해야 합니다.

 

2. ID 선택자

id선택자 또한 먼저 body에서 id명을 지정한 뒤 style에서 적용시키면 됩니다.

#아이디명 { 스타일 속성 : 값;  }

클래스선택자와 마찬가지로 특정 부분에 스타일 적용할 때 사용합니다. 하지만 클래스 선택자는 여러번 반복 사용이 가능하지만 id 선택자는 문서 내에서 한 번만 사용가능합니다. 

 

이때 클래스, 아이디 선택자 삽입시 주의사항은 아래와 같습니다.

1. 첫번째 글자는 무조건 영어
2. 빈 공백은 인식하지 않는다.
3. 특수문자는 _ 또는 - 만 사용한다.
4. 두 단어 연결 시 _ 또는 - 사용하거나 두번째 단어의 첫글자를 대문자로 삽입한다.

 

이런식으로 body 구조를 짜고 style을 지정했을 때 다음과 같이 웹브라우저에 나타나게 됩니다.