🌱 기초 프론트엔드
CSS 클래스(Class)란?
쉽게 이해하기
학교에서 같은 반 학생들에게 '1반'이라는 이름표를 붙이면, 1반 학생들에게만 특정 규칙을 적용할 수 있죠. CSS 클래스도 마찬가지예요. 여러 HTML 요소에 같은 클래스 이름을 붙여서, 그 요소들에게만 같은 스타일을 한 번에 적용할 수 있어요.
핵심 정리
HTML 요소에 스타일을 적용하기 위해 붙이는 이름표예요.
자세히 알아보기
CSS 클래스는 HTML 요소를 그룹으로 묶어서 스타일을 적용하는 방법이에요. HTML에서는 `class="이름"` 형태로 쓰고, CSS에서는 `.이름` 형태로 선택해요.
실무에서는 버튼, 카드, 제목 등 반복되는 디자인 요소에 클래스를 사용해요. 예를 들어 웹사이트의 모든 버튼에 `.btn` 클래스를 붙여서, 한 번의 CSS 작성으로 모든 버튼의 색상, 크기, 모양을 통일할 수 있죠. 만약 나중에 버튼 디자인을 바꾸고 싶다면, CSS 파일에서 `.btn` 부분만 수정하면 모든 버튼이 자동으로 바뀌어요.
하나의 요소에 여러 클래스를 동시에 적용할 수도 있어요. `class="btn btn-primary"`처럼 공백으로 구분해서 쓰면, 기본 버튼 스타일과 파란색 버튼 스타일을 함께 적용할 수 있어요. 이렇게 조합해서 사용하면 적은 코드로 다양한 디자인을 만들 수 있어서, 모던 웹 개발에서는 필수적으로 사용하는 개념이에요.