CSS로 X(닫기) 버튼 만들기

CSS

.popupViewer {width: 700px;height: 735px;background: #d9d9d9;padding: 0;border-radius: 6px;border: 1px solid #bfbfbf;position: absolute;display: none;}
.popupViewer header {height: 35px;border-top: 1px solid #bfbfbf;box-sizing: border-box;}
.popupViewer header h1 {font-size: 20px;color: black;line-height: 100%;margin: 0;padding: 5px 10px;display: inline-block;white-space: nowrap;width: calc(100% - 45px);overflow: hidden;text-overflow: ellipsis;}
.popupViewer section {width: 100%;height: calc(100% - 35px);}
.popupViewer .canvas {width: 100%;height: 100%;border-radius: 0 0 6px 6px;}

.close {position: absolute;right: 10px;top: 7px;width: 20px;height: 20px;opacity: 0.3;text-indent: -9999px;}
.close:hover {opacity: 1;}
.close:before, .close:after {position: absolute;top: 0;left: 9px;content: '';height: 20px;width: 2px;background-color: #333;}
.close:before {transform: rotate(45deg);}
.close:after {transform: rotate(-45deg);}

HTML

<div class="popupViewer">
    <header>
        <h1>Draggable 3D Viewer</h1>
        <a href="#" class="close">Close</a>
    </header>
    <section>
        <canvas class="canvas"></canvas>
    </section>
</div>

실행화면