CSS/css 기초

CSS 기초 공부(6) - class란?

lamarcK 2025. 3. 10. 22:17

1. Class란?

HTML과 CSS는 모두 class라는 요소를 사용하여 각각의 태그를 구분하고, 스타일을 적용한다.

HTML에서는 class 속성을 사용하여 요소에 클래스 이름을 부여하고,

CSS에서는 클래스 선택자를 사용하여 해당 클래스가 적용된 요소에 스타일을 지정한다.

 

간단하게 정리하자면 CLASS란 하나의 그룹이라고 할 수 있다. HTML 상에서는 다양한 태그에 CLASS라는 이름을 부여해서 하나의 그룹으로 묶고 CSS 상에서는 특정 CLASS에 동일한 디자인을 적용 할 수 있다.

마치 학교에서 하나의 학급(class)에 다양한 학생들(tag)를 한번에 집어넣고 1반이라고 이름을 정의하는 것과 비슷하다고 할 수 있다.

 

예시를 들어 설명하는 편이 이해가 쉬울 것이다.

<!DOCTYPE html>
<html>
<head>
<style>
.red-text {
  color: red;
}
</style>
</head>
<body>

<p class="red-text">이 문장은 붉은색 글씨입니다.</p>
<div class="red-text">이 div도 붉은색 글씨입니다.</div>

</body>
</html>

 

위의 코드는 body 태그 내에 있는 <p>와 <div> 태그에 각각 "red-text"라는 class 명을 부여했다. 그 결과 <p>와 <div> 태그는 "red-text"라는 하나의 그룹에 속하게 되었다.

이후 <head> 태그에서 "red-text"라는 class에 color: red라는 디자인 속성을 부여했다. 때문에 "red-text"라는 class로 묶인 태그들은 모두 붉은 색의 글씨를 가지게 된다.

 

.은 뭐지?

<style> 태그에서 . 이후에 class의 이름이 나오는데 CSS에서 .(점)은 클래스 선택자라고 부른다.

클래스 선택자는 HTML 요소의 class 속성에 지정된 클래스 이름과 일치하는 요소에 스타일을 적용하는 데 사용된다.

 

결과물

 

또한 class는 아래 예시와 같이 다양한 class를 만들어서 상황에 맞게 태그별로 지정할 수도 있다.

   <style>
        .red-text {
          color: red;
        }
        .blue-text {
          color: blue;
        }
        </style>
        </head>
        <body>
        
        <p class="red-text">이 문장은 붉은색 글씨입니다.</p>
        <div class="blue-text">이 div는 파란색 글씨입니다.</div>
        
        </body>

이처럼 class는 한번에 여러개의 태그에 적용이 가능하며 각 상황에 맞게 따로 적용하는 것도 가능하기 때문에 코드의 재사용성이 높은 편에 속한다. 

 

2. 다중 class란?

위에서 class는 한번에 여러개의 태그에 적용이 가능하다고 했는데 그와 비슷하게 하나의 태그에 여러개의 태그를 동시에 적용하는 것도 가능하다.

<head>
<style>
.blue-text {
  color: blue;
}
.bold-text {
  font-weight: bold;
}
</style>
</head>
<body>

<p class="blue-text bold-text">이 문장은 파란색 굵은 글씨입니다.</p>

</body>

 

예를 들어 blue-text와 bold-text 2가지의 클래스의 스타일을 별도로 지정한 다음 하나의 태그에 2개의 클래스를 모두 적용하여 스타일을 한번에 적용하는 것도 가능하다.

이렇게 여러개의 클래스를 하나의 태그에 적용하는 것을 다중 클래스라고 하는데 각각의 클래스는 클래스 이름 사이의 공백을 통해서 구분한다. 

 

다중 class의 우선 순위

일반적으로 다중 클래스에서 클래스 순서는 스타일 우선순위에 직접적인 영향을 미치지는 않는다.

하지만, 클래스 내부에 같은 css속성이 여러개 선언되어 있다면, 뒤에 선언된 css속성이 우선순위를 갖는다.

 

<head>
<style>
.blue-text {
  color: blue;
}
.bold-text {
  color: red;
  font-weight: bold;
}
</style>
</head>
<body>
<p class="blue-text bold-text">이 문장은 파란색 굵은 글씨일까요? 빨간색 굵은 글씨일까요?</p>
</body>

 

 

 

때문에 해당 코드는 뒤쪽에 적용된 bold-text 클래스의 스타일에 따라 글씨의 색이 빨간색이 되게 된다.

3. 외부 스타일 시트 사용

위처럼 내부 스타일 시트를 사용하지 않고 css 시트를 별도로 사용해서 스타일을 적용할 수도 있다.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!DOCTYPE html>
    <link rel="stylesheet" href="style.css">
</head>
    <body>
    <button class="bt01">
        버튼1
    </button>
    </body>
    </html>

 

.bt01 { 
    color: white; /* 텍스트 색상 */
    background-color: red; /* 배경 색상 */
    width: 100px; /* 요소의 너비 */
    height: 50px; /* 요소의 높이 */
    border-color: blue ; /* 테두리 색 */
    border-width: 3px; /* 테두리 너비 */
    border-style:dashed ; /* 테두리 스타일 */
    margin: 5px;
}

이런식으로 외부 스타일 시트를 <link> 태그를 통해 불러온 다음 적용하는 것도 가능하다.

단 파일 경로: href="style.css"에서 style.css 파일이 HTML 파일과 같은 디렉토리에 있어야만 css 파일을 불러올 수 있다.