프론트 프로그램/css - style
visibility 로 display 처럼 영역을 차지하지 않는 것 처럼 효과 주기
수유산장
2023. 7. 13. 22:36
이벤트에 따라 특정 영역을 보여주고 보여주지 않는 효과는
display 속성으로 하면 매우 간단하다.
하지만 동적으로 생성되는 영역은, 특히 가로 크기가 영역이 없어지면서 디자인이 뭉개지는 경우가 발생한다.
그럴때는 visibility를 이용하여 display: none 과 비슷한 효과를 주면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.sub {position:absolute; visibility: hidden; left: -10000px;}
.sub.active {visibility: visible; left: 0px;}
</style>
<script>
function show(num) {
document.querySelector('.active').classList.remove('active');
document.querySelector('#div'+num).classList.add('active');
}
</script>
</head>
<body>
<div>
header
</div>
<div>
<button onclick="show(1)">div1</button>
<button onclick="show(2)">div2</button>
<button onclick="show(3)">div3</button>
</div>
<div>
<div id="div1" class="sub active">111111111111111111111111<br>111111111111111111111111<br>111111111111111111111111<br>111111111111111111111111<br>111111111111111111111111<br>111111111111111111111111<br>111111111111111111111111<br>111111111111111111111111<br>111111111111111111111111<br>111111111111111111111111<br>111111111111111111111111<br>111111111111111111111111<br></div>
<div id="div2" class="sub">22222222222222222222222</div>
<div id="div3" class="sub">3333333333333333333333333</div>
</div>
</body>
</html>
목표 엘리먼트에 position: absolute를 주면
목표 엘리먼트가 모두 겹치게 된다.
이때 목표 엘리먼트들을 모두 visibility: hidden 으로하고
특정 목표 엘리먼트만 visibility: visible을 설정하면 된다.