Blinking Hello Kitty Angel

css

ID 와 CSS의 차이점 ?

xoouxa 2023. 2. 21. 22:05

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자
728x90

선택자(selector)

선택자란 CSS로 UI의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다.
HTMl 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다.
HTML 요소에 id로 이름을 붙일 때에는 유일한 이름을 부여해야 하며, 다른 요소에 같은 id명을 또 주어서는
안 됩니다. css에선 id 선택자 앞에 #을 붙여야 합니다.
id 명이나 class명은 숫자로 시작할 수 없으며 주로 영문자로 시작합니다.

  • 선택자의 종류
  1. type 선택자
  2. id 선택자

1. ID 선택자

id 사용할 때 중요한 것은 한페이지에서 한 번만 사용이 가능합니다.
id는 페이지 내에서 특정 위치나 태그를 지정하는 것이기 때문에 오직 페이지내에서 한 번만 사용할 수 있습니다.
css에서의 정의하는 방법은 #id_name{속성명:속성값; 속성명:속성값;} 이런식으로 적용합니다.

2. class 선택자

자주 사용되는 스타일에 적용하는 것
예를 들어 색상을 미리 지정하고 HTML에 적용시키는 방법입니다.
css에서 정의하는 방법은 .class_name{속성명:속성값; 속성명:속성값;} 으로 적용합니다.
HTML 문서의 여러 요소 중 같은 이름을 갖는 요소들만 모아 따로 속성을 부여할 수 있습니다. HTML 요소에 이름을 부여할 때에는 class로 이름을 붙입니다. 즉, 여러 개의 요소에 같은 class명을 부여할수 있습니다. 또한 하나의 오쇼에 여러 개의 class명을 부여할 수도 있습니다. css에서는 class 선택자 앞에 '.'을 부여야 합니다.

3. id와 class의 차이점

차이점은 class는 여러명이 공유할 수 있지만, id는 한명당 하나씩만 가져야 하는 유일무이한 값이어야 한다는 것입니다.

class는 동일한 값을 갖는 요소(element)들이 여러개 존재할 수 있으며, 하나의 element가 여러개의 class에 포함될 수도 있습니다. 따라서 class는 style을 구분하는 기준으로 많이 사용한다.

id는 동일한 값을 갖는 elment가 여러개 존재할 수 없으며, 하나의 element는 하나의 id 값만 가질 수 있다.
'유일무이', '고유한 값' 등으로 이해하면 쉽게 이해할 수 있습니다.
따라서 id는 특정한 element에 이름을 붙이는 데 주로 사용합니다.
우선순위 id>class>태그순으로 적용 됩니다.