이벤트에 따라 특정 영역을 보여주고 보여주지 않는 효과는
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을 설정하면 된다.
'프론트 프로그램 > css - style' 카테고리의 다른 글
| ie11에서 fieldset width 문제 - angular primeng p-filedset (0) | 2021.09.03 |
|---|---|
| 크롬 브라우저별 css, style 다르게 적용하기 (0) | 2019.09.18 |