본문 바로가기
사이드 프로젝트

카페 추천 웹사이트

GomTang99 2024. 12. 7. 13:45

카페리스트 카드 디자인 수정

CafeList.module.css 코드

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: black;
}

li {
    list-style: none;
}

img {
    display: block;
    width: 100%;
}

.bgImg {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 수직 정렬을 상단으로 변경 */
    background-image: url('../img/main_bg.avif'); /* 배경 이미지 설정 */
    background-size: cover; /* 배경 이미지 크기 조정 */
    background-position: center; /* 배경 이미지 중앙 정렬 */
    background-repeat: no-repeat; /* 배경 이미지 반복 방지 */
    background-attachment: scroll; /* 스크롤 시 배경 이미지 이동 */
    min-height: 100vh; /* 최소 높이 설정 */
    width: 100%; /* 전체 너비 */
    position: relative;
}

.header {
    display: flex; /* Flexbox 사용 */
    justify-content: flex-start; /* 양쪽 끝 정렬 */
    align-items: center; /* 수직 정렬 */
    margin-top: 20px; /* 상단 여백 추가 */
    height: auto; /* 높이 자동 조정 */
    padding: 0 20px; /* 좌우 패딩 추가 */
}

.title {
    flex: 1; /* 공간을 차지하도록 설정 */
    text-align: left; /* 중앙 정렬 */
    color: #001F3F;
    margin-left: 30px;
}

.navList {
    display: flex; /* Flexbox 사용 */
    list-style: none; /* 기본 리스트 스타일 제거 */
    margin-left: auto; /* 왼쪽 여백을 자동으로 설정하여 오른쪽으로 이동 */
    align-items: center; /* 수직 정렬 */
    margin-right: 30px;
    font-size: 16px;
}

.navList li {
    margin-left: 20px; /* 리스트 아이템 간격 */
}

/* 알림 버튼 */
.alram {
    width: 64px;
    display: inline-block;
    padding: 10px 20px; /* 버튼 패딩 */
    background-color: #007bff; /* 버튼 배경 색상 */
    color: white; /* 버튼 텍스트 색상 */
    border: none; /* 테두리 제거 */
    border-radius: 5px; /* 모서리 둥글게 */
    cursor: pointer; /* 커서 포인터 변경 */
    text-decoration: none; /* 링크 기본 스타일 제거 */
    font-size: 1em; /* 글씨 크기 */
    transition: background-color 0.3s; /* 배경 색상 전환 효과 */
}

.alram:hover {
    background-color: #0056b3; /* 호버 시 배경 색상 변경 */
}

.list_wrap {
    width: 70%;
    text-align: center;
    margin: 20px auto; /* 리스트와의 간격 추가 */
    height: 80%;
    background-color: white;
}

