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
인터넷
제목
ㅡ
ㅁ
X
파일(F)
편집(E)
보기(V)
도움말(H)
콘텐츠
콘텐츠 바로보기
바로보기
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 정도로 선택할 수 있을 듯 한데,
구조를 다시 짜는 걸 추천해 드립니다.
답변에 대한 댓글 1개
sinbi댓글을 작성하려면 로그인이 필요합니다.
#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