공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/HTML

id와 class의 사용

serpiko 2013. 10. 13. 21:50

id는 웹표준에서 중복지정을 허용하지 않음.

 

즉, 두개 이상의 앨리먼트에 같은 아이디 지정 불가.

 

반면에 클래스는 중복지정을 허용.

 

id = 주로 레이아웃을 짤 때.

 

class = 콘텐츠를 다룰 때 사용.

 

<div id="Layer1" style="position:ab-solute; left:왼쪽공백px; top:위쪽공백px; width:너비px; height:높이px; z-index:1;"></div>

 

이렇게 공통적인 속성을 css로 정의해준뒤에, div태그안에서 class로 정의하여 사용.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
 
<!DOCTYPE html>
<html>
 <head>
  <title>banner rotation</title>
  <style>
   body {margin: 0;}
    .containerClass {position:absolute;overflow:hidden;width:550px;height:150px;}
    .absolute {position:absolute;}
    .bgColor {background-color:#ff0000}
  </style>
 </head>
 
 <!------------------------ html ------------------------>
 <body>
  <div id="container">
   <div id="imgContainer" class="containerClass">
    <img id="image0" src="image0.jpg"/>
    <img id="image1" src="image1.jpg"/>
    <img id="image2" src="image2.jpg"/>
   </div>
  </div>

 

제이쿼리 css적용. 

1
2
3
4
5
 
for(i=0; i<len; ++i){
    $("#image"+i).css({"z-index":this._depth[i]});
    $("#image" +i).animate({"left":this._xPos[i]}, this._speed);
    $("#image" +i).animate({"top":this._yPos[i]}, this._speed);
   }

 

저작자표시 비영리 변경금지

'■ 프론트엔드 ■ > HTML' 카테고리의 다른 글

기본 태그 정리  (0) 2013.10.13
ul,li 태그 - 순서가 없는 목록지정  (0) 2013.10.13
document.getElementsByTagName() - 태그 접근  (0) 2013.10.13
document.getElementById() - ID 접근  (0) 2013.10.13
DOM example  (0) 2013.10.13
댓글