본문 바로가기

디자인/CSS 강좌

CSS 기초강좌 2 (Id와 Class)

반응형

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;}

   .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.



반응형