반응형
다음과 같이 특정 이미지 바깥의 배경을 흐리게 만드는 방법이 있다.
HTML
<body>
<input type="checkbox" id="switch" /><label for="switch">Toggle</label>
<!-- Toggle -->
<div class ='box'>토글을 클릭하세요</div>
<!-- 이 div 태그 바깥 화면을 흐리게 만들 것임 -->
<script src='c.js'>
</script>
</body>
CSS
아래 CSS코드의 가장 밑에 있는 .hiddenback 클래스가 box-shadow 효과를 준다.
<div class='box'></div>태그에 .hiddenback 클래스를 추가해주면 div태그 바깥의 화면이 흐려진다.
box의 주변에 그림자를 넣는 방식이다. 모니터가 9999px보다 크다면 더 큰 px을 입력해야 한다.
.box {
/* border : 1px gray solid; */
width : 100px;
height:100px;
position : fixed;
top : 100px;
background-color :transparent;
}
/* 바깥화면 흐리게하기 */
.hiddenback{
position : fixed;
box-shadow : rgba(0,0,0,0.5) 0 0 0 9999px, rgba(0,0,0,0.5) 2px 2px 3px 3px;
z-index : 100;
}
JS
DOM을 이용해서 토글을 클릭할때마다 div태그에 hiddenback 클래스가 추가되거나 삭제되도록 했다.
const toggle = document.querySelector('label')//토글
const box = document.querySelector('.box')//div태그
//클릭할때마다 콜백실행
toggle.addEventListener('click',()=>{
const cssList = box.classList.value;
if(!cssList.includes('hiddenback')){//hiddenback클래스가 없으면
box.classList.add('hiddenback')//hiddenback추가-> 주변 어두워짐
box.textContent = 'switchOFF'//switchOFF 입력
}
else {//hiddenback 클래스가 있으면
box.classList.remove('hiddenback')//hiddenback제거->주변밝아짐
box.textContent = 'switchON'//switchON 입력
}
})
전체 CSS
/* 토글 */
input[type=checkbox]{
height: 0;
width: 0;
visibility: hidden;
}
label {
cursor: pointer;
text-indent: -9999px;
width: 100px;
height: 40px;
background: rgb(247, 145, 86);
display: block;
border-radius: 100px;
position: relative;
}
label:after {
content: '';
position: absolute;
top: 5px;
left: 5px;
width: 30px;
height: 30px;
background: rgb(235, 202, 152);
border-radius: 90px;
transition: 0.3s;
}
input:checked + label {
background: #dd8015;
}
input:checked + label:after {
left: calc(100% - 5px);
transform: translateX(-100%);
}
label:active:after {
width: 130px;
}
/* 배경화면 */
body {
background-image: url('./jjangkoo/a.jpg');
background-repeat: no-repeat;
background-size:100% 100%;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* 바깥화면 흐리게하기 */
.box {
/* border : 1px gray solid; */
width : 100px;
height:100px;
position : fixed;
top : 100px;
background-color :transparent;
}
.hiddenback{
position : fixed;
box-shadow : rgba(0,0,0,0.5) 0 0 0 9999px, rgba(0,0,0,0.5) 2px 2px 3px 3px;
z-index : 100;
}
반응형
'개발 > CSS' 카테고리의 다른 글
| position : absolute (0) | 2021.11.06 |
|---|---|
| position : relative와 absolute (0) | 2021.10.17 |
| CSS flex box (0) | 2021.08.01 |
| 웹 폰트 사용법 (0) | 2021.07.26 |
| HTML요소의 block 특성과 inline 특성 (0) | 2021.07.24 |
