ID와 CLASS 차이(CSS 선택자)

CSS 선택자

선택자란 CSS로 UI의 어느 부분을 디자인할지, 표현할 대상이 되는 부분을 말합니다.
CSS로 속성을 부여하는 형식은 { } 안에 여러 속성을 지정할 수 있고, 각 속성 설정 간에는 ' ; ' 으로 구분해주며 마지막 속성 끝에는 구분자를 생략할 수 있습니다. 속성은 가로로 붙여 써도 되고 한 줄씩 따로 입력해도 무방합니다.
요소를 선택하는 방법, 선택자의 종류로는 ID 선택자, CLASS 선택자 등 여러가지가 있습니다. 

 

ID 선택자

 

HTML 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로속성을 부여할 수 있습니다. HTML 요소에 ID로 이름을 붙일 때에는 유일한 이름을 부여해야 하며, 다른 요소에 같은 ID명을 또 주어서는 안됩니다.

CSS에서는 ID 선택자 앞에 ' 샵( # ) ' 을 붙여야 합니다. 

단, 숫자로 시작할 수 없으며, 주로 영문자로 시작합니다. 

 

 

See the Pen id 선택자 예시 by dongjin6539 (@dongjin6539) on CodePen.

- id 선택자를 사용한 예시 - 

 

 

CLASS 선택자

 

HTML 문서의 여러 요소 중 같은 이름을 갖는 요소들만 모아 따로 석성을 부여할 수 있습니다. HTML 요소에 같은 이름을 부여할 때에는 CLASS로 이름을 붙입니다. 즉, 여러개의 요소에 같은 CLASS명을 부여할 수 있습니다. 또한 하나의 요소에 여러 개의 CLASS명을 부여할 수도 있습니다. CSS에서는 CLASS 선택자 앞에 ' 점( . ) ' 을 붙여야 합니다.

 

 

See the Pen Untitled by dongjin6539 (@dongjin6539) on CodePen.

- class 선택자를 사용한 예시 -