나만의 추억 앨범

\"...\"
카드 제목

카드 내용

카드 콘텐츠
\"...\"
카드 제목

카드 내용

카드 콘텐츠
\"...\"
카드 제목

카드 내용

카드 콘텐츠
\"...\"
카드 제목

카드 내용

카드 콘텐츠
","item":"https://spartaclub.kr/community/fastqna/all/668386e2ffeedeb5e0ba4930"}]}]
커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My album</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"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <style> .mytitle { height: 250px; color: white; font-size: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; background-image: url('https://images.unsplash.com/photo-1511992243105-2992b3fd0410?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); background-position: center; background-size: cover; } .mytitle>button { margin-top: 20px; width: 140px; height: 50px; border: 1px solid white; border-radius: 8px; } .cards { width: 1200px; height: 300px; margin: 20px auto 20px auto; } .mypostingbox { width: 440px; height: 360px; margin: 20px auto 20px auto; padding: 20px 20px 20px 20px; border: 0.5px solid black; border-radius: 8px; box-shadow: 0px 0px 9px blue; } .mypostingbox>button { margin-top: 10px; } </style> <script> var count = 0; function openclose() { count++; alert(count + "회"); $('#postbox').toggle(); } function newcard() { let image = $('#image').val(); let title = $('#title').val(); let content = $('#content').val(); let art = $('#art').val(); let temp_html = `<div class="col"> <div class="card h-100"> <img src="${image}" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">${title}</h5> <p class="card-text">${content }</p> </div> <div class="card-footer"> <small class="text-body-secondary">${art}</small> </div> </div> </div> `; $('#card').append(temp_html); } </script> </head> <body> <div class="mytitle"> <h1>나만의 추억 앨범</h1> <button onclick="openclose()" type="button" class="btn btn-outline-info">추억 펼처 보이기</button> </div> <div class="mypostingbox" id="postbox"> <div class="form-floating mb-3"> <input type="email" class="form-control" id="image" placeholder="name@example.com"> <label for="floatingInput">Email address</label> </div> <div class="form-floating mb-3"> <input type="email" class="form-control" id="title" placeholder="name@example.com"> <label for="floatingInput">Email address</label> </div> <div class="form-floating mb-3"> <input type="email" class="form-control" id="content" placeholder="name@example.com"> <label for="floatingInput">Email address</label> </div> <div class="form-floating"> <select class="form-select" id="art" aria-label="Floating label select example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <label for="floatingSelect">let iT be</label> </div> <button onclick="newcard()" type="button" class="btn btn-outline-success">추억 saVe</button> </div> <div class="cards" id="card"> <div class="row row-cols-1 row-cols-md-4 g-4"> <div class="col"> <div class="card h-100"> <img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">카드 제목</h5> <p class="card-text">카드 내용</p> </div> <div class="card-footer"> <small class="text-body-secondary">카드 콘텐츠</small> </div> </div> </div> <div class="col"> <div class="card h-100"> <img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">카드 제목</h5> <p class="card-text">카드 내용</p> </div> <div class="card-footer"> <small class="text-body-secondary">카드 콘텐츠</small> </div> </div> </div> <div class="col"> <div class="card h-100"> <img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">카드 제목</h5> <p class="card-text">카드 내용</p> </div> <div class="card-footer"> <small class="text-body-secondary">카드 콘텐츠</small> </div> </div> </div> <div class="col"> <div class="card h-100"> <img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">카드 제목</h5> <p class="card-text">카드 내용</p> </div> <div class="card-footer"> <small class="text-body-secondary">카드 콘텐츠</small> </div> </div> </div> </div> </div> </body> </html>
[왕초보] 코딩이 처음이어도 쉽게 배우는 웹개발 A to Z v0
3주차
북마크
김*석
댓글
6
・
추천
0
・
조회수
14
조회수
14
답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.


태극기 휘날리며 포스터가 너무 크게 생성되어요... 카드 추가하기를 누르면 태극기 휘날리며 포스터가 대왕만하게.. 나옵니다....


그밖에 혹시 코드 수정해야 할 부분 있으면 알려주시면 감사하겠습니다






작성한 코드 및 에러 메세지

오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.

Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.

<!DOCTYPE html>

<html lang="en">


<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>My album</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">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"

integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"

crossorigin="anonymous"></script>

<style>

.mytitle {

height: 250px;

color: white;


font-size: 16px;


display: flex;

flex-direction: column;

align-items: center;

justify-content: center;


background-image: url('https://images.unsplash.com/photo-1511992243105-2992b3fd0410?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');

background-position: center;

background-size: cover;

}


.mytitle>button {

margin-top: 20px;

width: 140px;

height: 50px;


border: 1px solid white;

border-radius: 8px;

}


.cards {

width: 1200px;

height: 300px;


margin: 20px auto 20px auto;

}


.mypostingbox {

width: 440px;

height: 360px;


margin: 20px auto 20px auto;

padding: 20px 20px 20px 20px;


border: 0.5px solid black;

border-radius: 8px;


box-shadow: 0px 0px 9px blue;



}


.mypostingbox>button {

margin-top: 10px;

}

</style>


<script>

var count = 0;


function openclose() {

count++;

alert(count + "회");

$('#postbox').toggle();

}


function newcard() {

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

let title = $('#title').val();

let content = $('#content').val();

let art = $('#art').val();


let temp_html = `<div class="col">