.list_up {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.list {
    width: 30%;
    border: 1px solid black;
}

.cardContainer {
    display: flex;
    flex-wrap: wrap; /* 여러 줄로 카드 배치 */
    justify-content: space-between; /* 카드 간격 조절 */
}

.card {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin: 10px; /* 카드 간격 */
    padding: 5px; /* 패딩 줄이기 */
    width: 30%; /* 카드 너비 줄이기 (예: 25%로 변경) */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center; /* 텍스트 중앙 정렬 */
}

.cardImage {
    width: 80%; /* 이미지 전체 너비 */
    height: auto; /* 비율에 맞게 높이 자동 조정 */
    border-radius: 8px 8px 0 0; /* 이미지 상단 모서리 둥글게 */
    margin: 0 auto;
}

.cardTitle {
    font-size: 1.2em;
    margin: 10px 0;
}

.cardInfo {
    color: #555; /* 정보 텍스트 색상 */
}

.selectContainer {
    display: flex; /* Flexbox 사용 */
    justify-content: space-between; /* 공간을 균등하게 배분 */
    align-items: center; /* 수직 정렬 */
    margin: 20px auto; /* 상단 여백 및 중앙 정렬 */
    width: 20%; /* 원하는 너비 설정 */
}

.categorySelect {
    margin-right: 20px; /* 오른쪽 여백 추가 */
    flex: 1; /* 각 선택 박스가 공간을 차지하도록 설정 */
}

.categorySelect label {
    margin-right: 10px; /* 레이블과 드롭다운 사이 여백 */
}

.favoriteButton {
    background: none;
    border: 2px solid #ccc; /* 기본 테두리 색상 */
    color: #ccc; /* 기본 텍스트 색상 */
    cursor: pointer;
    font-size: 24px;
    border-radius: 5px; /* 모서리 둥글게 */
    padding: 5px 10px; /* 여백 추가 */
    transition: all 0.3s ease; /* 부드러운 전환 효과 */
}

.favoriteButton:hover {
    border-color: #888; /* 호버 시 테두리 색상 변경 */
    color: #888; /* 호버 시 텍스트 색상 변경 */
}

.favoriteButtonActive {
    color: red; /* 선택된 경우 텍스트 색상 */
    border-color: red; /* 선택된 경우 테두리 색상 */
}

/* 작성하기 버튼 */
.addButtonContainer {
    text-align: center; /* 버튼 중앙 정렬 */
    margin-top: 20px; /* 상단 여백 추가 */
}

.addButton {
    display: inline-block;
    padding: 10px 20px; /* 버튼 패딩 */
    background-color: #007bff; /* 버튼 배경 색상 */
    color: white; /* 버튼 텍스트 색상 */
    border: none; /* 테두리 제거 */
    border-radius: 5px; /* 모서리 둥글게 */
    cursor: pointer; /* 커서 포인터 변경 */
    text-decoration: none; /* 링크 기본 스타일 제거 */
    font-size: 1em; /* 글씨 크기 */
    transition: background-color 0.3s; /* 배경 색상 전환 효과 */
}

.addButton:hover {
    background-color: #0056b3; /* 호버 시 배경 색상 변경 */
}

/* 알림 팝업 */
.alertPopup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6); /* 더 진한 배경 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn 0.3s; /* 애니메이션 추가 */
}

.alertContent {
    width: 40%;
    height: auto;
    background: linear-gradient(145deg, #ffffff, #e6e6e6); /* 그라데이션 */
    padding: 20px;
    border-radius: 12px; /* 부드러운 모서리 */
    box-shadow: 8px 8px 20px #d1d1d1, -8px -8px 20px #ffffff; /* 입체감 */
    text-align: center;
    position: relative;
    animation: zoomIn 0.3s; /* 줌 효과 */
}

.alertLink {
    background: none;
    border: none;
    color: blue; /* 링크 색상 */
    cursor: pointer;
    text-decoration: underline; /* 밑줄 */
}

.closeButton {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 18px;
    color: #888; /* 버튼 색상 */
}

.closeButton:hover {
    color: #333; /* 호버 효과 */
}

.closeButton > h2 {
    margin-bottom: 20px;
}

/* 애니메이션 효과 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        transform: scale(0.7);
    }
    to {
        transform: scale(1);
    }
}

 

결과물

 

이제 백엔드를 본격적으로 시작하겠습니다.

'사이드 프로젝트' 카테고리의 다른 글

카페 추천 웹사이트(회원가입 / 로그인 구현 백엔드)  (0) 2024.12.10
카페 추천 웹사이트(메인페이지 로그인 팝업, 비밀번호 재설정, 상세페이지 수정요청 버튼)  (1) 2024.12.04
카페 추천 웹사이트(마이페이지 즐겨찾기한 목록 기능, 마이페이지 디자인)  (4) 2024.12.02
카페 추천 웹사이트(카카오맵 API 환경변수 설정, 마이페이지 컴포넌트 생성 및 css)  (0) 2024.12.01
카페 추천 웹사이트(즐겨찾기 기능)  (3) 2024.12.01

'사이드 프로젝트' Related Articles

티스토리툴바