CSS id 와 class의 차이

CSS   id & class의 차이

id 속성

id 속성은 전체 페이지에서 단 하나의 요소에만 지정이 가능합니다.

class 속성

 id 속성과 다르게 여러 번 반복해서 사용할 수 있습니다.
반복적으로 쓰이는 유형들을 유형별로 동일한 class로 분류하여 쉽게 관리할 수 있습니다.

 

id 속성은 태그에 유일한 이름을 붙이고 싶을 때 씁니다.

class 속성은 같은 유형으로 반복되는 태그들을 유형별로 분류하고 싶을 때 씁니다.

.container {
            width: 1200px;
            height: inherit;
            background-color: rgba(0, 0, 0, 0.2);
            margin: 0 auto;

 <div id="wrap">
        <header id="header">
            <div class="container"></div>
        </header>
        <nav id="nav">
            <div class="container"></div>
        </nav>
        <main id="main">
            <div class="container">
                <artcle id="artcle1"></artcle>
                <artcle id="artcle2"></artcle>
                <artcle id="artcle3"></artcle>
                <artcle id="artcle4"></artcle>
            </div>
        </main>
        <footer id="footer">
            <div class="container"></div>
        </footer>
    </div>

수업시간에서 사용한 class = "container" 가 예시 입니다.

css에서의 차이

CSS에서 id 속성을 사용할 땐 id명 앞에 # 기호를 붙이고 쓰면 됩니다.
id속성은 유일하고 특별하기 때문에 CSS에서 쓰일 때 클래스보다 우선적으로 적용이 됩니다.
class 속성을 사용할 때는 class 명 앞에 .(마침표) 기호를 붙이고 쓰면 됩니다.

이미지 출처