CSS 클래스 선택기

CSS 클래스 선택기는 일치하는 클래스 이름 속성이 첨부된 모든 HTML 요소를 대상으로 합니다.

클래스 선택기 구문:

.class-name {
    property-name: value;
}

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

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

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

점(. ) 클래스 이름 앞에 특정 CSS 구문이 있습니다. HTML 요소에 클래스 속성으로 클래스 이름을 추가할 때 . .

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

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

<button>Button</button>

기본 모양:

지루한 응?

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

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

버튼 요소에 클래스 속성으로 추가:

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

결과:

CSS 클래스 선택기 사용에 대해 알아야 할 가장 중요한 사항을 방금 배웠습니다.

알아두면 좋은 정보:

• CSS 클래스는 한 번만 사용할 수 있는 ID 선택기와 달리 모든 HTML 요소에서 재사용할 수 있습니다.
• 동일한 요소에 여러 CSS 클래스를 추가할 수 있습니다. <div class="first-class second-class third-class" . 이를 통해 Tailwind CSS 프레임워크에서 볼 수 있는 것과 같이 작은 유틸리티 클래스로 요소 디자인을 조합할 수 있는 유연한 방법을 얻을 수 있습니다.