[HTML] class와 id의 정의

특정 문단에만 및 태그에만 속성이나 스크립트를 적용하려면 클래스를 사용하면 된다.
정의하는 방법은 .class_name 같이 .으로 정의한다.
클래스는 모든 엘리먼트 태그에 여러개, 다중으로 사용이 가능하다.

<style type="text/css">
span.red {color:red}
</style>
<div class="red">class를 정의한 곳에만 red 효과 부여</div>
<div><span class="red">red</span>효과 부여 테스트</div>

span 태그에 red라는 클래스가 정의가 되면, red가 정의된 엘리먼트에는 스타일이 적용이 된다.
하지만 div에 적용된 red 클래스는 적용되지 않는다.

또한 특정 HTML 요소에 적용시키지 않고 독립적으로 클래스를 사용해도 된다.
이럴 경우 red class가 지정되어있는 모든 엘리먼트 태그에 스타일이 적용이 된다.
<style type="text/css">
.color_red{color:red}
</style>
<div class="color_red">class를 정의한 곳에만 red 효과 부여</div>
<div><span class="color_red">red</span>효과 부여 테스트</div>

이와 같이 클래스를 독립적으로 지정하는 방법이 편리하므로 더 많이 사용된다.

아이디(id) 선택자
아이디는 클래스와 구분을 지어놔야하기 때문에 #을 이용하여 정의한다.
클래스와 다르게 아이디 같은 경우에는 고유성을 가지고 있기 때문에 한 html 파일에 하나의 id만 정의가 가능하다.
<style type="text/css">
#id_red {color:red}
</style>
<div class="id_red">id를 정의한 곳에만 red 효과 부여</div>
<div><span id="id_red">red</span>효과 부여 테스트</div>

홈페이지를 비슷하게 만들고 똑같은 레이아웃이 있을 경우에는 class를 사용하는게 통상적이다.

그리고 클래스가 정의되고 사용할 때 스타일 적용 순서는 css에서 제일 나중에 선언된 것이 적용된다.

즉,

<style type="text/css">
.red {color:red}
.blue {color:blue}
</style>
<div class="red blue">클래스 정의 값에 따른 CSS 적용 순서</div>
<div class="blue red">클래스 정의 값에 따른 CSS 적용 순서</div>

이렇게 넣었을 경우에 blue가 제일 나중에 적용된 css 이기 때문에 위 아래 div에 둘다
color: blue 값이 적용되게 되는 것이다.

정책상 특정 부분에 밑줄을 넣어라! 라고 하는 부분에는 class로 text-decoration을 주면 되는 것이다.