🖥️세부 페이지 만들기

사진보기 버튼을 눌렀을 때 고양이 사진 페이지와 강아지 사진 페이지가 나오 도록 세부 페이지를 만들어 봅시다!

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>

그럼 고양이 부분의 사진보기 버튼을 누르면 다음과 같은 화면이 나타납니다.

( 오류가 아니니 당황하지 마세요 😊 )

추가한 사진 파일의 이름을 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>

영상과 같이 각 버튼을 클릭하면 사진이 있는 세부 페이지로 이동하고 빈 화면에 마우스 커서를 올려 놓으면 자동으로 사진이 슬라이드 되는지 확인해 보세요!

(뒤로가기 버튼을 눌러 홈 화면으로 이동 합니다)

Previous템플릿 사용

Last updated 2 years ago