CSS ID와 클래스:주요 차이점 설명

CSS 클래스와 ID를 비교할 때 차이점은 CSS 클래스가 여러 요소에 스타일을 적용한다는 것입니다. 반면 ID는 하나의 고유 요소에 스타일을 적용합니다. ID는 특별한 URL을 사용하여 요소에 직접 연결할 수 있고 JavaScript에서 사용된다는 점에서도 특별합니다.

CSS에서 선택기는 웹 페이지의 특정 요소 또는 요소 범위를 대상으로 지정하는 데 사용됩니다. 요소가 타겟팅되면 스타일 또는 스타일 세트를 요소에 적용할 수 있습니다.

다양한 선택기가 제공됩니다. 가장 일반적으로 사용되는 두 가지는 class입니다. 및 ID . 둘 다 스타일을 적용해야 하는 요소를 대상으로 지정하는 데 사용됩니다.

CSS 클래스 및 ID 선택기

class의 차이점은 무엇인가요? 그리고 ID 선택자? 이는 CSS를 처음 접하는 많은 개발자들이 묻는 질문이며, 이 가이드에서 답변해 드리겠습니다.

이 가이드를 다 읽으면 이 두 선택기의 차이점을 알게 될 것입니다. 코드에서 어떤 선택기를 사용할지 결정하는 데 필요한 정보를 얻을 수 있습니다. 시작해 보겠습니다.

CSS 선택기

웹 페이지를 디자인할 때 페이지의 특정 요소에 특정 스타일을 적용하고 싶을 것입니다. 예를 들어 모든

태그의 텍스트 색상을 녹색으로 설정하거나 헤더의 글꼴 크기를 변경할 수 있습니다.

선택기를 사용하면 스타일을 적용할 수 있는 웹페이지의 특정 요소를 대상으로 지정할 수 있습니다. CSS에는 범용 선택자, 하위 선택자, 하위 선택자, 그룹 선택자 등 다양한 선택자가 있습니다. CSS 선택기에 대해 더 자세히 알고 싶다면 CSS 선택기에 대한 초보자 가이드를 읽어보세요.

두 개의 선택기, class 및 id 는 각각 HTML 요소에 할당된 클래스 및 ID를 기반으로 요소에 스타일을 적용하는 데 사용됩니다. 하지만 이러한 선택기는 혼동되는 경우가 많으므로 각 선택기가 어떻게 작동하는지 살펴보겠습니다.

ID 선택기는 고유합니다

ID 선택기를 사용하면 단일에 적용되는 스타일 규칙을 정의할 수 있습니다. 웹페이지의 요소입니다. 각 웹페이지에는 단일 ID 속성을 가진 하나의 요소만 있을 수 있습니다. 이는 ID 선택기를 두 개 이상의 요소에 스타일을 지정하는 데 사용할 수 없음을 의미합니다.

ID 선택자는 해시 기호를 사용하여 정의됩니다. 스타일 규칙 세트를 적용하려는 ID 값이 바로 뒤에옵니다. 다음은 실제 ID 선택기의 예입니다.

<html>
<p id="betaBanner">This is a banner.</p>
<style>
#betaBanner {
 color: white;
 background-color: orange;
}

이 스타일은 ID가 betaBanner인 HTML 문서의

요소에 적용됩니다. . 스타일은 요소의 배경색을 주황색으로 설정하고 요소의 텍스트 색상을 흰색으로 설정합니다.

클래스 선택기가 고유하지 않습니다

클래스 선택기를 사용하면 모든 요소에 적용되는 스타일 규칙을 정의할 수 있습니다. 특정 값과 동일한 클래스 속성을 사용합니다.

앞서 논의한 것처럼 ID 선택기는 하나의 요소 스타일에만 사용할 수 있습니다. 이는 ID가 웹페이지에서 한 번만 사용될 수 있기 때문입니다. 반면에 클래스는 여러 요소에 걸쳐 사용될 수 있습니다. 따라서 클래스 선택기를 사용하여 스타일을 적용하면 해당 클래스를 공유하는 모든 요소에는 정의한 스타일이 적용됩니다.

클래스 선택기는 마침표와 스타일 세트를 적용하려는 클래스 값을 사용하여 정의됩니다. 다음은 클래스 선택기가 작동하는 예입니다:

<html>
<p class="orangeBackground">This is a banner.</p>
<div class="orangeBackground">This is a banner.</div>
<style>
.orangeBackground {
 background-color: orange;
}

이 스타일은

태그의 배경색을 주황색으로 설정합니다. 또한 스타일은

태그의 배경색을 주황색으로 설정합니다. 이는 두 태그 모두 orangeBackground라는 동일한 클래스 이름을 공유하기 때문입니다.

