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

CSS의 ID 선택기는 HTML 문서에서 고유한 id를 가진 요소를 대상으로 스타일을 적용하는 방식입니다. 클래스 선택기와 달리 하나의 페이지에서 단 한 번만 사용할 수 있다는 특징이 있습니다.

ID 선택기 기본 문법

ID 선택기는 이름 앞에 해시 기호(#)를 붙여서 작성합니다.

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

그리고 HTML 요소에는 id 속성으로 동일한 이름을 지정해 줍니다.

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

이렇게 하면 CSS에서 정의한 #id-name 스타일이 해당 <div> 요소에 그대로 적용됩니다.

주의할 점: 해시 기호(#)

ID 이름 앞에 붙는 해시 기호(#)는 오직 CSS 문법에서만 사용됩니다. HTML 요소에 id 속성을 추가할 때는 # 기호를 붙이지 않고 이름만 작성한다는 점을 꼭 기억하세요.

실전 예제: 버튼 스타일 커스터마이징

배운 내용을 실제 예제로 확인해 보겠습니다. 아래는 브라우저의 User Agent Stylesheet에서 기본 스타일을 상속받은 <button> 요소입니다.

<button>Button</button>

기본 버튼은 밋밋하고 딱딱한 느낌을 줍니다. 이제 CSS로 #my-button

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

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