🖥️세부 페이지 만들기
사진보기 버튼을 눌렀을 때 고양이 사진 페이지와 강아지 사진 페이지가 나오 도록 세부 페이지를 만들어 봅시다!
New file 버튼을 눌러 cat.html 파일과 dog.html 파일을 만들어 줍니다.
처음 사용했던 보일러 플레이트 코드를 두 파일에 복사하여 붙여 넣어 줍니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello, world!</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="container">
<h1>Hello, world!</h1>
</main>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>문서 - 컴퍼넌트 - 캐러셀 중 아래 이미지에 해당 되는 부분의 코드를 찾아 확인 합니다.
코드를 조금 수정한 아래 코드를 복사하여 cat.html과 dog.html 파일의 main 태그 안에 붙여 넣어 줍니다.
<main class="container">
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="2000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</main>그럼 고양이 부분의 사진보기 버튼을 누르면 다음과 같은 화면이 나타납니다.
강아지와 고양이 사진들을 다운 받아 주세요
사진들을 나의 replit 파일에 추가하여 넣어 주세요.
추가한 사진 파일의 이름을 img 태그 주소에 연결하여 화면에 보여지게 만들어 주세요!
<img src="..." class="d-block w-100" alt="...">
<img src="cat1.jpg" class="d-block w-100" alt="고양이1">src 부분에 적혀있는 ... 대신 사진 파일의 이름으로 변경해 줍니다.
동시에 alt 에 적혀있는 ... 대신 사진의 설명인 고양이1 로 변경해 줍니다.
이런식으로 cat.html 파일과 dog.html 파일의 src 태그와 alt 태그의 내용을 변경해 줍니다. (아래 코드를 복사하여 main 태그 안에 붙여 넣어 주세요)
cat.html
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="2000">
<img src="cat1.jpg" class="d-block w-100" alt="고양이1">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="cat2.jpg" class="d-block w-100" alt="고양이2">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="cat3.jpg" class="d-block w-100" alt="고양이3">
</div>
</div>dog.html
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="2000">
<img src="dog1.jpg" class="d-block w-100" alt="강아지1">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="dog2.jpg" class="d-block w-100" alt="강아지2">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="dog3.jpg" class="d-block w-100" alt="강아지3">
</div>
</div>영상과 같이 각 버튼을 클릭하면 사진이 있는 세부 페이지로 이동하고 빈 화면에 마우스 커서를 올려 놓으면 자동으로 사진이 슬라이드 되는지 확인해 보세요!
(뒤로가기 버튼을 눌러 홈 화면으로 이동 합니다)
Last updated
