선택자를 사용할 수 있다.<div>태그로만 이루어진 내용</div>
<h1 id="title">아이디 속성을 가지는 제목</h1>
<p class="news-content font14 font-lighter">여러개의 클래스 속성을 가지는 내용</p>
<style>
h1 {
/* h1 태그의 스타일링 작성 */
}
#title {
/* title 아이디를 가지는 태그의 스타일링 작성 */
}
.news-content {
/* news-content 클래스를 가지는 태그의 스타일링 작성 */
}
.font14 {
/* font14 클래스를 가지는 태그의 스타일링 작성 */
}
.font-lighter {
/* font-lighter 클래스를 가지는 태그의 스타일링 작성 */
}
</style>
| 방법 | 장점 | 단점 | 사용 빈도 |
|---|---|---|---|
| 태그 이름 | 간편하다, HTML 코드를 건드리지 않아도 된다. | 한 페이지에 여러개의 동일한 태그가 왔을때 구분 불가능 (공통 스타일로만 사용함) | 하 |
| 아이디 (id) | 고유성을 가지기 때문에 자신만 지정된다. |
여러 요소에 적용 불가능하므로 공통 스타일을 사용하기 어렵다. | 중 또는 하 |
| 클래스 (class) | 재사용성이 좋고, 여러개의 클래스를 가질 수 있다. | 여러개의 클래스 스타일이 맞물리면 좀 복잡하다. | 상 |