웹은 html 로 이루어지며, html 은 태그로 이루어진다고 했다.

html 태그가 뭐지? --> https://blog.naver.com/jinn_o/221791684429

html 의 태그에는 속성을 부여할 수 있다.

​

예를 들어서 설명하겠다.

​

여기, div 태그가 있다. div 태그란, division 의 약자로써 어떠한 공간으로 분할해준다는 의미인데,

그냥 어떠한 내용을 넣을 하나의 공간을 만들어주는 태그이다.

​

그러면 이 때, div 태그 공간에 색깔을 넣고 싶다면?

​

이 때 사용하는 것이 css 속성 이다.

css 속성은 style 을 지정해서 하는 방식인데, 그에 대한 설명은 예전 포스팅에서 한 적이 있다.

css 로 style 속성 지정하기 --> https://blog.naver.com/jinn_o/221791684429

그런데 문제가 있다.

​

red 라는 style 속성을 주고 싶은 div 태그가 한 두개를 넘어 수 십개라면?

red 라는 style 속성을 주고 싶은 태그가 div 태그뿐만이 아니라면?

혹은, 일부 div 태그에는 해당 속성을 주고 싶지 않다면?

​

모든 div 태그에 일일히 style 태그를 따로 쓰고 있을 수가 없다.

이럴 때 쓰는 것이 바로 class 속성이다.

​

css 문서에

​

.red-color {

color : red;

}

​

라는 공통된 속성을 정의해놓고,

​

html 문서로 돌아와서 색깔을 빨갛게 하고 싶은 태그에다가

red-color 라는 style 을 "클래스"로써 추가해주면 되는 것이다.

그렇다면 id 속성은 뭘까?

​

범용적으로 반복적으로 같은 스타일을 적용하기 위해 쓰이는 class 속성과 다르게,

id 속성은 별명을 부여한다, 고 이해하면 쉽겠다.

​

그래서 id 속성은 보통 많은 태그들이 가져다 쓰는 것이 아니라,

한 가지의 특별한 태그에게만 한 번만 부여되는 별명인 것이다.

​

그래서 만약, 같은 태그에 class 와 id 태그가 모두 부여되어 있을 때에는,

id 속성의 서열이 더 높기 때문에 지정된 스타일이 상반된 경우에는

(예 : class 속성은 red 부여, id 속성은 blue 부여)

id 속성의 손을 들어준다.

< class 속성과 id 속성의 사용 방법 >

* 주의사항

class 태그는 css 문서 안에서 . (점) 으로 시작하고,

id 태그는 css 문서 안에서 # (샾) 으로 시작한다!

​