Develop/HTML & CSS

[ HTML & CSS ] ID와 Class의 공통점 및 차이점

KimBangg 2021. 3. 26. 12:33

공통점

id와 class 태그는 모두 특정 요소에 스타일을 입히기 위해 사용됩니다.

차이점

1. ID

유일한 즉 하나의 요소에만 스타일을 주기 위해 사용합니다.

ID는 #{name} 을 통해서 style을 줄 수 있습니다.

 

2. Class

다수의, 반복되는 요소에 스타일을 주기 위해 사용합니다.

Class는 .{name} 을 통해 style을 줄 수 있습니다.

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        #title {
            color: red;
        }
        .box {
            margin: 5px;
            width: 50px;
            height: 50px;
            background: gray;
            float : left;
        }
    </style>
</head>

<body>
    <h2 id="title">ID vs Class</h2>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>