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
<!--바탕화면-->
<div id="desktop">
<div class="desktop-icons">
<!--체크박스 모음-->
<!--온라인-->
<input type="checkbox" id="online">
<!--내 컴퓨터-->
<input type="checkbox" id="my-computer">
<!--내 문서-->
<input type="checkbox" id="my-documents">
<!--음악-->
<input type="checkbox" id="music">
<!--주소록-->
<input type="checkbox" id="contact">
<!--휴지통-->
<input type="checkbox" id="trash">
<div class="desktop-icon windows-online" title="windows online">
<!--온라인 아이콘-->
<label for="online" class="desktop-icon">
<div class="icon">
<div class="icon">
<img src="../img/WindowsIcon01.png" alt="" />
</div>
<div class="text">인터넷</div>
<div id="online_layer">
<!--팝업창-->
<div id="popup">
<div class="topbar">
<p>제목</p>
<div class="ctrl">
<!--파란창 버튼 부분-->
<!--X를 누를 시 팝업이 none가 되어야함-->
<button aria-label="Minimize">ㅡ</button>
<button aria-label="Maximize">ㅁ</button>
<button aria-label="Close">X</button>
</div>
<!-- <label for="online">X</label> -->
</div>
<div class="navbar">
<!--파란바 아래 도구창-->
<ul>
<li><a href="">파일(F)</a></li>
<li><a href="">편집(E)</a></li>
<li><a href="">보기(V)</a></li>
<li><a href="">도움말(H)</a></li>
</ul>
</div>
<h2>
콘텐츠
</h2>
콘텐츠 바로보기
<li><a href="">바로보기</a></li>
</div>
</div>
</div>
</label>
</div>
css
.desktop-icon img {
/*인터넷 아이콘 크기*/
width: 3rem;
margin: 0 0 0.75rem 0;
}
#online {
/*온라인 체크박스 숨기는 거*/
/*display: none;*/
}
#online+label {
/*온라인 버튼*/
display: inline-block;
padding: 7px 14px;
}
#online_layer {
/*인터넷 팝업창 영역*/
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#online_layer>#popup {
/*인터넷 팝업창*/
position: absolute;
box-sizing: border-box;
width: 600px;
height: 400px;
border: 1px solid black;
background: #c0c0c0;
color: black;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
}
#online_layer>#popup>h2 {
/*제목*/
margin-bottom: 25px;
}
#online:checked+.label+#online_layer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/*display: block;*/
}
답변 2
id가 온라인인 체크박스가 체크상태 일 때, online-layer를 출력하는 게 목적이신거 같은데,
기본적으로 id가 online인 체크박스의 형제요소는 뒤에 나오는 체크박스와 desctop-icon 클래스를 가진 div가 형제요소입니다.
css + 연산자는 바로 뒤의 형제요소
css ~ 연산자는 모든 형제요소를 의미합니다.
#online:checked ~ desctop-con #online-layer 정도로 선택할 수 있을 듯 한데,
구조를 다시 짜는 걸 추천해 드립니다.
css ~ 연산자는 해당요소 뒤의 모든 형제요소를 의미.
https://homzzang.com/b/css-37
#online_layer {
/*인터넷 팝업창 영역*/
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
} //이것 디스플레이 두개 가 정의 되어있는데 중복은 맞지 않아요
display: flex; 지워주세요
그리고 #online:checked+.label+#online_layer는 현재 HTML 구조에 적용되지 않습니다.
체크박스와 라벨을 연결하려면 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>