안녕하세요! 오늘도 웹 페이지에 다양한 기능을 추가하고 싶은 당신!
하지만, 대부분의 기능은 자바스크립트로 이루어져 있어, 초보자들은 만들기 너무 어려운 게 현실입니다.
그렇다고, 글과 사진만으로 꾸미는 건 웹 페이지가 너무 재미 없어 지겠죠.
그렇기 때문에 이번에는 HTML과 CSS 만 사용해서,
많은 웹페이지에서 실제로 사용되는 인터렉티브 기능을 만들어 보겠습니다!
그 기능은 바로 "맨 위로 가는 버튼"입니다!
1. 앵커 만들기
먼저 , HTML의 body 바로 아래에
<body>
2. 버튼 만들기
href는 하이퍼 링크라, 연결된 링크로 이동하는 역할 입니다. (오늘 기능의 핵심이죠!)
class 로 이 버튼의 이름을 지어 줍니다.
3. CSS로 버튼 스타일 지정
마지막으로 , 연결된 css 파일에 다음과 같이 작성해 줍니다.
.scroll-up {
position: fixed;
bottom: 20px;
right: 20px;
background: #444;
color: #fff;
font-size: 24px;
padding: 12px;
border-radius: 50%;
text-decoration: none;
z-index: 999;
}
.scroll-up:hover {
background: #222;
}
또는 HTML의 head 부분에 추가 해줍니다.
<head>
<style>
.scroll-up {...}
.scroll-up:hover {...}
</style>
</head>
조금 코드가 길다고 생각하실수 있지만, 찬찬히 읽어 보시면 대부분, 모양을 잡는 내용이라 크게 어렵지 않을 것 입니다.
여기서 핵심은 position: fixed; 부분으로 위치를 고정하여 어디 부분을 보고 있던 똑같은 웹 페이지에 위치해 있습니다.
숨겨진 꼼수는 text-decoration: none; 이 부분 입니다.
이 부분은 하이퍼링크를 타고 이동하는 것을 숨기기 위해, 하이퍼 링크 특유의 파란색과 밑줄을 없애주는 장치 입니다.
이렇게 하이퍼 링크 꼼수를 이용해, 인터렉티브한 기능을 자바스크립트 없이 구현해 보았습니다!
'공부 내용 정리' 카테고리의 다른 글
| 자바스크립트 입력받기 (터미널) (2) | 2025.05.13 |
|---|---|
| 자바스크립트로 코딩 시작해보기! (0) | 2025.05.12 |
| HTML에 구글 지도 추가하는 법 (0) | 2025.05.08 |
| 웹 3.0이란? (1) | 2025.04.30 |
| 암호화폐 보관, 거래소가 아닌 내 지갑에서 시작하기! (0) | 2025.04.29 |