안녕하세요.🥰
지난 게시물에서는 CSS의 스타일에 대해서 알아봤는데요. 오늘은 '선택자(selector)에 대해 알아보겠습니다.
선택자란 CSS로 UI의 어느 부분을 디자인 할 지, 즉 표현할 대상이 되는 부분을 말합니다.
아래 이미지를 살펴보겠습니다.
CSS를 배우지 않았더라도 어림짐작은 할 수 있죠. 예를 들어 H는 헤더라던가, color는 색이라던가.
맞습니다만, 이런 명칭을 CSS에서는 이렇게 정의해주고 있습니다.
어렵지 않죠?
{ }안에 여러 속성을 지정할 수 있고, 각 속성 설정간에는 ;로 구분해줍니다.
이제 자연스럽게 선택자에 대해 알아보려고 합니다.
우리가 정확하게 알아야할 선택자는 2가지인데요. 바로 id 선택자와 class선택자입니다.
얼핏보면 비슷하고 하는 일도 비슷한 친구들인데 알아보면 실상은 그렇지 않습니다.
ID 선택자
HTML 문서에서는 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다.
요소에 id로 이름을 붙일 때에는 유일한 이름을 부여해야하며, 다른 요소에 같은 id명을 주어서는 안됩니다.
CSS에서는 id 선택자 앞에 '#'을 붙여야 합니다.
Class 선택자
HTML 문서의 여러 요소 중 같은 이름을 갖는 요소들만 모아 따로 속성을 부여할 수 있습니다.
HTML요소에 같은 이름을 부여할 때에는 class로 이름을 붙입니다.
즉 여려개의 요소에 같은 class명을 부여할 수 있습니다.
지난 시간 배웠던 이미지 입니다. header, cotents, footer, nav등은 한 개만 사용 되었지만 aside는 여러개가 사용된 것을 볼 수 있습니다.
< 정. 리 >
class는 반복적으로 사용되는 스타일을 정의하고 반복적으로 사용되는 스타일에 사용됩니다.
id는 한페이지에 하나의 정의로 단 하나의 태그(id="")만 사용할 수 있습니다.
로고, 상단메뉴, 하단메뉴등에 사용됩니다.
오늘은 CSS의 ID와 clss에 대해서 알아보았습니다!
도움이 되셨기를 바라며, 재밌게 배우시길!