미디어위키:Common.css

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.

• 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
• 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
• 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
• 오페라: Ctrl-F5를 입력.

/* 이 CSS 설정은 모든 스킨에 적용됩니다 */
/* 반응형 그리드 레이아웃 */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}

/* 반응형 이미지 */
.responsive-image {
    width: 100%;
    height: auto;
}

.responsive-img {
    width: 100%; /* 부모 요소의 너비에 맞게 조정 */
    height: 300px; /* 원하는 높이 설정 */
    background-size: cover; /* 이미지가 div를 채우도록 조정 */
    background-position: center; /* 이미지의 중심을 기준으로 위치 조정 */
}

/* 모바일 환경에서의 텍스트 정렬 */
@media (max-width: 768px) {
    .main-page-intro {
        text-align: center;
    }
}

/* 데스크탑에서는 그리드 레이아웃 사용 */
@media (min-width: 769px) {
    .main-page-intro {
        display: flex;
        justify-content: space-between;
    }
}