wep페이지 만들기 연습 2일차

이어서

1일차에 해결하지 못한 부분 일부 수정

1일차 해결하지 못한부분

브라우저창이 작아져도 모달팝업사이즈가 변하지 않게해야함(해결)
카드를 동그랗게 만들어야함(해결)
멤버 정보를 저장하고 카드를 생성하는 기능구현해야함(저장까지 구현)
생성한 멤버카드에 수정 버튼을 클릭시 이미 입력되어있는 정보들을가진
수정팝업이 더야함
삭제 버튼을 클릭시 브라우저에 카드를 삭제하고 db의 데이터를 삭제시켜야함
저장한 멤버 정보가 카드를 클릭했을때 모달팝업창에 떠야함
카드 안에도 사진이 들어가야함(해결했지만 추후수정)
수정 삭제버튼 팝업창에 딱맞게 만들기

브라우저창이 작아져도 모달팝업사이즈가 변하지 않게해야함

여기저기에 width 값 height 값 dispaly, jusify 등등 다떄려박아 해결했다.하나하나 구현되는 것을 보며 작성하여
크기고정 가운데 정렬까지 했지만 완벽히 이해하지못했지만
카드 사이즈가 줄어들지 않게 구현은 가능했다.

모달 스타일 코드

/* 모달 스타일 설정 */

/* 모달 여백 */

.modal-dialog {

background-color: rgba(0, 0, 0, 0.5);

margin: 5% auto; /* 위쪽 여백을 주고, 가운데 정렬 */

padding: 20px;

border: 1px solid #888;

width: 50%; /* 모달 너비 조절 */

max-width: 700px; /* 최대 너비 설정 */

max-height: 500px; /*최대 높이 지정*/

height: 100%; /* 높이는 자동으로 설정 */

}

/* 모달 팝업창 사이즈 */

.modal-content {

width: 100%; /* 부모 요소의 너비를 가득 채우도록 설정 */

height: 100%; /* 부모 요소의 높이를 가득 채우도록 설정 */

border-radius: 10px;

overflow: hidden; /* 내용이 넘칠 경우 숨김 처리 */

}

/* 모달 바디 */

.modal-body {

background-image: url("image/green.jpg"); /*카드 바디 배경 설정*/

background-position: center;

background-size: cover;

width: 100%; /* 부모 요소의 너비를 가득 채우도록 설정 */

height: 100%; /* 부모 요소의 높이를 가득 채우도록 설정 */

color: saddlebrown;

display: flex; /* Flexbox를 사용하여 내용 정렬 */

justify-content: center; /* 수평 가운데 정렬 */

align-items: center; /* 수직 가운데 정렬 */

padding: 20px; /* 패딩 추가 */

flex-direction: column;

text-align: left;

}

/* 모달 버튼 위치 */

.modal-header > button {

background-color: green;

}

.modal-header {

background-color: rgb(51, 191, 237);

}

카드를 동그랗게 만들어야함

작은 사각형 상자 안에 이미지를 동그랗게 만들고 배경과 어색하지않게 배경색을 반투명한색으로 설정하고
명확하게 구분하기위해 border을 이용해 실선을줌
텍스트가 어색한 부분에 있었기에 아래로 내림

카드 스타일 코드

.cards {

max-width: 1200px; /* 최대 너비 설정 */

width: 100%;

/* 너비를 100%로 설정하여 반응형으로 만듦 */

margin: 0px auto 0px auto;

padding: 20px;

text-align: center; /*카드 안 텍스트 가운데로*/

}

.card > img {

border-radius: 50%; /*홈페이지 카드 이미지 둥글게*/

}

.card {

background-color: rgba(0, 0, 0, 0.3);

padding: 50px;

height: 500px;

color: white;

border: 2px solid rgba(253, 250, 247, 0.267);

}

.card-body {

margin-top: 200px; /*카드 텍스트 위치 아래로 조정*/

}

.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);

}

