main2.css

/* 페이지 전체 스타일 설정 */
body {
    font-family: 'Noto Sans KR', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #F8F8FF; /* 아이보리/밝은 배경 */
    height: 100vh; /* 전체 화면 높이 사용 */
    display: flex;
    flex-direction: column;
}

#container {
    display: flex;
    flex-direction: column; /* 세로 방향으로 배치 */
    padding: 20px;
    gap: 20px; /* 버튼 섹션과 이미지 섹션 간 간격 */
    align-items: center; /* 모든 섹션을 중앙 정렬 */
    justify-content: center; /* 추가: 중앙 세로 정렬 보장 */
    width: 100%; /* 컨테이너가 화면 전체를 차지 */
    margin: 0 auto; /* 중앙 정렬 */
    box-sizing: border-box;
    max-width: 1200px; /* 필요 시 최대 너비 제한 */
}

/* 배너 섹션 */
#banner {
    background-color: #4eb7e4; 
    color: ivory;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px; /* 배너 텍스트 크기 */
    padding: 20px 0; /* 위아래로 공간 확보 */
}

/* 버튼 섹션 */
#button-section {
    display: flex;
    flex-direction: row;/* 버튼을 가로로 나열 */
    justify-content: center; /* 버튼 중앙 정렬 */
    gap: 15px; /* 버튼 간격 */
    width: 100%; /* 버튼 섹션의 너비 (가로로 긴 형태) */
    max-width: 800px; /* 최대 너비 설정 */
    margin-top: 20px; /* 배너와의 간격 */
    background-color: #F8F8FF; /* 연한 배경색 */
    padding: 10px 0; /* 상하 여백 */
    box-sizing: border-box; /* 패딩 포함 크기 계산 */
}

/* 버튼 스타일 */
button {
    padding: 6px 12px; /* 버튼 크기 줄임 */
    font-size: 16px; /* 버튼 글씨 크기 조정 */
    background-color: #6EC5E9;
    color: white;
    border: none;
    border-radius: 6px; /* 모서리 둥글게 */
    cursor: pointer;
    transition: background-color 0.3s ease;
    flex: none; /* 버튼 간 동일한 너비 유지 */
    width: 150px; /* 고정 너비 */
    text-align: center; /* 텍스트 중앙 정렬 */
}

button:hover {
    background-color: #60accc;
    transform: scale(1.01);
}

/* 이미지 섹션 */
#image-section {
    display: flex;
    flex-wrap: wrap; /* 이미지가 여러 줄로 배치되도록 설정 */
    justify-content: center; /* 이미지 중앙 정렬 */
    gap: 20px; /* 이미지 간격 */
    padding: 40px;
    background-color: #ffffff; /* 흰색 배경 */
    box-sizing: border-box; /* 패딩 포함 크기 계산 */
    width: 100%; /* 이미지 섹션의 너비 */
    max-width: 800px; /* 최대 너비 설정 */
    min-height: 400px; /* 최소 높이 설정 */
}

/* 이미지 크기 통일 */
#image-section img {
    width: 200px;         /* 가로 크기 */
    height: 200px;        /* 세로 크기 */
    object-fit: cover;    /* 이미지 비율 유지하며 자르기 */
    border-radius: 10px;  /* 모서리 둥글게 */
    margin: 10px;         /* 이미지 간 간격 */
    transition: transform 0.3s ease; /* 호버 시 애니메이션 */
    border:1px solid #eaeaea;
}

#image-section img:hover {
    transform: scale(1.3); /* 호버 시 약간 확대 */
}