Javascript 요소에 스타일 추가

Michael Zippo

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

CSS , 선택기는 웹 페이지의 특정 요소 또는 여러 요소를 대상으로 하는 데 사용됩니다. 요소를 대상으로 지정하면 스타일 또는 스타일 집합을 요소에 적용할 수 있습니다.

다양한 선택기를 사용할 수 있습니다. 가장 일반적으로 사용되는 두 가지는 와 ID입니다. 둘 다 제목이 있는 항목을 대상으로 지정하는 데 사용됩니다.

및 ID 선택기

차이점은 무엇입니까 n 태그 > 및 ID ? 이것은 CSS를 처음 접하는 많은 개발자가 묻는 질문이며 이 가이드에서 답을 드릴 것입니다.

이 가이드를 다 읽을 때쯤이면 이 두 선택기의 차이점을 알게 될 것입니다. 코드에서 사용할 선택 항목에 대해 정보에 입각한 결정을 내리는 데 필요한 정보를 갖게 됩니다. 시작하겠습니다.

`CSS 선택기`

웹 페이지 페이지의 특정 요소에 특정 스타일을 적용하려고 합니다. 예를 들어, 모든

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

선택기를 사용하면 웹페이지에서 스타일을 적용할 수 있는 특정 요소를 타겟팅할 수 있습니다. CSS에는 범용 선택기, 자손 선택기, 자식 선택기, 그룹화 선택기 등 많은 선택기가 있습니다. CSS 선택기에 대해 자세히 알아보려면 CSS 선택기에 대한 초보자 가이드를 읽어보세요.

 두 개의 선택기,  및 id  , HTML 요소에 할당된 클래스 및 ID를 기반으로 스타일 요소에 각각 사용되지만 이러한 선택자는 종종 혼동되므로 각각이 수행하는 작업을 살펴보겠습니다.

   id 선택기가 고유합니다.  
id 선택기를 사용하면 웹 페이지의 단일 요소 에 적용할 수 있는 스타일 규칙을 정의할 수 있습니다. 각 웹 페이지에는 단일 < a  ID 속성. 이는 ID 선택기를 사용하여 둘 이상의 요소에 스타일을 지정할 수 없음을 의미합니다.
ID 선택기는 파운드 기호를 사용하여 정의됩니다. 바로 뒤에 식별 값이 옵니다. 스타일 규칙 세트를 적용하려는 경우 다음은 작동 중인 ID 선택기의 예입니다.
 이 스타일은 ID가 betaBanner인 HTML 문서의 
요소에 적용됩니다. 스타일은 요소의 배경색을 주황색으로 설정하고 요소의 텍스트 색상을 흰색으로 설정합니다.
  클래스 선택기가 고유하지 않습니다.  
클래스 선택기를 사용하면 모든 항목에 적용되는 스타일 규칙을 정의할 수 있습니다. 특정 값과 같은 클래스 속성을 가진 요소 .
위에서 언급했듯이, 아이덴티티 선택자는 요소 스타일에 사용할 수 없습니다. 실제로 ID는 웹 페이지에서 한 번만 사용할 수 있습니다. 반면에 코스는 여러 요소에 사용할 수 있습니다. 따라서 클래스 선택기를 사용하여 스타일을 적용하는 경우 해당 클래스를 공유하는 모든 요소는 정의한 스타일의 적용을 받습니다.
클래스 선택기는 마침표를 사용하고 다음에 해당 클래스의 값을 사용하여 정의합니다. 스타일 세트를 적용하려고 합니다. 다음은 작동 중인 클래스 선택기의 예입니다.
입니다. <스타일> .orangeBackground {배경색: 주황색; }

 이 스타일은 
태그의 배경색을 주황색으로 설정합니다. 또한 스타일은 주황색  태그에 적용하려는 경우 다음 코드를 사용하여 수행할 수 있습니다.

 이 코드에서 orangeBackground 및 large 클래스에 대해 정의된 모든 스타일 규칙이 웹 요소에 적용됩니다. 그러나 ID 카드를 사용하면 각 항목에 하나의 ID만 있을 수 있기 때문에 이 동작을 재현할 수 없습니다.
  ID에는 고유한 브라우저 기능이 있습니다.  
지금까지 ID가 단일 요소. 여러 요소에 스타일을 적용할 수 있는 클래스와 다릅니다. 이것은 클래스 선택자와 ID 선택자의 유일한 차이점이 아닙니다.
브라우저에서 클래스에는 특별한 기능이 없습니다. 주요 목적은 웹 페이지의 여러 요소에 스타일을 적용할 수 있도록 하는 것입니다. 반면에 ID는 브라우저에서 웹페이지의 특정 부분에 액세스하는 데 사용할 수 있습니다.
요소에 ID를 할당하면 특수 URL을 사용하여 해당 요소에 직접 연결할 수 있습니다. 요소. 이 동작은 웹페이지에서 ID가 고유하기 때문에 작동합니다.
헤더가 있는 사용자에게 자동으로 스크롤되는 링크를 웹사이트로 보내려고 한다고 가정해 보겠습니다. 다음 코드를 사용하여 수행할 수 있습니다.
 이 코드에서는 Three 텍스트가 포함된 
 태그에 신분증을 할당했습니다. 이제 사용자에게 웹 페이지의 해당 요소에 대한 직접 스크롤 링크를 보낼 수 있습니다. 이것은 다음 주소를 사용하여 수행됩니다.

Javascript 요소에 스타일 추가

및 ID 선택기

`CSS 선택기`

id 선택기가 고유합니다.

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

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

태그에 신분증을 할당했습니다. 이제 사용자에게 웹 페이지의 해당 요소에 대한 직접 스크롤 링크를 보낼 수 있습니다. 이것은 다음 주소를 사용하여 수행됩니다.

ID가 사용됨 JavaScript

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

결론

Shop

News

Wiki