TIL: 5일차 "CSS id&class"

mong-byte·2021년 4월 9일
0

CSS를 이용하는 목적은 HTML로 쓰여진 요소를 디자인 하기 위해서이다. CSS가 없는 HTML문서는 꾸며지지 않은 요소이기에 시각적 디자인을 CSS를 사용해서 하게 되는데, link태그로 CSS를 연결하는것 까지는 했으나, 여기에서 어떻게 HTML을 지정해야 할까?

통상적으로 CSS에서 HTML을 지정하는것은 태그를 입력하는것으로 이루어진다

div {
  color: red;
}

과 같이 태그를 지정하면 지정된 태그에 속성이 부여되는 방식이다. 하지만 이 방식에는 문제가 있다.
<div></div>
<div></div>
<div></div>
이 경우에 CSS는 세개의 <div>태그에 모두 color속성을 주게 된다. 하나의 색만을 바꾸고 싶어도 모두 바꿀 수 밖에 없는것이다.
그렇다면, 하나만 지정하고 싶은 경우엔 어떻게 해야할까?

이 경우의 해답은 id와 class를 사용하는것이다.
<div>태그의 attribute중 id와 class는 해당 요소에 id 혹은 class를 부여 할 수 있다. 이것은 해당 요소에 고유한 이름을 붙여 사용 할 수 있는것이다.

그렇다면 id와 class의 차이는 무엇일까?
id는 해당 요소에 고유한 값을 부여하는것이며, 이는 요소 하나당 하나의 id만 허용된다.
<div id="contents"></div>
와 같이 HTML문서에서 표현 할 수 있다.

class는 해당 요소에 고유한 값을 부여하는것은 같지만, 공백으로 요소를 구분 할 수 있다.
<div class="contents main_contetnts"></div>
<div class="contents sub_contents"></div>
처럼 공백으로 구분 할 수 있는것이 class의 특징이다.

HTML에서 id와 class를 입력했다면, 다음은 CSS에서 지정 할 차례이다.
CSS에서 id를 지정할땐 #을 사용한다.

#contents {
  color: red;
}

와 같이 나타낼 수 있다.

class를 지정할땐 .을 사용한다.

.contents {
  color: red;
}

와 같이 나타낸다.

이중 CSS에서는 class를 조금 더 많이 사용하지만,
id는 JavaScript에서 더 많이 사용 된다.

관심 있을 만한 포스트

0개의 댓글