HTML에서 여러 클래스 만들기

1. HTML의 컨테이너에 여러 클래스 할당
2. 효율적인 CSS를 작성하기 위해 HTML의 컨테이너에 여러 클래스 할당

이 문서에서는 HTML에서 여러 클래스를 만드는 방법을 소개합니다. 이 기사에서는 HTML에서 여러 클래스를 사용할 때의 이점에 대해 설명합니다.

HTML의 컨테이너에 여러 클래스 할당

HTML에서 우리는 컨테이너에 할당된 하나의 클래스를 종종 보았습니다. class 속성을 사용하여 HTML 요소에 클래스를 할당한 다음 값을 작성할 수 있습니다. 블록 수준 및 인라인 요소에서 클래스를 만들 수 있습니다. <img>, <p>, <h1> 등과 같은 다양한 HTML 태그에 대한 클래스를 만들 수 있습니다. 일반적으로 컨테이너를 만들어 클래스로 할당하고 CSS로 컨테이너의 스타일을 지정할 수 있습니다. 우리는 CSS 선택기를 사용하여 컨테이너 클래스를 선택할 수 있다. 한 가지 예를 들어봅시다.

<div class ="box">
    <p> Hello World </p>
</div>

.box{
    border: 2px solid black;
    height:200px;
    width:200px;
}

위의 예에서 box 클래스가 있는 div 요소를 만들었습니다. div 안에 내용이 있습니다. CSS에서 box 클래스를 선택하고 몇 가지 스타일을 적용했습니다. 높이와 너비가 있는 상자를 만들었습니다. 검은색 테두리가 있습니다.

HTML의 컨테이너에 두 개의 클래스를 할당할 수도 있습니다. 이를 위해 클래스의 두 이름을 공백으로 구분하여 하나씩 작성해야 합니다. 그런 다음 동일한 컨테이너를 포함하는 클래스의 스타일을 개별적으로 지정할 수 있습니다.

예를 들어 위의 예와 같이 div를 만듭니다. div에 대해 공백으로 구분된 두 클래스 box와 wrapper를 작성하십시오. CSS에서 먼저 box 클래스를 선택하고 border 속성을 작성합니다. border 속성에 대해 2px solid black 값을 지정하십시오. 그런 다음 200px의 높이와 너비를 지정합니다. 다음으로 wrapper 클래스를 선택하고 margin 속성에 20px 값을 지정합니다.

아래 예에서 두 개의 클래스를 사용하여 컨테이너에 20px의 여백을 추가했습니다.

예제 코드:

<div class ="box wrapper">
    <p> Hello World </p>
</div>

.box{
    border: 2px solid black;
    height:200px;
    width:200px;
}

.wrapper{
    margin:20px;
}

효율적인 CSS를 작성하기 위해 HTML의 컨테이너에 여러 클래스 할당

컨테이너에서 여러 클래스를 사용하는 방법을 배웠습니다. 이제 이 접근 방식을 따르는 이점을 이해해야 합니다. 일부 클래스의 속성이 동일한 경우 컨테이너에서 여러 클래스를 사용할 수 있습니다. 공통 클래스의 스타일을 한 번 지정하고 개별 클래스의 스타일을 개별적으로 지정할 수 있습니다. 따라서 CSS를 효율적으로 작성할 수 있습니다.

예를 들어 HTML에서 세 개의 div 요소를 만듭니다. 각 요소에 대해 box를 첫 번째 클래스 이름으로 씁니다. 그런 다음 첫 번째 div에는 redBox, 두 번째 greenBox, 세 번째 div에는 blueBox라는 클래스 이름을 작성합니다. 다음으로 CSS에서 box 클래스를 선택하고 200px의 높이와 너비를 제공합니다. 20px의 여백을 설정합니다. 이제 개별 클래스 이름을 선택하고 해당 배경색을 제공합니다. redBox 클래스를 선택하고 background-color 속성을 red로 설정합니다. 각 색상을 배경색으로 사용하여 나머지 클래스에 대해 동일한 작업을 반복합니다.

아래 예에서 이 세 상자의 공통 속성을 식별하고 공통 클래스 box를 만들었습니다. 이 때문에 각 상자에 대해 반복적인 스타일을 작성할 필요가 없습니다. 또한 컨테이너에 개별 클래스를 할당하여 고유한 색상으로 상자의 스타일을 지정할 수 있습니다. 이러한 방식으로 여러 클래스를 사용하여 효율적인 CSS 코드를 작성할 수 있습니다.

예제 코드:

<div class ="box redBox"></div>
<div class ="box greenBox"></div>
<div class ="box blueBox"></div>

.box{
    height:200px;
    width:200px;
    margin:20px;
}

.redBox{
    background-color:red;
}

.greenBox{
    background-color:green;
}

.blueBox{
    background-color:blue;
}