CSS ID 선택자 완벽 가이드: 문법부터 실전 예제까지

CSS ID 선택자란?

CSS ID 선택자는 고유한 id를 가진 HTML 요소를 대상으로 스타일을 적용하는 선택자입니다.

ID 선택자 문법

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

다음은 위와 동일한 id 이름을 속성 값으로 가지는 HTML 요소입니다.

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

CSS ID 선택자 #id-name은 id-name이라는 id 속성을 가진 <div> 요소에 연결됩니다. 즉, CSS 스타일시트에서 #id-name에 작성한 모든 스타일 속성이 해당 <div>에 적용됩니다.

ID 이름 앞에 붙는 해시 기호(#)는 CSS 전용 문법입니다. 반대로 HTML 요소에 id 속성으로 id 이름을 지정할 때는 # 기호를 붙이지 않는다는 점에 주의하세요.

실전 예제: 버튼 스타일 꾸미기

이제 배운 내용을 실전 예제에 적용해 보겠습니다. 다음은 브라우저의 User Agent Stylesheet로부터 기본 스타일을 상속받은 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 속성으로 추가합니다.

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

결과:

ID 선택자 사용 시 주의사항

ID 선택자에 대해 가장 중요하게 알아야 할 점은, CSS 클래스 선택자와 달리 ID는 한 페이지에서 오직 하나의 요소에만 적용할 수 있다는 것입니다. 덕분에 클래스보다 유연성은 떨어지지만, 그만큼 더 예측 가능하고 명확하게 동작합니다.

따라서 헤더, 푸터, 내비게이션 바처럼 페이지에 한 번만 나타나는 단일 요소에만 ID를 사용하는 것이 좋은 습관입니다.