개발자.. 너란놈..

<div class="loading-ispinner">
    <div class="ispinner ispinner-large">
        <div class="ispinner-blade"></div>
        <div class="ispinner-blade"></div>
        <div class="ispinner-blade"></div>
        <div class="ispinner-blade"></div>
        <div class="ispinner-blade"></div>
        <div class="ispinner-blade"></div>
        <div class="ispinner-blade"></div>
        <div class="ispinner-blade"></div>
        <div class="ispinner-blade"></div>
        <div class="ispinner-blade"></div>
        <div class="ispinner-blade"></div>
        <div class="ispinner-blade"></div>
    </div>
</div>

/* Progress Bar (iSpinner) - 로딩 바 */
.loading{position: fixed;width: 100%;height: 100%;z-index: 12000;top: 0;left:0;background: rgba(0,0,0,.7);}
.ispinner {width: 52px;height: 52px;position: absolute;top: 50%;left: 50%;margin: -26px 0 0 -26px}
.ispinner .ispinner-blade {position: absolute;top: 37%;left: 44.5%;width: 10%;height: 25%;background-color: #fff;border-radius: 50%/20%;
    -webkit-animation: iSpinnerBlade 1s linear infinite;
            animation: iSpinnerBlade 1s linear infinite;
    will-change: opacity; 
}
.ispinner .ispinner-blade:nth-child(1) {
  -webkit-transform: rotate(30deg) translate(0, -150%);
          transform: rotate(30deg) translate(0, -150%);
  -webkit-animation-delay: -1.6666666667s;
          animation-delay: -1.6666666667s; }
.ispinner .ispinner-blade:nth-child(2) {
  -webkit-transform: rotate(60deg) translate(0, -150%);
          transform: rotate(60deg) translate(0, -150%);
  -webkit-animation-delay: -1.5833333333s;
          animation-delay: -1.5833333333s; }
.ispinner .ispinner-blade:nth-child(3) {
  -webkit-transform: rotate(90deg) translate(0, -150%);
          transform: rotate(90deg) translate(0, -150%);
  -webkit-animation-delay: -1.5s;
          animation-delay: -1.5s; }
.ispinner .ispinner-blade:nth-child(4) {
  -webkit-transform: rotate(120deg) translate(0, -150%);
          transform: rotate(120deg) translate(0, -150%);
  -webkit-animation-delay: -1.4166666667s;
          animation-delay: -1.4166666667s; }
.ispinner .ispinner-blade:nth-child(5) {
  -webkit-transform: rotate(150deg) translate(0, -150%);
          transform: rotate(150deg) translate(0, -150%);
  -webkit-animation-delay: -1.3333333333s;
          animation-delay: -1.3333333333s; }
.ispinner .ispinner-blade:nth-child(6) {
  -webkit-transform: rotate(180deg) translate(0, -150%);
          transform: rotate(180deg) translate(0, -150%);
  -webkit-animation-delay: -1.25s;
          animation-delay: -1.25s; }
.ispinner .ispinner-blade:nth-child(7) {
  -webkit-transform: rotate(210deg) translate(0, -150%);
          transform: rotate(210deg) translate(0, -150%);
  -webkit-animation-delay: -1.1666666667s;
          animation-delay: -1.1666666667s; }
.ispinner .ispinner-blade:nth-child(8) {
  -webkit-transform: rotate(240deg) translate(0, -150%);
          transform: rotate(240deg) translate(0, -150%);
  -webkit-animation-delay: -1.0833333333s;
          animation-delay: -1.0833333333s; }
.ispinner .ispinner-blade:nth-child(9) {
  -webkit-transform: rotate(270deg) translate(0, -150%);
          transform: rotate(270deg) translate(0, -150%);
  -webkit-animation-delay: -1s;
          animation-delay: -1s; }
.ispinner .ispinner-blade:nth-child(10) {
  -webkit-transform: rotate(300deg) translate(0, -150%);
          transform: rotate(300deg) translate(0, -150%);
  -webkit-animation-delay: -0.9166666667s;
          animation-delay: -0.9166666667s; }
.ispinner .ispinner-blade:nth-child(11) {
  -webkit-transform: rotate(330deg) translate(0, -150%);
          transform: rotate(330deg) translate(0, -150%);
  -webkit-animation-delay: -0.8333333333s;
          animation-delay: -0.8333333333s; }
.ispinner .ispinner-blade:nth-child(12) {
  -webkit-transform: rotate(360deg) translate(0, -150%);
          transform: rotate(360deg) translate(0, -150%);
  -webkit-animation-delay: -0.75s;
          animation-delay: -0.75s; }
.ispinner.ispinner-large {width: 50px;height: 50px; }
.ispinner.ispinner-large .ispinner-blade {
   width: 5.5714285714%;
   height: 25.7142857143%;
border-radius: 50%/16.67%; 
}
@-webkit-keyframes iSpinnerBlade {
  0% {opacity: 0.9;}
  50% {opacity: 0.25;}
  100% {opacity: 0.25;} 
}
@keyframes iSpinnerBlade {
  0% {opacity: 0.9;}
  50% {opacity: 0.25;}
  100% {opacity: 0.25;} 
}
/* Progress Bar - iSpinner */

replace를 사용하여 영문 , 숫자 , 특수문자만 사용할 수 있게 설정한 Javascript 유효성 입니다.

value.replace(/[^a-zA-Z0-9!@#$%^&*(),.?":{}|<>]/g, '')

CSS로만 사용하여 X 버튼을 만드려고 합니다. 아래와 같이 사용하면 됩니다.

HTML

<span className='btn_x'></span>

CSS

.btn_x {
			position: absolute;
			top: 20px;
			right: 40px;

			&:hover {
				&::before,
				&::after {
					background-color: #555;
				}
			}

			&::before,
			&::after {
				content: '';
				display: block;
				position: absolute;
				width: 3px;
				height: 25px;
				background-color: #999;
				cursor: pointer;
			}

			&::before {
				transform: rotate(45deg) translateX(0px);
			}

			&::after {
				transform: rotate(-45deg) translateX(0px);
			}
		}
	}

간편하게 레이어 팝업을 만들기 위해 소스 정리합니다.

html

<div class="layer-popup">
    <div class="layer-content">
    	<!-- contents-->
    </div>
</div>

style

.layer-popup{
        position: absolute;
        top:0;
        width:100%;
        height: 100%;
        background-color: rgba( 0, 0, 0, 0.5 );
        z-index: 9999;

	.layer-content{
            position: fixed;
            left: 0;
            top: 0;
            width: 90%; //Content 영역 조절)
            top : 50%;
            left : 50%;
            transform : translate(-50%, -50%);            
            z-index: 10000;  
            border-radius: 16px;

            /*style*/
            background: white;
            box-shadow: 0 0 6px 1px rgb(0 0 0 / 30%);
     }
}

Tailwind

<div class="layer-popup fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
    <div class="layer-content fixed bg-white shadow-md rounded-lg z-60 p-4 transform -translate-y-1/2">
        <div className="w-[300px]">
            데이터 보여주면 되는 부분?
        </div>
    </div>
</div>