CSS ID 선택기

CSS ID 선택기는 고유 ID를 가진 HTML 요소를 대상으로 합니다.

ID 선택기 구문:

#id-name {
    property-name: value;
}

다음은 속성 값과 동일한 id 이름을 가진 HTML 요소입니다.

<div id="id-name"></div>

CSS ID 선택기 #id-name <div>에 첨부됩니다. id-name이 있는 요소 기인하다. 즉, .id-name에 추가하는 모든 스타일 속성은 CSS 스타일시트에서 <div>에 적용됩니다. .

해시 기호(# ) id 이름 앞에 특정 CSS 구문이 있습니다. HTML 요소에 id 이름을 id 속성으로 추가할 때 #를 사용하지 않습니다. 기호.

이제 방금 배운 내용을 실제 예제에서 사용해 보겠습니다.

다음은 HTML <button>입니다. 브라우저의 사용자 에이전트 스타일시트에서 상속된 일부 기본 스타일이 있는 요소:

<button>Button</button>

기본 모양:

지루한 응?

#my-button이라는 CSS ID를 만들어 기본 버튼 스타일을 재정의해 보겠습니다. 몇 가지 스타일 속성을 지정합니다.

#my-button {
    font-size: 18px;
    padding: 14px 24px;
    border-radius: 8px;
    border: none;
    background-color: #F7575C;
    color: white;
}

그런 다음 id 속성으로 버튼 요소에 id를 추가합니다.

<button id="my-button">Button</button>

결과:

id 선택기에 대해 알아야 할 가장 중요한 점은 CSS 클래스 선택기와 달리 id는 페이지의 한 요소에만 적용할 수 있다는 것입니다. 이렇게 하면 id를 클래스보다 유연하게 사용할 수 없지만 예측할 수 있습니다.

경험에 따르면 머리글, 바닥글 또는 탐색 모음과 같이 페이지에 한 번 나타나는 단일 요소에 대해서만 ID를 사용합니다.