클래스와 ID의 차이

Anonim

클래스와 ID는

CSS (Cascading Style Sheets)는 마크 업 언어를 사용하여 작성된 문서의 모양과 서식을 설명하는 언어입니다. CSS는 HTML로 작성된 웹 페이지 스타일에 널리 사용됩니다. CSS는 HTML 요소에 스타일을 적용하는 것 외에도 자신 만의 스타일 선택기를 지정할 수 있습니다. ID 및 클래스 선택기를 사용하여이 작업을 수행합니다. 단일 고유 요소의 스타일을 지정할 때 ID 선택기가 사용됩니다. 요소 그룹에 대한 스타일을 지정할 때 클래스 선택기가 사용됩니다.

수업이란 무엇입니까?

CSS에서는 클래스 선택기를 사용하여 요소 그룹에 고유 한 스타일을 적용 할 수 있습니다. 클래스 선택기는 동일한 클래스가있는 요소 집합에 특정 스타일을 적용하는 데 사용됩니다. CSS에서 클래스 선택자는 전체 중지 (.)로 식별됩니다. 다음은 CSS에 정의 된 클래스 선택기의 예입니다.

. my_class {

색: 파랑;

font-weight: bold;

- HTML ->

}

HTML은 CSS에 정의 된 클래스를 다음과 같이 속성 클래스를 사용하여 참조 할 수 있습니다.

이것은 내 서식입니다.

이것은 다시 서식을 지정합니다.

위에 표시된 것처럼 동일한 클래스를 여러 요소에 사용할 수 있으며 단일 요소는 여러 클래스를 사용할 수 있습니다. 동일한 요소에서 여러 클래스가 사용되는 경우 클래스는 아래 표시된 것처럼 공백으로 구분 된 클래스 속성에 삽입됩니다.

두 개의 클래스를 사용하여 서식을 지정합니다.

ID 란 무엇입니까?

CSS에서는 ID 선택기를 사용하여 고유 한 스타일에 고유 한 스타일을 적용 할 수 있습니다. CSS에서는 ID 선택기가 해시 (#)로 식별됩니다. 다음은 CSS에 정의 된 ID 선택기의 예입니다.

#my_ID {

색: 빨강;

텍스트 정렬: 오른쪽;

}

HTML은 CSS에 정의 된 ID 선택기를 아래의 그림과 같이 속성 ID를 사용하여 참조 할 수 있습니다.

ID 선택기

ID가 고유 한 서식 양식입니다. 따라서 각 요소는 하나의 ID 만 가질 수 있으며 각 페이지는 해당 ID를 가진 단일 요소 만 가질 수 있습니다. ID는 브라우저에서 사용할 수있는 중요한 특성을 가지고 있습니다. 페이지 URL에 해시 값 (예: http: // myweb. com # my_id)이 있으면 브라우저는 ID가 "my_id"인 요소를 자동으로 찾고 해당 요소를 표시하도록 웹 페이지를 스크롤합니다. 이것이 브라우저가 해당 요소를 찾을 수 있도록 페이지가 특정 ID를 가진 단일 요소를 가져야하는 한 가지 이유입니다.

클래스와 ID의 차이점은 무엇입니까?

클래스 선택기와 ID 선택기를 사용하여 웹 페이지의 요소에 자신의 스타일을 적용 할 수는 있지만 중요한 차이점이 있습니다. 클래스 선택기를 사용하여 요소 그룹에 고유 한 스타일을 적용 할 수 있으며 ID 선택기는 단일 고유 요소에 스타일을 적용하는 데 사용됩니다. ID를 사용할 때 각 요소는 하나의 ID 만 가질 수 있으며 각 페이지는 특정 ID를 가진 요소 하나만 가질 수 있지만 클래스는 여러 요소에 사용될 수 있으며 단일 요소는 여러 클래스를 사용할 수 있습니다.또한 ID를 사용하여 페이지를 자동으로 스크롤하여 해당 ID를 가진 요소를 표시 할 수 있지만 클래스 선택기로는 불가능합니다.