|
|
| 2번째 줄: |
2번째 줄: |
| | cite { | | cite { |
| | box-shadow: inset 0 -20px 0 #FAFAFA; | | box-shadow: inset 0 -20px 0 #FAFAFA; |
| − | }
| |
| − |
| |
| − | /*241123 이청원 자료실 제작 by. JisunKim*/
| |
| − | /* 헤더 스타일 */
| |
| − | header {
| |
| − | background-color: #4CAF50;
| |
| − | color: white;
| |
| − | padding: 2rem 0;
| |
| − | }
| |
| − |
| |
| − | header h1 {
| |
| − | text-align: center;
| |
| − | font-size: 2rem;
| |
| − | }
| |
| − |
| |
| − | header p {
| |
| − | text-align: center;
| |
| − | font-size: 1.2rem;
| |
| − | margin-top: 1rem;
| |
| − | }
| |
| − |
| |
| − | /* 메인 컨텐츠 스타일 */
| |
| − | main {
| |
| − | padding: 2rem;
| |
| − | }
| |
| − |
| |
| − | /* 그리드 레이아웃 */
| |
| − | .grid-container {
| |
| − | display: grid;
| |
| − | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
| |
| − | gap: 1.5rem;
| |
| − | justify-content: center;
| |
| − | }
| |
| − |
| |
| − | /* 카드 스타일 */
| |
| − | .card {
| |
| − | background-color: white;
| |
| − | border-radius: 10px;
| |
| − | overflow: hidden;
| |
| − | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
| |
| − | transition: transform 0.3s ease-in-out;
| |
| − | }
| |
| − |
| |
| − | .card:hover {
| |
| − | transform: translateY(-10px);
| |
| − | }
| |
| − |
| |
| − | .card-img {
| |
| − | width: 100%;
| |
| − | height: 200px;
| |
| − | object-fit: cover;
| |
| − | }
| |
| − |
| |
| − | .card-body {
| |
| − | padding: 1rem;
| |
| − | }
| |
| − |
| |
| − | .card-title {
| |
| − | font-size: 1.5rem;
| |
| − | margin-bottom: 1rem;
| |
| − | color: #333;
| |
| − | }
| |
| − |
| |
| − | .card-description {
| |
| − | font-size: 1rem;
| |
| − | color: #555;
| |
| − | margin-bottom: 1.5rem;
| |
| − | }
| |
| − |
| |
| − | .card-link {
| |
| − | text-decoration: none;
| |
| − | background-color: #007bff;
| |
| − | color: white;
| |
| − | padding: 0.5rem 1rem;
| |
| − | border-radius: 5px;
| |
| − | text-align: center;
| |
| − | display: inline-block;
| |
| − | }
| |
| − |
| |
| − | .card-link:hover {
| |
| − | background-color: #0056b3;
| |
| | } | | } |