모달창 구현 연습

input[id*="popup"]{
    display:none;
}
input[id*="popup"] + label {
    display: inline-block;
    padding: 20px;
    background-color: #00b7d4;
    color:#fff;
}
input[id*="popup"] + label + div{
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height: 100%;
    z-index: 100;
}
input[id*="popup"] + label + div > div{
    position:absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 500px;
    height: 300px;
    background: #fff;
    z-index: 2;
}
input[id*="popup"] + label + div > div >label{
    position:absolute;
    top: 0%;
    right: 0%;
    transform: translate(40%,-40%);
    padding: 20px;
    background: #dd5347;
    border-radius: 100%;
    z-index: 1;
}
input[id*="popup"] + label + div > label{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.9);
    z-index: 1;
}

function Popup(){
    return(
        <div>
            <input type="checkbox" id="popup" />
            <label for="popup">View</label>
            <div>
                <div>
                    <label for="popup"></label>
                </div>
                <label for="popup"></label>
            </div>
        </div>
       
    )
}

export default Popup;