[HTML5] - 6 - 약식 페이지네이션(두번째 페이지 만드는 법)
728x90
반응형
728x90
#주의#
이 글은 강의 글이 아니다.
틀린 부분, 깔끔하지 못한 부분 있을 수 있다.
지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다.
이젠 첫번째 페이지에 모든 내용을 담을 수 없다.
게시판의 형식이 그렇다.
물론 스크롤 압박(스압)을 견뎌낸다면 상관없다.
두번째 페이지를 만들어보자.
아래는 여태까지의 코드 내용이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이리의 맥 이야기</title>
<style>
.card {
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-bottom: 20px;
}
.btn {
display: inline-block;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
padding: 10px 20px;
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
}
.btn:hover {
background-color: #0069d9;
}
.image {
width: 300px;
height: 200px;
}
</style>
</head>
<body style="background-color: black;">
<div class="hero">
<h1 style="color: white; text-align: center;">이리의 맥 이야기</h1>
<h2 style="color: white; text-align: center;">컴온!!!!</h2>
</div>
<div class="card">
<h3>환영합니다.</h3>
<p>완성하시면 이런 모습입니다.</p>
<img src="images/1.webp" alt="이미지" class="image">
</div>
<div class="card">
<h3>할 수 있습니다.</h3>
<p>포기하지 마세요.</p>
<img src="images/2.webp" alt="이미지" class="image">
</div>
<div>
<button class="btn"><a href="https://www.naver.com/" target="_blank">네이버</a></button>
<button class="btn"><a href="https://www.daum.net/" target="_blank">다음</a></button>
<button class="btn"><a href="https://www.google.com/" target="_blank">구글</a></button>
<button class="btn"><a href="https://www.yahoo.com/" target="_blank">야후</a></button>
</div>
</body>
</html>이제 두번째 페이지를 만들어 볼 것이다.
그 전에 버튼 만들었던 것을 변경해줄 것이다.
하단에 있는 <button class="btn"> 부분의 링크와 버튼의 이름을 변경해줄 것이다.
<button class="btn"><a href="Index.html">[1]</1></a></button>
<button class="btn"><a href="second.html">[2]</a></button>
<button class="btn"><a href="#">[3]</a></button>
<button class="btn"><a href="#">[4]</a></button>3과 4는 2페이지를 만들어 보면 이해 될 것이다.
버튼을 바꾸고 나면 이런 모습이다.
그래서 두번째 페이지는 어떻게 만드는데?
첫번째 페이지 만든 것 처럼 만들면 된다.
근데 hero 부분을 짚고 넘어가려 한다.
hero 부분을 설명하기 위해 색을 넣었고 글씨도 넣었다.
이제 hero가 어디인지 충분히 이해 됐을 것이다.
두번째 페이지 만드는 것을 설명하겠다.
second.html 파일을 Index.html 이 있는 폴더에 만들어준다.
Index.html 파일 만든 것 처럼 만들면 된다.
아래는 두번째 페이지 코드 내용이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>두번째 페이지</title>
<style>
.hero {
background-color: #dc3545;
color: white;
padding: 50px;
text-align: center;
}
.card {
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-bottom: 20px;
}
.btn {
display: inline-block;
background-color: #dc3545;
color: white;
border: none;
border-radius: 5px;
padding: 10px 20px;
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
}
.btn:hover {
background-color: #c82333;
}
.image {
width: 300px;
height: 200px;
}
</style>
</head>
<body style="background-color: black;">
<div class="hero">
<h1>두번째 페이지</h1>
<p>이곳이 바로 hero 부분입니다.</p>
</div>
<div class="card">
<h3>제목3</h3>
<p>내용3</p>
<img src="images/3.webp" alt="이미지" class="image">
</div>
<div class="card">
<h3>제목4</h3>
<p>내용4</p>
<img src="images/4.webp" alt="이미지" class="image">
</div>
<div>
<button class="btn"><a href="index.html">첫번째 페이지</a></button>
<button class="btn"><a href="#">세번째 페이지</a></button>
<button class="btn"><a href="#">네번째 페이지</a></button>
</div>
</body>
</html>내용을 보면 첫번째 페이지와 거의 동일하다.
이제 저장하고 1페이지에서 2페이지로, 2페이지에서 1페이지로 넘어가는지 확인하면 된다.
반응형
728x90
반응형
'개발 이야기 > [HTML5]' 카테고리의 다른 글
| [HTML5] - 8 - 게시글 작성 기능 만드는 법 (1) (0) | 2023.05.02 |
|---|---|
| [HTML5] - 7 - 더보기 기능 만드는 법(Read More) (5) | 2023.05.02 |
| [HTML5] - 5 - 게시글에 사진 넣는 법 (0) | 2023.05.02 |
| [HTML5] - 4 - 버튼 만드는 법 (0) | 2023.05.02 |
| [HTML5] - 3 - 게시글 카드 만드는 법 (0) | 2023.05.02 |
댓글