css 문법 질문

css 문법 질문

QA

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 정도로 선택할 수 있을 듯 한데,

구조를 다시 짜는 걸 추천해 드립니다.

 #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>

답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT