프로그래밍 공부 일기

2020년 9월 23일
잘 CSS로 class를 사용하지만, class 쪽이 복수 지정할 수 있고 편리한 것은? id를 사용할 필요가 없습니까? 라고 생각했다. 그래서 id와의 구분에 대해 정리한다.

id 속성과 class 속성이란?

CSS 선택기 ( h1 , p ) 등으로 스타일을 지정할 수는 있지만 h1 또는 p 의 id 속성이나 class 속성을 사용한다.

CSS는 HTML의 어느 부분의 무엇을 어떻게 하는지를 지정할 수 있고, 쓰는 방법은 다음과 같이 된다.

どこの(セレクタ) {
  なにを(プロパティ): どうする(値);
}

이 선택기를 id 속성과 class 속성의 속성값(이름)을 지정할 수 있어 자유롭게 스타일을 바꿀 수 있다. class 속성의 경우는 이름의 전에 . 를, id 속성은 이름의 전에 # 를 붙인다.

HTML

<h1>こんにちは</h1>
<p class="red">私の名前は田中太郎です</p>
<h1>こんにちは</h1>
<p class="blue">私の名前は田中次郎です</p>
<p id="green">よろしくお願いします</p>

CSS

h1 {
  color: orange;
}
.red {
  color: red;
}
.blue {
  color: blue;
}
#green {
  color: green;
}

id 속성과 class 속성의 차이

위에서 언급했듯이 id 속성과 class 속성을 지정하여 자유롭게 스타일을 바꿀 수 있습니다. 어느 쪽으로 스타일을 부르더라도 결과는 변하지 않고, 읽기 속도도 변하지 않는다.

다만, class 속성은 1 페이지에 몇번이라도 사용할 수 있는 것에 반해, id 속성은 1 페이지에 1번 밖에 사용하지 말아야 한다.
겉보기 id 속성은 불편한 것처럼 생각하지만, 규모가 큰 홈페이지가 되면 CSS가 복잡해져 가므로, id 속성과 class 속성을 구분하는 편이 편집이나 수정에 편리하게 된다.

※id 속성을 복수 사용해도 바르게 스타일이 반영되는 경우가 있지만, 문법적으로는 잘못하고 있으므로 주의한다.

id 및 class 속성의 구분

여기에서 본제가 됩니다.
class속성은 몇번이라도 사용할 수 있으므로, 자주 호출하는 CSS는 class로 정의해, 한 번 밖에 사용하지 않는 CSS는 id로 정의한다.
특히 id 속성은 한 번 밖에 사용하지 않는 헤더나 바닥글에서 사용되는 경우가 많다.

참고문헌

id와 class를 알기 쉽게 설명! 처음부터 시작하는 HTML/CSS 강좌 Vol13
class와 id 사용법