코딩/CSS

CSS의 기초! ID와 Class의 차이점

우당당쿵당콩탕 2023. 2. 21. 09:35
728x90
반응형

안녕하세요.🥰

지난 게시물에서는 CSS의 스타일에 대해서 알아봤는데요. 오늘은 '선택자(selector)에 대해 알아보겠습니다. 

선택자란 CSS로 UI의 어느 부분을 디자인 할 지, 즉 표현할 대상이 되는 부분을 말합니다.

 

아래 이미지를 살펴보겠습니다.

CSS를 배우지 않았더라도 어림짐작은 할 수 있죠. 예를 들어 H는 헤더라던가, color는 색이라던가.

맞습니다만, 이런 명칭을 CSS에서는 이렇게 정의해주고 있습니다.

 

이 예문은 h1요소에 배경색을 노란색으로, 글자색을 빨간색으로 지정한다는 의미

어렵지 않죠?

{ }안에 여러 속성을 지정할 수 있고, 각 속성 설정간에는 ;로 구분해줍니다.

 


이제 자연스럽게 선택자에 대해 알아보려고 합니다.

우리가 정확하게 알아야할 선택자는 2가지인데요. 바로 id 선택자와 class선택자입니다.

 

얼핏보면 비슷하고 하는 일도 비슷한 친구들인데 알아보면 실상은 그렇지 않습니다.

 

ID 선택자

HTML 문서에서는 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다.

요소에 id로 이름을 붙일 때에는 유일한 이름을 부여해야하며, 다른 요소에 같은 id명을 주어서는 안됩니다.

CSS에서는 id 선택자 앞에 '#'을 붙여야 합니다. 

 

Class 선택자

HTML 문서의 여러 요소 중 같은 이름을 갖는 요소들만 모아 따로 속성을 부여할 수 있습니다.

HTML요소에 같은 이름을 부여할 때에는 class로 이름을 붙입니다.

즉 여려개의 요소에 같은 class명을 부여할 수 있습니다.

aside를 중복해서 사용하는 것을 볼 수 있다.

지난 시간 배웠던 이미지 입니다. header, cotents, footer, nav등은 한 개만 사용 되었지만 aside는 여러개가 사용된 것을 볼 수 있습니다.

< 정. 리 >

class는 반복적으로 사용되는 스타일을 정의하고 반복적으로 사용되는 스타일에 사용됩니다.

 

id는 한페이지에 하나의 정의로 단 하나의 태그(id="")만 사용할 수 있습니다.

로고, 상단메뉴, 하단메뉴등에 사용됩니다.

 

오늘은 CSS의 ID와 clss에 대해서 알아보았습니다!

도움이 되셨기를 바라며, 재밌게 배우시길!