On, Off 버튼 만들기

 

<span class="btn"><span>
이미지 : 140px(가로) 100px(세로)
.btn{display:inline-block; width:140px; height:50px; } 하면
아래 그림과 같이 배경이미지가 있는 dom 요소가 됨.

////////////// Jquery //////////////
$(function(){

$(".btn").on("click", function(){

var objHeight = $(this).css("background-position-y"); //배경이미지의 y좌표를 가져옴.

if(objHeight != "-50px"){

$(this).css({"background-position-y" : "-50px"});

}else{

$(this).css({"background-position-y" : "0px"});

}

});

});


하면 on, off 버튼을 만들수 있음.


참고사항 ) 이미지를 두개 붙여서 작업하는 이유는
이미지가 처음 로드될때 on, off 이미지를 한번에 불러와서 깜박이는 증상이 없는데
이미지를 두개로 나누어서 작업을 하게 되면
클릭할때 마다 이미지 부분이 깜박임.

CSS 우선순위

CSS 우선순위는


1. 인라인 방식
<div style="border:1px solid #333;"></div>
와 같이 소스에 바로 기입하는 inline방식


2. id 방식
<div id="test"></div>


3. class 방식
<div class="test2"></div>


4. dom
<p></p>


ex)
<p id="test1" class="test2">1</p>
#test1{font-size:20px; }
.test2{font-size:10px; }


인경우 우선 순위에 의해서 #test1소스가 적용됨.
즉 font-size:20px; 만 적용됨.


참고사항)
css 에서 id, class의 차이점은
id는 한 화면에 고유 값으로 id값 하나만 인정됨.
즉 제일 처음으로 선언된 id만 아이디 값으로 인정.
class는 한화면에 여러개 사용가능.
또한 class는 다중으로 사용이 가능


ex)
<div id="test" class="test2 test3"></div>
<div id="test" class="test2 test4"></div>
<div id="test2"></div>
위와 같은 경우 아이디는 test(처음에 선언된 아이디 값), test2 만 아이디가 됨.


그리고 class는 test2 (한칸띄고) test3 와 같이 dom 하나에 여러 클래스를 넣을 수 있음.
그래서 class는 상속의 계념으로 사용하면 좋음.




클래스 상속의 예.
ex)
.btn1{font-size:20px; display:inline-block; background:#333; }
.btn2{background:#000; }
<span class="btn1 btn2">테스트</span>


이렇게 하면 테스트란 글씨을 가진 dom은
font-size : 20px, display:inline-block가 되고,
배경색은 #000인 dom객체가 됨.


공통속성은 받고, 변경하고 싶은 부분만(여기서는 배경색)만 바꿈.
오버라이딩(overwriting)의 개념..맞나 모르겠네..

css height:100% 유지하기

css의 height 100% 유지하기

<div class="container">

<div class="grayBox">

<div class="blueBox">

</div>

<div class="orangeBox">

</div>

</div>

</div>

body,html{width:100%; height:100%;}
.container{width:100%;height:100%;}
.grayBox{width:100%; height:100%; padding:50px; box-sizing:border-box; position:relative;}
.blueBox{width:100%; height:50px; position:absolute; left:0; top:0; }
.orangeBox{width:100%; height:100%; position:relative; }

오렌지박스 100%로 유지.

 

 

position:absolute와 position:relative 활용

<div class="test1">

<div class="test2">2</div>

</div>

.test1{position:relative; width:200px; height:200px; margin-left:100px; margin-top:100px; }

.test2{position:absolute; width:50px; height:50px; left:0px; top:0px; }

일 경우

.test2 의 위치는 기준점이 모니터 좌측상단 (0, 0)가 아니라 test1 요소의 왼쪽 최상단이 기준점이 됨.

그러므로 실질적인 .test2의 위치는 .test1의 margin값 (100, 100)에 위치

 

 

모니터 정가운데에 요소 중앙에 띄우기

<div class="test">1<div>


.test{position:absolute; width:300px; height:200px; }

일경우

.test의 left:50%; top:50%; 으로 위치를 옮기고
margin-top:-(height/2)px;
margin-left:-(width/2)px;
하면 해당 요소을 모니터 정가운데에 띄울 수 있음.

위 css을 수정해 보면
.test{position:absolute; width:300px; height:200px; left:50%; top:50%; margin-left:-150px; margin-top:-100px;}
와 같음.

position:absolute 와 position:relative;

position:absolute 와 position:relative;


ex)
<div class="test">1<div>
<div class="test2">2</div>
<div class="test3">3</div>


position:absolute - width, height값을 명시하지 않았을 경우 width, height 가 0 으로 설정됨. 그러므로 css에 width값과 height값 명시
position:relative   - width, height값을 명시하지 않았을 경우 width 값 100%(display:block), height값을 기본 block값


.test1{position:absolute; width:100%; height:100%;}
.test2{width:100px; height:100px;}
.test3{position:relative; width:200px; height:100px;}


.test1의 위치값 :  top:0px, left:0px;
.test2의 위치값 : x :0px, y:0px;
.test3의 위치값 : x:100px, y:0px;


position:relative는 먼저 있던 요소(.test2) 다음에 위치하지만 postion:absolute는 요소의 위치와 상관없이
모니터 제일상단(0,0)에 위치함.


레이어 순서는 test1에 맨 밑이고 test2, test3은 같은위치


test1을 제일 위로 가져오려면 z-index을 사용하여 제일 위로 가져옴.

overflow:hidden 으로 float 로 지정된 요소 감싸기

<ul>

<li style="float:left">1</li>

 <li style="float:right">2</li>

</ul>

<div class="test"> test</div>

위외 같을 경우 float의 명령으로 <div class="test"></div>가 영향을 받음.

위 요소를 float 영향을 받지 않기 위해서

.test{ clear:both; } 명령을 주기도 하고

ul{overflow:hidden; } 명령을 주기도 함.

css핵을 사용하기도 함.

방법은 여러가지 있음.

그중에 내가 즐거 사용하는 방법은 overflow:hidden;을 즐겨 사용함.