728x90
선택자(selector)
먼저,선택자란?
CSS의 UI로 표현할 대상이 되는 부분을 말합니다.
CSS 속성부여 형식은 다음과 같습니다.
h1 { color : red; background : yellow;}
선택자 {속성:속성값; 속성:속성값;}선택자의 종류는 type 선택자, id 선택자, class 선택자 등이 있습니다.
id 선택자
HTML 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다.
HTML 요소에 id로 이름을 붙일 땐 중복하지 말고 유일한 이름을 부여해야 합니다.
CSS에서는 id 선택자 앞에 '#'을 붙여야 합니다.
다음 예제에서 id가 txt인 p요소는 스타일이 지정되지 않았으므로 지정된 ctxt만 파란색으로 표시됩니다.
See the Pen Untitled by dkdlelw (@dkdlelw) on CodePen.
class 선택자
HTML 문서의 요소 중 여러 개의 요소에 같은 class명을 부여할 수 있으며, 하나의 요소에 여러 개의 class명을 부여할 수도 있습니다.
CSS에서는 class 선택자앞에 '.'을 붙여야 합니다.
다음 예제에서 보이는 것처럼 다른 요소에 같은 class명을 부여할 수 있습니다.
See the Pen Untitled by dkdlelw (@dkdlelw) on CodePen.
class와 Id 차이점 정리
| 선택자 | 차이점 |
| id | 단 하나의 요소에만 이름을 붙일 수 있다. 한번 사용한 id는 중복이 불가하다. css에서 선택자 앞에 #를 붙인다. |
| class | 여러 요소에 이름을 붙일 수 있다. 여러번 사용할 수 있다. css에서 선택자 앞에 .를 붙인다. |