[CSS] #과 .의 차이점

CSS에서 #과 .은 각각 아이디(id)와 클래스(class)를 나타내는 선택자입니다. 이 두 선택자는 웹 페이지의 요소에 스타일을 적용하는 데 사용됩니다. 그러나 각각의 선택자는 다음과 같이 서로 다른 용도와 사용법을 가지고 있습니다.

# 선택자

# 선택자는 요소의 고유한 아이디를 나타내며, 해당 아이디를 가진 요소를 선택합니다. 아이디는 문서 내에서 유일해야 합니다. 즉, 동일한 아이디 를 가진 두 개 이상의 요소는 없어야 합니다.

#header {
  background-color: #333;
  color: #fff;
}

위 예제는 아이디가 'header'인 요소에 배경색과 텍스트 색상을 지정하는 CSS입니다.

. 선택자는 class를 나타내며, 해당 class를 가진 모든 요소를 선택합니다. 클래스는 여러 요소에 적용할 수 있으며, 요소마다 서로 다른 클래스를 가질 수 있습니다.

.button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
}

.warning {
  color: #ff0000;
}

위 예제는 'button' 클래스와 'warning' 클래스에 각각 스타일을 적용하는 CSS입니다. 이 스타일은 해당 클래스를 가진 모든 요소에 적용됩니다.

# 선택자를 사용할 때는 각 아이디가 유일해야 합니다. 동일한 아이디를 여러 요소에 사용하면 CSS가 올바르게 동작하지 않을 수 있습니다.
.class 선택자를 사용할 때는 하나 이상의 요소에 적용할 수 있으므로, 특정 요소에만 스타일을 적용하려면 그 요소에 클래스를 추가해야 합니다.