|
스타일 시트 CSS 특정 스타일을 적용하기 위한 CLASS, ID 속성 사용법 |
이전에는 태그에 스타일을 셋팅 했기 때문에 모든 태그는 동일한 설정 값이 적용됩니다. 그럼 동일한 태그에 다른 설정 값을 적용하려면 어떻게 해야 할까요? 그 때는 CLASS 와 ID 속성을 사용하시면 됩니다. 클래스와 아이디의 차이점은 클래스는 HTML 문서에 여러 번 사용이 가능하지만 아이디(ID) 는 한 번만 사용이 가능합니다.
|
¤ CLASS 속성 사용하기 |
▼ CLASS 는 “.” 다음에 클래스명을 넣고 중괄호 안에 속성과 값을 셋팅 하면 됩니다. 클래스 앞에 태그가 있다면 해당 태그에만 스타일 적용을 받게 됩니다. 아래 소스는 클래스명 box 을 만들어서 div 에 적용한 결과 입니다. box 앞에 콤마가 있으므로 클래스입니다.
|
<style type="text/css"> .클래스명{ 속성:값; } </style>
<태그 class="클래스명"></태그> |
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
body {
background-color: #e78e52;
}
.box{
width:300px;
height:100px;
background-color:yellow;
}
</style>
</head>
<body>
<div class="box">
CLASS 속성 사용하는 방법
</div>
</body>
</html>
|
¤ ID 속성 사용하기 |
▼ ID 속성은 클래스와 달리 “#” 을 사용합니다. ID 는 CLASS 와 달리 전체 문서에 한번만 사용이 가능합니다. 그래서 특정 태그를 꾸밀게 아니라면 주로 CLASS 를 사용합니다. 아래 샘플처럼 box 앞에 콤마가 아닌 “#” 을 넣게 되면 ID 가 됩니다.
|
<style type="text/css"> #아이디명{ 속성:값; } </style>
<태그 id="아이디명"></태그> |
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
body {
background-color: #e78e52;
}
#box{
width:300px;
height:100px;
background-color:yellow;
}
</style>
</head>
<body>
<div id="box">
ID 속성 사용하는 방법
</div>
</body>
</html>
'웹 프로그래밍 > 스타일시트 CSS' 카테고리의 다른 글
| 스타일 시트 CSS width 와 height 속성 사용법 (0) | 2020.01.17 |
|---|---|
| 스타일시트 CSS 마우스오브(Mouseover) 이미지 테두리 적용 (0) | 2020.01.16 |
| 스타일 시트 CSS 가장 기본적인 내용과 스타일을 삽입하는 여러가지 방법 (1) | 2020.01.12 |
| 스타일 시트 CSS 이벤트 마다 적용할 수 있는 가상 클래스 사용하는 방법 (0) | 2020.01.10 |
| 스타일 시트 CSS 배경색, 이미지 지정하는 background 속성 알아보기 (0) | 2020.01.04 |
| 스타일시트 CSS 가운데 정렬하는 방법, text-align 과 margin 이용 (1) | 2020.01.03 |
| 스타일시트 CSS text-align 을 이용한 정렬 방법 (1) | 2019.12.29 |
| 스타일시트 CSS margin 을 주는 방법 (2) | 2019.11.23 |
