css 스타일 종합 4

으.. 4일차다.. 별로 진전이 없는것같다.. 귀찮아 죽겠다..

하나. jqery를 이용한 전원 on off 스타일 지정

전원을 on off 하는 버튼을 만들었는데.. 스타일 지정하기 너모 어렵당.

step 1. 초기에는 on 을 active시켜놓고 disabled 속성을 놓아준다.

<button id = "on" class="active" disabled> on </button> 이렇게! (.active일때 미리 스타일을 다르게 지정해 놓는다)

<button id = "off" > off </button>

step 2. jquery를 이용하여 on off 일때 서로 토글 되게 설정.

$('#on').click(function(){

let power = $('#on').attr('class');

if(power != 'active'){

$(this).addClass('active');

$('#off').removeClass('active');

$('#off').prop("disabled", false);

$('#off').removeAttr("disabled");

$(this).prop("disabled", true);

$(this).attr("disabled","disabled");

}

});

$('#off').click(function(){

let power = $('#off').attr('class');

if(power != 'active'){

$(this).addClass('active');

$('#on').removeClass('active');

$('#on').prop("disabled", false);

$('#on').removeAttr("disabled");

$(this).prop("disabled", true);

$(this).attr("disabled","disabled");

}

});

뜨하 ㅎㅎ  설명은 나중에 

더좋은 방법 아는 분있다면 언젣은지 환영

둘. div로 전체 화면 꽉 채우기

 .overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(51,51,51,0.7);
    z-index: 10;
  }

내가 해보니까 position:fixed 가 꼭 들어가야 하는거같다.

셋. 저번에 label 로 체크박스 이미지를 대체했었는데

더 찾아보니 이렇게 좋은 글이 있었따.  이해가 쏙쏙!

https://webisfree.com/2017-01-10/label-%ED%83%9C%EA%B7%B8%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%8B%A4%EC%96%91%ED%95%9C-%EB%B0%A9%EB%B2%95  label태그를 사용하는 다양한 방법

넷. jquery 부분인데 이건 배운적이 없어서 계속 찾아가면서 하고있다.

$(document.ready(){

});  

로 시작해야 한다던가.. 등등..