css - id, class제어

1. CSS에서 클래스 혹은 아이디를 부여함.

 

1 2 3 4 5 6 7 8

#mainSet00{position:absolute;top:0;left:0;overflow:hidden;width:745px;height:390px;} .bg00{position:absolute;top:0;left:0;z-index:99;} .img00_00{position:absolute;left:39px;top:77px;z-index:99;} .img00_01{position:absolute;left:311px;top:120px;z-index:99;} .img00_02{position:absolute;left:395px;top:104px;z-index:99;} .img00_03{position:absolute;left:465px;top:87px;z-index:99;} .img00_04{position:absolute;left:586px;top:46px;z-index:99;} .img00_05{position:absolute;left:187px;top:234px;z-index:99;}

 

    1 : #mainSet00과 같이 "#"으로 시작하는것을 아이디 라고 부른다.

2~8 : .bg00~ 와 같이 "."으로 시작하는것을 클래스명 이라고 부른다.

 

 

2. HTML에서 CSS셀렉터를 이어받아 태그부여 및 정렬.

 

현재 CSS에서는 좌표와 뎁스밖에 없다. HTML에서 태그로 각 이미지들을 얹어준다.

1 2 3 4 5 6 7 8 9 10

<!-- motion01 --> <div id="mainSet00"> <img class="bg00" src="images/main/bg00.jpg"/> <img class="img00_00" src="images/main/00_00.png"/> <img class="img00_01" src="images/main/00_01.png"/> <img class="img00_02" src="images/main/00_02.png"/> <img class="img00_03" src="images/main/00_03.png"/> <img class="img00_04" src="images/main/00_04.png"/> <img class="img00_05" src="images/main/00_05.png"/> </div>

 

3. js에서 제이쿼리등을 이용하여 콘트롤.

 

1 2 3 4 5 6 7 8 9 10 11 12

//motion if(_activeNum == 0){ $('#mainSet00 img').css({'z-index':'99'}) $('#mainSet01 img').css({'z-index':'99'}) $('#mainSet02 img').css({'z-index':'99'}) $(".bg00").css({'z-index':'1000'}) $(".img00_00").css({'z-index':'1000',opacity:0,left:_posxArr[_activeNum][0]-100, top:_posyArr[_activeNum][0]}) $(".img00_01").css({'z-index':'1000',opacity:0,left:_posxArr[_activeNum][1]+200, top:_posyArr[_activeNum][1]+200}) $(".img00_02").css({'z-index':'1000',opacity:0,left:_posxArr[_activeNum][2]+100, top:_posyArr[_activeNum][2]+100}) $(".img00_03").css({'z-index':'1000',opacity:0,left:_posxArr[_activeNum][3]+100, top:_posyArr[_activeNum][3]+100}) $(".img00_04").css({'z-index':'1000',opacity:0,left:_posxArr[_activeNum][4]+100}) $(".img00_05").css({'z-index':'1000',opacity:0,top:_posyArr[_activeNum][5]+100})

 

3 : 아이디는 #으로 $("아이디명")

6 : 클래스는 .으로 .("클래스명") 으로 콘트롤 하여 제이쿼리에서 활용한다.