코딩독학) HTML 태그 ID와 CLASS

HTML 문서는 보통 HTML 태그로 문서 구조를 짠 뒤에 CSS로 HTML 문서에 디자인 속성을 넣어주고, JAVASCRIPT로 동적 구현을 하는 시스템으로 이루어져 있다. 보통 확장자를 .html .css .js 로 문서를 3개 만들어 css파일과 js파일을 html파일과 연결시켜 주는데, css파일과 js파일에서 html 문서의 어떤 것을 선택해 속성을 지정해주고 싶을 때 id와 class가 필요하게 된다.

 

말로 설명하려니 어렵네..

바로 예제를 보자.

 

예제 연습

div로 지정된 4개의 네모가 오른쪽 브라우저에 표시된다. 4개의 div에는 class가 지정되어 있고, 맨 마지막 div에만 id가 지정되어 있다. example.css 문서를 보면 background 컬러가 지정되어 있는데 각기 다른 네모를 지정하고 있기 때문에 오른쪽 화면에 다른 컬러가 표시된다.

 

맨 처음 * 표시 안에 지정된 컬러는 darkgrey다. * 표시는 all 이란 뜻으로 문서의 모든 아이템을 지정한다는 뜻이다.

.apple 안에 지정된 컬러는 crimson이다. 왼쪽 html 문서에서 class 값으로 apple을 가지고 있는 div는 세 개다. 그 중 맨 마지막 div는 class 값으로 apple을 가지고 있음에도 불구하고 브라우저 상에는 crimson 색이 아닌 yellowgreen 색으로 표시되고 있다.

 

이유는 class가 id보다 더 상위 개념이며, 하위 개념으로 들어갈 수록 더 세부적으로 선택이 가능하여, 그에 지정된 색상을 보여주도록 브라우저가 설계되어 있다는 뜻이다. 그래서 * 표시로 전체 아이템이 darkgrey로 표시되도록 지정했음에도 불구하고 .apple에는 crimson, #onlyme에는 yellowgreen 색이 표시가 된 것이다.

 

일단 하위 개념이 더 우선되는 결과가 나타난다는 원리를 알았다. 그럼 여기서 class와 id는 무엇일까?

class는 계급을 나타내고 여러 가지 태그가 같은 class 값을 가질 수 있다. 여러 명이 동시에 귀족 계급도 될 수 있고, 상인 계급도 될 수 있고, 노예 계급이 될 수 있는 것처럼 말이다. 여기서 귀족, 상인, 노예 계급은 여러 개가 동시에 같은 계급을 가질 수 있다는 은유적 예시지만, html 속성 중 class 값이 그 자체로 hierarchy를 가진다는 듯은 아니다.

id는 고유한 값으로 한 id 당 한 개체만 그 값을 가질 수 있다. 그래서 단일한 한 아이템만 선택하고 싶을 때 사용한다. 물론, id의 개념이 더 세부적이기 때문에 여기에 적용된 색상이나 등등의 값이 우선 적용된다.