반응형
CSS Id와 Class
CSS는 HTML 요소(태그,속성 등)들에 대한 스타일 설정합니다.
또한 'Class'와 'Id'라고 불리는 셀렉터를 이용하여 사용자가 직접 스타일을 지정할 수 있다.
- Id는 주로 한페이지에 한번만 나오는 내용에 대해 설정할때 사용된다 (예,메뉴바,copyright,상단헤더 등)
- Id 셀렉터는 기호 "#"을 사용한다. (외국인이 읽을때는 "해쉬 또는 파운드"라고 읽더군요)
- Class는 Id셀렉터와 달리 여러가지 요소들을 지정할때 주로 사용된다. (body안의 내용에 대한 스타일 적용시..)
- Class는 동일한 Class로 여러 HTML 요소의 스타일을 설정할 수 있다.
- Class는 기호 "."을 사용한다.
- Id와 Class 이름으로 숫자는 사용할 수 없다.
도데체 id와 class는 언제 써야 하는 것인가?
id는 웹표준에서 중복지정을 허용하지 않는다는군요.
즉 2개이상의 엘리먼트(HTML 태그등..)에 같은 id를 지정할 수 없습니다.
반면 class는 여러곳에 중복적으로 지정하는 것을 허용합니다.
또한 하나의 엘리먼트에 여러가지의 class를 겹쳐서 지정할 수 있다.
예를 들면 아래와 같이 쓸 수도 있다.
<style>
.mss{font-size: 35px;}
.qqq{color: red;}
.ppp{border:1px solid #999;}
</style>
<div class="mss qqq ppp">동물의 왕국</div>
이러한 이유로 id는 주로 레이아웃을 짤때 이용하고 class는 컨텐츠를 다룰때 사용한다.
예제
<html>
<head>
<style>
#para1{text-align:center;color:red;}
<head>
<style>
#para1{text-align:center;color:red;}
.center{text-align:center;}
</style>
</head>
<body>
<p id="para1">중앙정렬된 빨간색 Id</p>
<h1 class="center">중앙정렬된 Class H1</h1>
<p class="center">중앙정렬된 Class P</p>
</body>
</html>
결과
중앙정렬된 빨간색 Id
중앙정렬된 Class H1
중앙정렬된 Class P
즐거운 하루 되세요 Vanxy.
반응형
