※ 예제
<html>
<i id="print" style="cursor: pointer; " class="fa fa-print print-button"></i>
- style="cursor: pointer; " : 커서모양을 클릭상태로 변경
<html><style>
@media print {
.print-button { display:none;} : print상태(Alt+p)가 될 경우 제외시킨다.
}
</style><script>
$('#print').on('click', function(){
window.print(); // 클릭액션 : 버튼클릭시 인쇄창팝업
});
$('#print').mouseover(function(){
$(this).css("color",'#cdee1d'); // 마우스오버액션 : 커서가 올라갈 경우 다른색상으로 변경
});
$('#print').mouseleave(function(){
$(this).css("color",'#0c4276'); // 마우스릴리즈액션 : 커서가 밖에 위치할 경우 기존색상으로 변경
});
</script>@media ?
: 미디어 쿼리라 불리며, 화면(screen), 티비(tv), 프린터(print)와 같은 미디어 타입(media type)과 적어도 하나 이상의 표현식(expression)으로 구성됩니다.
ex) @media print{ }, @media tv{ }, @media screen{ } ...
표현식을 width, height, color와 같은 미이어 특성들을 이용하여 그 특성들의 상태에 따라 다른 스타일 시트를 적용할 수 있습니다.
※ 문법 예시
<style media=“속성값”>※ 속성값
※ 속성값에 사용할 수 있는 장치
🔥 머릿속으로 생각하지만 말고, 행동으로 보여줘