카드 안에도 사진이 들어가야함

html 파일에 모달 구조에 직접 이미지 등을 넣어서 일단 뜨긴하지만 조정이 필요함

모달 구조 코드

<div

class="modal fade"

id="card_modal"

tabindex="-1"

aria-labelledby="exampleModalLabel"

aria-hidden="true"

<button

type="button"

class="btn-close"

data-bs-dismiss="modal"

aria-label="Close"

></button>

</div>

<img

src="이미지링크"

class="info-modal-image"

alt="..."

</div>

<button

type="button"

class="btn btn-primary"

data-bs-dismiss="modal"

수정

</button>

</div>

멤버 정보를 저장하고 카드를 생성하는 기능구현해야함

메인페이지에 멤버추가 버튼을 클릭시 따로 만들어둔 join.html 파일로 이동
join.html 파일에 입력풀을 넣어주었고 주어진 칸에 이름 생일 등을 기입하고 저장하기 버튼을 클릭시
저장 완료 팝업이뜬후 완료버튼을 클릭시 메인페이지로 돌아오도록 설정했지만
메인페이지에 카드를 생성하는부분은 구현하지못함

ㅇjoin.html 파일 전체코드

<!DOCTYPE html>

<head>

<title>Document</title>

<link

href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"

rel="stylesheet"

integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"

crossorigin="anonymous"

</head>

<body>

파이어베이스 임포트부분

// Firebase 구성 정보 설정

const firebaseConfig = {

파이어베이스 키

};

// Firebase 인스턴스 초기화

const app = initializeApp(firebaseConfig);

const db = getFirestore(app);

//버튼 클릭시 db에 입력값 저장

$("#member_save_btn").click(async function () {

let image = $("#image").val();

let name = $("#name").val();

let job = $("#job").val();

let mbti = $("#mbti").val();

let bobby = $("#bobby").val();

let doc = {

image: image,

name: name,

job: job,

mbti: mbti,

bobby: bobby,

};

await addDoc(collection(db, "member_Save"), doc);

alert("저장 완료!");

//버튼 클릭시 자동 새로고침

window.location.href = "index.html";

});

</script>

<a class="nav-link active" aria-current="page" href="index.html"

>멤버 소개 페이지</a

</li>

</li>

</ul>

</div>

</nav>

</header>

<input

type="text"

class="form-control"

id="image"

placeholder="이미지 URL"

</div>

</div>

</div>

</div>

</div>

저장하기

</button>

</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>

2일차 마무리(기약없음)

2일차 해결하지 못한부분

멤버 정보를 저장하고 카드를 생성하는 기능구현해야함(저장까지 구현)
생성한 멤버카드에 수정 버튼을 클릭시 이미 입력되어있는 정보들을가진
수정팝업이 더야함
삭제 버튼을 클릭시 브라우저에 카드를 삭제하고 db의 데이터를 삭제시켜야함
저장한 멤버 정보가 카드를 클릭했을때 모달팝업창에 떠야함
카드 안에도 사진이 들어가야함(해결했지만 추후수정)
수정 삭제버튼 팝업창에 딱맞게 만들기

부트캠프 신규강의 지급 이슈로 무기한 연기 강해지면 돌아오도록 하자

'부트캠프' 카테고리의 다른 글

개인과제 JS로 로그라이크 콘솔게임 만들기 2일차 (0)	2024.08.22
개인과제 JS로 로그라이크 콘솔게임 만들기 1일차 (0)	2024.08.21
wep페이지 만들기 연습 1일차 (0)	2024.08.08
API (0)	2024.08.07
Git & GitHub 리눅스 기본 명령어 (0)	2024.08.06

한우종 개발일지

wep페이지 만들기 연습 2일차

'부트캠프' 카테고리의 다른 글

티스토리툴바

wep페이지 만들기 연습 2일차

'부트캠프' 카테고리의 다른 글

'부트캠프' Related Articles

티스토리툴바