커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
추억앨범 프로젝트1 강의 관련 질문
[왕초보] 웹개발 종합반 v0
0주차
북마크
이*지
댓글
3
추천
0
조회수
20
조회수
20
답변 완료

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

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



안녕하세요 카드 추가 중 이미지에 오류가 나서 질문 드립니다.

먼저 선생님께서 선택하신 카드가 링크 페이지에 동일한 게 없어서

다른 걸로 선택한 다음 복붙 했는데

이미지에 오류가 나는 현상이 계속 발생합니다.

다른 카드를 복붙 해와도 이와 동일한 현상이 나타나는데 어떻게 해야 할까요?


스파르타 즉문즉답




작성한 코드 및 에러 메세지

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

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

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

<style>

@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang&display=swap');

*{font-family: "Gowun Batang", serif;}


.mytitie{

  height: 250px;

  color: white;

 

  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;

}

.mytitie>button{

  width: 150px;

  height: 50px;

  background-color: transparent;

  color: white;

  border-radius: 5px;


  margin-top: 20px;

}


.mycards{


}

</style>

</head>

<body>

<div class="mytitie">

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

  <button>추억 저장하기</button>

</div>


<div>

  <div class="mycards">

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

      <div class="col">

        <div class="card h-100">

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

          <div class="card-body">

            <h5 class="card-title">Card title</h5>

            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>

          </div>

        </div>

      </div>

      <div class="col">

        <div class="card h-100">

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

          <div class="card-body">

            <h5 class="card-title">Card title</h5>

            <p class="card-text">This is a short card.</p>

          </div>

        </div>

      </div>

      <div class="col">

        <div class="card h-100">

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

          <div class="card-body">

            <h5 class="card-title">Card title</h5>

            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>

          </div>

        </div>

      </div>

      <div class="col">

        <div class="card h-100">

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

          <div class="card-body">

            <h5 class="card-title">Card title</h5>

            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>

          </div>

        </div>

      </div>

    </div>

</div>

</body>

</html>




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