[ CSS / HTML ] 네비게이터 꾸미기
2024. 4. 12. 22:04ㆍ· FRONT-END/└ CSS
환경 : Visual Studio Code
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>페이지 네비게이터 디자인</title>
<link rel="stylesheet" type="text/css" href="commons.css">
<link rel="stylesheet" type="text/css" href="test.css">
<style>
/*
페이지 네비게이터 디자인
- .page-navigator 안에 있는 a태그에 대하여 디자인
*/
.page-navigator {
text-align: center;
font-size: 16px;
}
.page-navigator.page-navigator-small {
font-size: 12px;
}
.page-navigator.page-navigator-large {
font-size: 20px;
}
.page-navigator > a {
display: inline-block;
color: #2d3436;
text-decoration: none;
border: 1px solid #2d3436;
padding: 0.5em;
font-size: inherit;
min-width: 2em;
}
/*
현재 페이지에 해당하는 번호에는 활성화 클래스인 on을 추가한다
*/
.page-navigator > a.on,
.page-navigator > a:hover {
color: #ffb1ee;
border-color: #ffb1ee;
}
</style>
</head>
<body>
<div class="container w-800">
<div class="cell center">
<h1>페이지 네비게이터 디자인</h1>
</div>
<div class="cell">
<div class="page-navigator page-navigator-small">
<a href="#"><이전</a>
<a href="#">1</a>
<a href="#" class="on">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
<a href="#">다음></a>
</div>
</div>
<div class="cell">
<div class="page-navigator">
<a href="#"><이전</a>
<a href="#">1</a>
<a href="#" class="on">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
<a href="#">다음></a>
</div>
</div>
<div class="cell">
<div class="page-navigator page-navigator-large">
<a href="#"><이전</a>
<a href="#">1</a>
<a href="#" class="on">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
<a href="#">다음></a>
</div>
</div>
</div>
</body>
</html>
(+) 현재 페이지에 해당하는 번호에 활성화 클래스인 on을 넣는다
- 출력결과

개인 공부 기록용입니다:)
728x90
'· FRONT-END > └ CSS' 카테고리의 다른 글
[ CSS / HTML ] 배치방식 이해 (0) | 2024.04.14 |
---|---|
[ CSS / HTML ] 이미지 꾸미기 (0) | 2024.04.13 |
[ CSS / HTML ] link 태그 꾸미기 (0) | 2024.04.12 |
[ CSS / HTML ] 테꾸. 테이블 태그 꾸미기 (0) | 2024.04.11 |
[ CSS ] 미리 정해두고 꺼내 먹기 (0) | 2024.04.04 |