css 질문좀드리겠습니다.
본문
css로 클릭하면 check-meun 이부분이 나오게끔 만들고 있는데
잘안되서 그러는데 뭐가 문제 인지 궁금합니다 ㅠㅠ
<style>
#check-box { display: none; }
#check-box:checked ~ .check-meun { display: block; }
.check-meun {display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba( 1, 1, 1, 0.5 );
z-index: 999;}
.check-co { z-index: 999;
padding: 60px 0 100px;
left: 0;
top: 0; width: 100%;
height: 430px;background-color: #fff; }
</style>
<input id="check-box" type="checkbox" />
<label for="check-box">qjxms</label>
<div class="check-meun">
<div class="check-co">
sadsadsadasd
</div>
</div>
</style>
답변 2
chatGPT
<style>
#check-box { display: none; }
#check-box:checked + .check-meun { display: block; }
.check-meun {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba( 1, 1, 1, 0.5 );
z-index: 999;
}
.check-co {
z-index: 999;
padding: 60px 0 100px;
left: 0;
top: 0;
width: 100%;
height: 430px;
background-color: #fff;
}
</style>
<input id="check-box" type="checkbox" />
<label for="check-box">qjxms</label>
<div class="check-meun">
<div class="check-co">
sadsadsadasd
</div>
</div>
답변주셔서 감사합니다.
아래와같이 적용시에는 또 안되는데 어떤문제가 있을까요 ㅠㅠ?
<style>
#check-box { display: none; }
#check-box:checked + .check-meun { display: block; }
.check-meun {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba( 1, 1, 1, 0.5 );
z-index: 999;
}
.check-co {
z-index: 999;
padding: 60px 0 100px;
left: 0;
top: 0;
width: 100%;
height: 430px;
background-color: #fff;
}
.block2 {border:2px solid #d81f25; padding:0 5px; height:20px; overflow:hidden; background:#fff; width:100px; font-family:Gulim; font-size:12px;}
.block2 ul, .block2 li {margin:0; padding:0; list-style:none;}
.block2 li a {display:block; height:20px; line-height:20px; color:#555; text-decoration:none;}
.block2 li span {padding:2px 5px; background:#d81f25; color:#fff; font-weight:bold; margin-right:3px;}
</style>
<div class="block2">
<ul id="ticker1">
<li><span>1</span>
<input id="check-box" type="checkbox" />
<label for="check-box"> 111 </label>
</li>
<li><a href="#"><span>2</span> 손연재</a></li>
<li><a href="#"><span>3</span> 유아니</a></li>
<li><a href="#"><span>4</span> 차승원</a></li>
<li><a href="#"><span>5</span> 전지현</a></li>
<li><a href="#"><span>6</span> 유이</a></li>
<li><a href="#"><span>7</span> 손연재</a></li>
<li><a href="#"><span>8</span> 손연재</a></li>
<li><a href="#"><span>9</span> 손연재</a></li>
</ul>
</div>
<div class="check-meun">
<div class="check-co">
sadsadsadasd
</div>
</div>
<script>
$(function() { var ticker = function() { setTimeout(function(){ $('#ticker1 li:first').animate( {marginTop: '-20px'}, 400, function() { $(this).detach().appendTo('ul#ticker1').removeAttr('style'); }); ticker(); }, 5000); }; ticker(); });
</script>
잘 실행 되는데요.
위와 같은 코드로 구현하고 있는데 클릭하면 check-meun이 나오지 않습니다.
이 문제를 해결하기 위해서는 여러가지 요소를 고려해볼 필요가 있습니다. 첫번째로 코드 상의 문법 오류를 확인해보시기 바랍니다. 그 다음으로는 레이아웃이 적절하게 구성되었는지 확인해보시기 바랍니다. 또한, 자바스크립트 코드에 문제가 있는지도 확인해보시기 바랍니다. 마지막으로는 브라우저의 개발자 도구를 이용해 디버깅을 해보시기 바랍니다.
