선택자란
우리가 html 파일을 만들었다면 각각의 태그에 다르게 css 를 설정 할 것입니다.
이 때, 어느 요소에 스타일을 적용할지 알려주는 방식이 바로 css 선택자 입니다.
선택자란 말 그대로 선택을 해주는 요소입니다. 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 됩니다.
id 선택자
html 문서에서는 같은 요소라도 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다.
html 요소에서는 id로 하나의 이름만 지정할 수 있습니다.
다른 요소라도 같은 id는 부여할 수 없습니다.
css에서는 #을 붙여 이름을 지정합니다. id는 주로 영문자로 시작합니다.
HTML 규정상 같은 id 값을 중복적으로 사용은 불가능합니다.
<결과> 안녕
class선택자
html 문서의 여러 요소 중 같은 이름을 갖는 요소들에게 따로 속성을 부여할 수 있습니다. html에서 같은 이름을 부여할 때는 class로 이름을 붙입니다. 여러개의 요소에 한번에 같은 class명을 부여할 수 있습니다. 하나의 요소에 여러개의 class명을 부여할 수도 있습니다. css에서는 class선택자 앞에 '.'를 붙입니다. 반복적으로 사용되는 CSS 코드를 각각의 요소 스타일에 하드 코딩하지 말고 (일일이 적지 않고), 하나의 클래스 선택자에 스타일을 지정한 뒤, 필요한 요소에 class 속성만 지정하여 코드를 재활용하면 됩니다.
<결과>
★하나의 태그가 여러 개의 클래스 속성을 가진다면
스타일 코드가 중복되지 않도록 클래스를 잘 분류하는 것이 중요합니다.
즉, 여러요소를 스타일링하고 싶으면 Class를 사용하고
한요소만 사용하고 싶으면 id를 사용하면 됩니다!!