멤버 소개 페이지 만들기
부트캠프 1주차 프로젝트인 wep프로젝트 만들기를 마무리하였다.
하지만 그때그때 필요한 기능을 검색하며 제대로 이해도 하지 못한채 기능이 구현되면 넘어간것들이 많으므로
이번엔 팀원들의 도움없이 다시 처음부터 혼자 만들어기로 했다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>멤버 소개 페이지</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<style>
.nav-link {
color: white;
}
.nav-link:visited {
color: white; /* 방문한 링크 색상 */
}
.nav-link:active {
color: skyblue; /* 클릭 중인 링크 색상 */
}
.nav-link:hover {
color: skyblue; /* 마우스를 올렸을 때 링크 색상 */
}
body {
height: 100%;
background-image: url("image/banner.jpg");
background-color: transparent;
background-position: center; /*사진 위치 가운데*/
background-size: cover; /*사이즈 딱 맞게*/
background-attachment: fixed; /*배경 이미지가 스크롤 시 고정시키는거 */
background-repeat: no-repeat; /*배경 이미지 반복 안하게하는거*/
}
.mainPage {
background-color: transparent;
color: white; /*박스안 텍스트 변경 */
margin: 30px 500px 30px 500px; /* 바깥으로 여백주기 */
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.container-fluid > P {
margin: 0px;
width: 100%;
}
.cards {
max-width: 1200px; /* 최대 너비 설정 */
width: 100%;
/* 너비를 100%로 설정하여 반응형으로 만듦 */
margin: 0px auto 0px auto;
padding: 20px;
text-align: center;
}
.card:hover {
transition: transform 0.3s ease; /* 부드러운 전환 효과 */
transform: scale(1.05); /* 마우스를 올렸을 때 1.05배 확대 */
}
.cards_body {
background-color: rgba(0, 0, 0, 0.3);
padding-top: 200px;
margin-top: 300px;
height: 800px;
border: 2px double rgba(0.5);
}
/* 모달 스타일 설정 */
/* 모달 여백 */
.modal-dialog {
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
position: fixed;
width: 600px; /* 고정 너비 설정 */
height: 400px; /* 고정 높이 설정 */
top: 30%; /* 화면 중앙으로 위치 */
left: 30%; /* 화면 중앙으로 위치 */
transform: translate(-30%, -30%); /* 중앙 정렬을 위한 변환 */
margin: 0; /* 마진 없애기 */
}
/* 모달 팝업창 사이즈 */
.modal-content {
background-color: rgba(20.2.20.0.3);
width: 100%; /* 부모 요소의 너비를 가득 채우도록 설정 */
height: 100%; /* 부모 요소의 높이를 가득 채우도록 설정 */
}
/* Center the image and add margin at the bottom */
/* 모달 버튼 위치 */
.modal-header > button {
background-color: green;
}
</style>
</head>
<body>
<!-- 헤더바 -->
<header class="header">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html"
>멤버 소개 페이지</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="test.html">아직몰루</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- 메인 페이지 -->
<div class="mainPage">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">소개 하는곳</h1>
<p class="col-md-8 fs-4">어쩌구 소개 페이지 입니다.</p>
</div>
</div>
<!-- 멤버 표시 카드 형식 완성하고 삭제-->
<div class="cards_body">
<div class="cards">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div id="member_card" class="col">
<div
class="card"
data-bs-toggle="modal"
data-bs-target="#card_modal"
>
<img
src="이미지링크"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">한우종</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 멤버 표시 모달 -->
<!-- 모달 구조 -->
<div
class="modal fade"
id="card_modal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<h3><strong>이름:</strong><span id="inpo-modal-title"></span></h3>
<p><strong>생일:</strong> <span id="info-modal-brlusdey"></span></p>
<p><strong>mbti:</strong> <span id="info-modal-role"></span></p>
<p><strong>직업:</strong> <span id="info-modal-role"></span></p>
<p><strong>취미:</strong> <span id="info-modal-role"></span></p>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-primary"
data-bs-dismiss="modal"
>
수정
</button>
<button type="button" class="btn btn-danger">삭제</button>
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
</body>
</html>
백그라운드 이미지 변경
링크에 마우스 커서를 올리면 파란색으로 바뀌고 마우스를 치우면 다시 흰색으로 돌아옴
카드 클릭시 팝업모달 띄우기
- 백그라운드 이미지 변경
- 배경이 사진이 스크롤을 내리거나 올려도 움직이지 않도록 고정함
- 이미지가 브라우저에 가운데 오도록 설정하고 사이즈를 완전히 맞게 설정함
- 이미지가 스크롤을 내릴때 반복되지 않도록 설정
- 카드 위치를 조금 명확히 하기위해 카드가 오는 아래쪽을 반투명한 색으로 변경
- 메인 페이지링크와 다른페이지로 갈수있는 링크를 헤더에 nav바로 설정
- 링크에 마우스 올리면 컬러가 파란색으로 변하고 마우스를 치우면 다시 흰색으로 돌아옴
- 메인링크 클릭시 메인페이지로 가도록설정 그 옆의 링크를 누르면 다른페이지로 넘어가도록 설정(그냥 빈페이지)
- 부트스트랩 점보트론을 이용하여 메인 박스를 가운데에 만들어둠 (추후 수정)
- 카드 위치를 브라우저창 크기에 상관없이 가운데로 오도록 설정함
- 카드에 마우스 커서 올릴시 카드가 살짝 커지게 조정하고 커지는 모션이 살짝 천천히 보이도록 설정
- 카드를 누를시 모달을 이용한 팝업창을 띄움
- 팝업창이 뜨면 팝업창을 제외한 나머지 화면이 어두워지게 만들어 팝업창에 좀더 시선이 가도록함
- 브라우저창이 작아져도 모달팝업사이즈가 변하지 않게해야함
- 카드를 동그랗게 만들어야함
- 멤버 정보를 저장하고 카드를 생성하는 기능구현해야함
- 생성한 멤버카드에 수정 버튼을 클릭시 이미 입력되어있는 정보들을가진
수정팝업이 더야함
- 삭제 버튼을 클릭시 브라우저에 카드를 삭제하고 db의 데이터를 삭제시켜야함
- 저장한 멤버 정보가 카드를 클릭했을때 모달팝업창에 떠야함
- 카드 안에도 사진이 들어가야함
- 수정 삭제버튼 팝업창에 딱맞게 만들기