<div class="card h-100">

<img src="${image}"

class="card-img-top" alt="...">

<div class="card-body">

<h5 class="card-title">${title}</h5>

<p class="card-text">${content

}</p>

</div>

<div class="card-footer">

<small class="text-body-secondary">${art}</small>

</div>

</div>

</div>

`;

$('#card').append(temp_html);


}

</script>

</head>


<body>

<div class="mytitle">

<h1>나만의 추억 앨범</h1>

<button onclick="openclose()" type="button" class="btn btn-outline-info">추억 펼처 보이기</button>

</div>

<div class="mypostingbox" id="postbox">

<div class="form-floating mb-3">

<input type="email" class="form-control" id="image" placeholder="name@example.com">

<label for="floatingInput">Email address</label>

</div>

<div class="form-floating mb-3">

<input type="email" class="form-control" id="title" placeholder="name@example.com">

<label for="floatingInput">Email address</label>

</div>

<div class="form-floating mb-3">

<input type="email" class="form-control" id="content" placeholder="name@example.com">

<label for="floatingInput">Email address</label>

</div>


<div class="form-floating">

<select class="form-select" id="art" aria-label="Floating label select example">

<option selected>Open this select menu</option>

<option value="1">One</option>

<option value="2">Two</option>

<option value="3">Three</option>

</select>

<label for="floatingSelect">let iT be</label>

</div>

<button onclick="newcard()" type="button" class="btn btn-outline-success">추억 saVe</button>




</div>

<div class="cards" id="card">

<div class="row row-cols-1 row-cols-md-4 g-4">

<div class="col">

<div class="card h-100">

<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"

class="card-img-top" alt="...">

<div class="card-body">

<h5 class="card-title">카드 제목</h5>

<p class="card-text">카드 내용</p>

</div>

<div class="card-footer">

<small class="text-body-secondary">카드 콘텐츠</small>

</div>

</div>

</div>

<div class="col">

<div class="card h-100">

<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"

class="card-img-top" alt="...">

<div class="card-body">

<h5 class="card-title">카드 제목</h5>

<p class="card-text">카드 내용</p>

</div>

<div class="card-footer">

<small class="text-body-secondary">카드 콘텐츠</small>

</div>

</div>

</div>

<div class="col">

<div class="card h-100">

<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"

class="card-img-top" alt="...">

<div class="card-body">

<h5 class="card-title">카드 제목</h5>

<p class="card-text">카드 내용</p>

</div>

<div class="card-footer">

<small class="text-body-secondary">카드 콘텐츠</small>

</div>

</div>

</div>

<div class="col">

<div class="card h-100">

<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"

class="card-img-top" alt="...">

<div class="card-body">

<h5 class="card-title">카드 제목</h5>

<p class="card-text">카드 내용</p>

</div>

<div class="card-footer">

<small class="text-body-secondary">카드 콘텐츠</small>

</div>

</div>

</div>



</div>


</div>

</body>


</html>

Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!




취소
 공유
취소
댓글 0
댓글 알림
나의얼굴