(2) CSS 디자인 완성!

배포만 남았다.

 

이런 저런 오류들이 계속 발생해서 오래걸렸다.

아직 만져야 할 부분이 있다.

1. Pdf저장하면 다운로드는 되는데 한글이 로딩이 안된다. 나만 그런가? 친구한테 공유해서 확인해봐야 한다.

2. 카테고리 변경하면 질문도 바로 바뀌어야하는데 한템포 후에 바뀐다.. 계속 고쳐도 안된다. 하아..

 

열심히 만든 CSS 코드 

body {
    background-color: #01080c;
    font-family: 'Arial', sans-serif;
    color: #ffffff;
    margin: 0;
    padding: 20px;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    background: #000;
}

html {
	height: 100%;
}

 .lightrope {
    position: absolute !important;
    z-index: 9999 !important;
	 text-align: center;
	 white-space: nowrap;
	 overflow: hidden;
	 position: fixed;
     top: 0;
     left: 0;
     right: 0;
	 z-index: 9999;
	 margin: -15px 0 0 0;
	 padding: 0;
	 pointer-events: none;
	 width: 100%;
}
 .lightrope li {
	 position: relative;
	 animation-fill-mode: both;
	 animation-iteration-count: infinite;
	 list-style: none;
	 margin: 0;
	 padding: 0;
	 display: block;
	 width: 12px;
	 height: 28px;
	 border-radius: 50%;
	 margin: 20px;
	 display: inline-block;
	 background: rgba(0, 247, 165, 1);
	 box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 1);
	 animation-name: flash-1;
	 animation-duration: 2s;
}
 .lightrope li:nth-child(2n+1) {
	 background: rgba(0, 255, 255, 1);
	 box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.5);
	 animation-name: flash-2;
	 animation-duration: 0.4s;
}
 .lightrope li:nth-child(4n+2) {
	 background: rgba(247, 0, 148, 1);
	 box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 1);
	 animation-name: flash-3;
	 animation-duration: 1.1s;
}
 .lightrope li:nth-child(odd) {
	 animation-duration: 1.8s;
}
 .lightrope li:nth-child(3n+1) {
	 animation-duration: 1.4s;
}
 .lightrope li:before {
	 content: "";
	 position: absolute;
	 background: #222;
	 width: 10px;
	 height: 9.3333333333px;
	 border-radius: 3px;
	 top: -4.6666666667px;
	 left: 1px;
}
 .lightrope li:after {
	 content: "";
	 top: -14px;
	 left: 9px;
	 position: absolute;
	 width: 52px;
	 height: 18.6666666667px;
	 border-bottom: solid #222 2px;
	 border-radius: 50%;
}
 .lightrope li:last-child:after {
	 content: none;
}
 .lightrope li:first-child {
	 margin-left: -40px;
}
 @keyframes flash-1 {
	 0%, 100% {
		 background: rgba(0, 247, 165, 1);
		 box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 1);
	}
	 50% {
		 background: rgba(0, 247, 165, 0.4);
		 box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
	}
}
 @keyframes flash-2 {
	 0%, 100% {
		 background: rgba(0, 255, 255, 1);
		 box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 1);
	}
	 50% {
		 background: rgba(0, 255, 255, 0.4);
		 box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2);
	}
}
 @keyframes flash-3 {
	 0%, 100% {
		 background: rgba(247, 0, 148, 1);
		 box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 1);
	}
	 50% {
		 background: rgba(247, 0, 148, 0.4);
		 box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2);
	}
}

@keyframes lights {
    0% { background-position: 0 0; }
    100% { background-position: 80px 0; }
}

h1 {
    color: #fbbf24;
    text-align: center;
    font-size: 2.5em;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

h2 {
    color: #f59e0b;
    text-align: center;
}

form {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 10px;
    max-width: 500px;
    margin: 20px auto;
}

label, select, input, button {
    display: block;
    width: 100%;
    margin-bottom: 10px;
}

button {
    background-color: #dc2626;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #b91c1c;
}

#downloadPDFButton {
    background-color: #dc2626;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s;
}

#downloadPDFButton :hover {
    background-color: #b91c1c;
}


ul {
    list-style-type: none;
    padding: 0;
}

ul li {
    background-color: rgba(255, 255, 255, 0.1);
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
}


.snow:before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
    background-image: 
        radial-gradient(white 30%, transparent 30%),
        radial-gradient(white 30%, transparent 30%);
    background-size: 10px 10px;
    background-position: 0 0, 5px 5px;
    animation: snow 3s linear infinite;
}

#playButton {
    width: auto;
    height: 50px;
    border-radius: 25px;
    background-color: #04AA6D;
    color: white;
    border: none;
    font-size: 12px;
    cursor: pointer;
    padding: 0 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#playButton:hover {
    background-color: #045a3f;
}


@keyframes snow {
    to {
        transform: translateY(100vh);
    }
}