또한 웹 요소는 여러 다른 클래스를 공유할 수 있습니다. 따라서 large라는 클래스를 적용하고 싶다면 위의

태그에 다음 코드를 사용하여 그렇게 할 수 있습니다:

<html>
<div class="orangeBackground large">This is a banner.</div>

이 코드에서 orangeBackground에 대해 정의된 모든 스타일 규칙은 및 large 클래스는 웹 요소에 적용됩니다. 반면에 ID를 사용하면 각 요소가 하나의 ID만 가질 수 있기 때문에 이 동작을 복제할 수 없습니다.

ID에는 고유한 브라우저 기능이 있습니다

지금까지 ID는 하나의 요소에만 스타일을 적용할 수 있다는 사실을 설명했습니다. 여러 요소에 스타일을 적용할 수 있는 클래스와는 다릅니다. 이것이 클래스 선택자와 ID 선택자의 유일한 차이점은 아닙니다.

브라우저에서 클래스에는 특별한 기능이 없습니다. 주요 목적은 웹 페이지의 다양한 요소에 스타일을 적용할 수 있도록 하는 것입니다. 반면에 ID는 브라우저에서 웹페이지의 특정 부분으로 이동하는 데 사용될 수 있습니다.

요소에 ID를 할당하면 특수 URL을 사용하여 해당 요소에 직접 연결할 수 있습니다. 이 동작은 ID가 웹 페이지에서 고유하기 때문에 작동합니다.

사용자를 자동으로 헤더로 스크롤하는 웹사이트 링크를 보내고 싶다고 가정해 보겠습니다. 다음 코드를 사용하여 그렇게 할 수 있습니다:

<h3 id="section3">Section Three</h3>

이 코드에서는 Section Three 텍스트가 포함된

태그에 ID를 할당했습니다. . 이제 웹 페이지의 해당 요소로 스크롤하는 직접 링크를 사용자에게 보낼 수 있습니다. 이는 다음 URL을 사용하여 수행됩니다:

https://domain.com/index.html#section3

사용자가 이 URL로 이동하면(여기서 domain.com 웹사이트의 URL) ID가 section3인 제목으로 스크롤됩니다. . 이 동작은 클래스에는 적용되지 않습니다.

JavaScript에서 ID를 사용함

JavaScript를 사용해 본 경험이 있다면 해당 프로그래밍 언어에서 ID가 일반적으로 사용된다는 것을 알게 될 것입니다. getElementById 함수를 사용하면 웹페이지에서 요소를 선택할 수 있습니다. 이는 하나의 요소만 동일한 ID를 공유할 수 있다는 사실에 의존합니다.

반면에 클래스는 웹 페이지의 여러 요소를 반영할 수 있습니다. JavaScript의 특정 요소로 작업하려는 경우에는 유용하지 않습니다.

ID와 CSS 클래스 선택기를 모두 사용할 수 있습니다

HTML에는 요소에 ID와 클래스를 모두 할당하는 것을 금지하는 규칙이 없습니다.

CSS ID와 클래스:주요 차이점 설명

"Career Karma는 제가 가장 필요할 때 제 삶에 들어왔고 빠르게 부트캠프에 적응할 수 있도록 도와주었습니다. 졸업한 지 두 달 만에 저는 제 삶의 가치와 목표에 맞는 꿈의 직업을 찾았습니다!"

Venus, Rockbot의 소프트웨어 엔지니어

귀하에게 적합한 부트캠프 찾기

backgroundOrange라는 클래스와 연관된 스타일을 적용한다고 가정해 보겠습니다.

태그에. 그러나

에 몇 가지 고유한 스타일을 적용하고 싶을 수도 있습니다. 다음 코드를 사용하면 됩니다:

<div class="backgroundOrange" id="customDiv"></div>

이

태그는 backgroundOrange 클래스의 스타일을 따릅니다. . 또한 customDiv에 적용된 스타일도 사용합니다. ID 선택기를 사용한 ID입니다.

결론

CSS로 작업할 때 수업보다 ID를 사용하도록 강요하는 특별한 이유는 없습니다. 그러나 웹페이지의 한 요소에 스타일을 적용하려면 ID만 사용하고, 여러 요소에 스타일을 적용하려면 클래스를 사용하는 것이 가장 좋습니다.

이 튜토리얼에서는 예제를 참조하여 CSS ID 및 클래스 선택기의 기본 사항을 논의하고 두 가지를 비교 및 대조했습니다. 이제 전문 개발자처럼 CSS ID와 클래스 선택기를 사용할 준비가 되었습니다!