css 문법 질문 채택완료
안녕하세요
어제 css display:none; 와 display:block;이 정상작동 되지 않는다 질문하였었습니다
[어제 질문] http://sir.kr/qa/516692?&vpage=1
아직 해결되지 않아 염치불구하고 다시 글을 적어봅니다
확인해보니 제가 css에서 스타일이 들어갈 id의 위치를 잘못 지정 한 것 같더군요
그런데 어디에서 잘못 지정이 된건지, id 수정을 어떻게 하면 좋을지 알 수가 없어서 질문 드립니다.
[요약]
1. 제가 css에서 id의 위치를 잘못 지정한 것 같은데, 어디를 잘못 적은건지 알 수가 없습니다
2. 팝업을 닫는 button을 눌렀을 때 체크박스가 정상작동 되지 않는 것 같습니다. checkbox의 id와 label의 id를 동일하게 준 것 처럼, button에도 checkbox와 같은 id를 주어야 할까요?
3. 그 외에도 css 코드 내에서 쓰이지 않는 부분이나, 제가 잘못 적은 부분이 존재할까요??
html
</p>
<p> <!--바탕화면--></p>
<p> <div id="desktop"></p>
<p> <div class="desktop-icons"></p>
<p> </p>
<p> <!--체크박스 모음--></p>
<p> </p>
<p> <!--온라인--></p>
<p> <input type="checkbox" id="online"></p>
<p> <!--내 컴퓨터--></p>
<p> <input type="checkbox" id="my-computer"></p>
<p> <!--내 문서--></p>
<p> <input type="checkbox" id="my-documents"></p>
<p> <!--음악--></p>
<p> <input type="checkbox" id="music"></p>
<p> <!--주소록--></p>
<p> <input type="checkbox" id="contact"></p>
<p> <!--휴지통--></p>
<p> <input type="checkbox" id="trash"></p>
<p>
</p>
<p> <div class="desktop-icon windows-online" title="windows online"></p>
<p> <!--온라인 아이콘--></p>
<p> <label for="online" class="desktop-icon"></p>
<p> <div class="icon"></p>
<p> <div class="icon"></p>
<p> <img src="../img/WindowsIcon01.png" alt="" /></p>
<p> </div></p>
<p> <div class="text">인터넷</div></p>
<p> <div id="online_layer"></p>
<p> </p>
<p> <!--팝업창--></p>
<p> <div id="popup"></p>
<p> </p>
<p> <div class="topbar"></p>
<p> </p>
<p> <p>제목</p></p>
<p> </p>
<p> <div class="ctrl"></p>
<p> <!--파란창 버튼 부분--></p>
<p> <!--X를 누를 시 팝업이 none가 되어야함--></p>
<p> <button aria-label="Minimize">ㅡ</button></p>
<p> <button aria-label="Maximize">ㅁ</button></p>
<p> <button aria-label="Close">X</button></p>
<p> </div></p>
<p> <!-- <label for="online">X</label> --></p>
<p> </div></p>
<p> </p>
<p> <div class="navbar"></p>
<p> <!--파란바 아래 도구창--></p>
<p> <ul></p>
<p> <li><a href="">파일(F)</a></li></p>
<p> <li><a href="">편집(E)</a></li></p>
<p> <li><a href="">보기(V)</a></li></p>
<p> <li><a href="">도움말(H)</a></li></p>
<p> </ul></p>
<p> </div></p>
<p> </p>
<p> <h2></p>
<p> 콘텐츠</p>
<p> </p>
<p> </h2></p>
<p> 콘텐츠 바로보기</p>
<p> <li><a href="">바로보기</a></li></p>
<p> </p>
<p> </div></p>
<p> </p>
<p> </div></p>
<p> </div></p>
<p> </label></p>
<p> </div></p>
<p>
css
</p>
<p> </p>
<p> .desktop-icon img {</p>
<p> /*인터넷 아이콘 크기*/</p>
<p> width: 3rem;</p>
<p> margin: 0 0 0.75rem 0;</p>
<p> }</p>
<p> </p>
<p> #online {</p>
<p> /*온라인 체크박스 숨기는 거*/</p>
<p> /*display: none;*/</p>
<p> }</p>
<p> </p>
<p> #online+label {</p>
<p> /*온라인 버튼*/</p>
<p> display: inline-block;</p>
<p> padding: 7px 14px;</p>
<p> }</p>
<p> </p>
<p> #online_layer {</p>
<p> /*인터넷 팝업창 영역*/</p>
<p> display: none;</p>
<p> position: absolute;</p>
<p> top: 0;</p>
<p> left: 0;</p>
<p> width: 100%;</p>
<p> height: 100%;</p>
<p> </p>
<p> display: flex;</p>
<p> align-items: center;</p>
<p> justify-content: center;</p>
<p> }</p>
<p> </p>
<p>#online_layer>#popup {</p>
<p> /*인터넷 팝업창*/</p>
<p> position: absolute;</p>
<p> box-sizing: border-box;</p>
<p> width: 600px;</p>
<p> height: 400px;</p>
<p> border: 1px solid black;</p>
<p> background: #c0c0c0;</p>
<p> color: black;</p>
<p> </p>
<p> border-top: 2px solid #fff;</p>
<p> border-left: 2px solid #fff;</p>
<p> border-right: 2px solid #000;</p>
<p> border-bottom: 2px solid #000;</p>
<p> }</p>
<p> </p>
<p>#online_layer>#popup>h2 {</p>
<p> /*제목*/</p>
<p> margin-bottom: 25px;</p>
<p> }</p>
<p> </p>
<p>#online:checked+.label+#online_layer {</p>
<p> display: flex;</p>
<p> flex-direction: column;</p>
<p> align-items: center;</p>
<p> justify-content: center;</p>
<p> /*display: block;*/</p>
<p> }</p>
<p> </p>
<p>
답변 2개
id가 온라인인 체크박스가 체크상태 일 때, online-layer를 출력하는 게 목적이신거 같은데,
기본적으로 id가 online인 체크박스의 형제요소는 뒤에 나오는 체크박스와 desctop-icon 클래스를 가진 div가 형제요소입니다.
css + 연산자는 바로 뒤의 형제요소
css ~ 연산자는 모든 형제요소를 의미합니다.
#online:checked ~ desctop-con #online-layer 정도로 선택할 수 있을 듯 한데,
구조를 다시 짜는 걸 추천해 드립니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
#online_layer {
/*인터넷 팝업창 영역*/
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
} //이것 디스플레이 두개 가 정의 되어있는데 중복은 맞지 않아요
display: flex; 지워주세요
답변에 대한 댓글 2개
체크박스와 라벨을 연결하려면 for 속성을 사용하여 체크박스의 id와 라벨의 속성을 일치시켜야 한다는거죠
#online:checked ~ .desktop-icons #online_layer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
<script>
function closePopup() {
document.getElementById('online').checked = false;
}
</script>
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
https://homzzang.com/b/css-37