빠른 디지털 사후관리(유지보수)를 위한 html5 자바스크립트 : data옵션 다루기
자바스크립트를 위한 시나리오
- 화면에 버튼 2개가 있다.
- 첫번째 버튼 클릭 시 -> 화면 배경색 red
- 두번째 버튼 클릭 시 -> 화면이 원래대로 돌아옴
1. 화면에 버튼 2개 생성
.btns>button#red+button#default
HTML
<div class="btns">
<button id="red"></button>
<button id="default"></button>
</div>
2. data-변수명 (HTML5에서만 사용가능)
2-1. 첫번째 버튼 클릭하면 배경 red
- $('body').css( 'background', $(this).data('color') );
"방금 전에 이벤트 발생한 객체에 'color' 데이터 넣어두었다. 그걸 활용해라!"
<div class="btns">
<button data-color="red"></button>
<button id="default"></button>
</div>
<!-- --------------------------- -->
<script>
$('#red').click(function(){
$('body').css( 'background', $(this).data('color') );
}) //방금 전에 이벤트를 발생한 객체! 에다
//(color) 데이터를 넣어두었다 -> 그거 써라!
$('#default').click(function(){
$('body').removeClass('red');
})
</script>↓↓↓↓
- $('#red').html( $('#red').data('color') );
"#red 객체에 (data '변수("red"))를 삽입하겠다"
<script>
$('#red').html( $('#red').data('color') );
// html #red 에 -> (data '변수("red")) 넣겠다
$('#red').click(function(){
$('body').css( 'background', $(this).data('color') );
})
$('#default').click(function(){
$('body').removeClass('red');
})
</script>
2-2. < data-color="초록..빨강..노랑..." >
즉, 개발은 한번만!
유지보수는 (회사상주 웹디자이너가) HTML을 건드는 것이다!
- < button data-color="green">< /button>
- < button data-color="blue">< /button>
- < button data-color="red">< /button>
버튼 클릭 시, body에 '이벤트 발생한 객체의 데이터'의 배경색상정보(ex. red) 삽입
↑
좀 더 자세하게
↓
#default 제외한 버튼 클릭 시, body에 '이 데이터'의 배경색상정보(ex. red) 삽입
2-3. 자동으로 다수 처리하는 each 메서드
버튼 10개면..... 10개식 써야 하나? NO!
-> each 메서드를 사용해, 각자가 가진 data 'color'를 넣어라!
<script>
// 각각의 버튼들이 갖는 data 배경색 정보를 'color'에 삽입
$('.btns button').each(function(){
$(this).html( $(this).data('color') );
})
// #default 제외한 버튼 클릭 시, body에 '이 데이터'의 배경색 정보를 삽입
$('.btns button:not(#default)').click(function(){
$('body').css( 'background', $(this).data('color') );
})
</script>
2-4. 고객의 수정사항 발생, "버튼 텍스트를 수정해주세요"
<script>
// 각각의 버튼들이 가진 data의 'title'을 삽입
$('.btns button').each(function(){
$(this).html( $(this).data('title') );
})
// #default 제외한 버튼 클릭 시, body에 '이 데이터'의 배경색 정보를 삽입
$('.btns button:not(#default)').click(function(){
$('body').css( 'background', $(this).data('color') );
})
</script>
3. 두번째 버튼 클릭하면 배경색 원래대로
const oribg = 화면이 열리자마, 오리지널 배경색 저장해두라!
#default 객체 클릭 시, oribg (오리지널 배경색) 실행!
4. ex) 배경이미지 (=스와이프 원리)
4-1. 이미지 실전연습 1
HTML
<div class="btns">
<button data-title="이달의 신상" data-bgimg="http://skin-skin25.vivelab.cafe24.com/web/2022/banner0.jpg">html에서관리</button>
<button data-title="특가할인" data-bgimg="http://skin-skin25.vivelab.cafe24.com/web/2022/banner1.jpg">html에서관리</button>
<button data-title="멤버쉽혜택" data-bgimg="http://skin-skin25.vivelab.cafe24.com/web/2022/banner2.jpg">html에서관리</button>
</div>JQ
<script>
$('.btns button').each(function(){
$(this).html( $(this).data('title') )
// 각자가 가지고 있는 data의 'title'를 넣어라
})
$('.btns button').click(function(){
$('body').css( 'background-image', `url( ${ $(this).data('bgimg') } )` );
})
</script>버튼 클릭 시, { background-image }에 url( data-bgimg="이미지링크" )를 집어넣어라
4-2. 이미지 실전연습 2 - 첫화면에 이미지 나오도록!
HTML
<div class="btns">
<button data-title="이달의 신상" data-bgimg="http://skin-skin25.vivelab.cafe24.com/web/2022/banner0.jpg">html에서관리</button>
<button data-title="특가할인" data-bgimg="http://skin-skin25.vivelab.cafe24.com/web/2022/banner1.jpg">html에서관리</button>
<button data-title="멤버쉽혜택" data-bgimg="http://skin-skin25.vivelab.cafe24.com/web/2022/banner2.jpg">html에서관리</button>
</div>CSS
<style>
body{
background-repeat: no-repeat;
background-size: auto 100%;
min-height: 100vh; /* 배경에 들어가는 애들은 높이 반드시 설정! */
}
</style>
JQ
화면이 열리면 아래 명령을 실행하라!
$('body').css('background-image', url( ) );
↑↑↑↑↑
${ $('.btns button').eq(0).data('bgimg') }
// .btns 버튼들 중, 첫번째 놈의 data-bgimg를 body에 배경으로 삽입<script>
$('body').css( 'background-image', `url( ${ $('.btns button').eq(0).data('bgimg') } )` );
$('.btns button').each(function(){
$(this).html( $(this).data('title') )
})
$('.btns button').click(function(){
$('body').css( 'background-image', `url( ${ $(this).data('bgimg') } )` );
})
</script>
