Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
Tags
- JP모건
- 성공방정식
- 트레이딩뷰매매
- 주식지표
- 역마진계산기
- 로또1등번호예측
- 트레이딩뷰지표
- 주린이매수타이밍
- 주식분석
- 매수위치
- 마진계산기
- 보조지표매매법
- 판매가계산
- rci매수매도
- JP모건CEO
- 급등주패턴
- 주식지표매수
- 생성형이미지
- rci보조지표
- rci지표매매
- 할인가계산
- 아마존CEO
- 트레이딩뷰차트
- 주식보조지표
- 판매자계산기
- 주가예측
- 계엄령관련주
- rci지표매매법
- 온라인쇼핑마진
- 할인율계산기
Archives
- Today
- Total
핫트레이딩
[html소스코드] 블로그 페이지 내 특정 원하는 위치로 화면 스크롤 이동 방법 본문
안녕하세요. 핫테그 리뷰입니다.
블로그 작업이나 홈페이지 작업 등에서 목차를 이용하면 보다 간결하면서 정보 전달을 더 쉽게 할 수가 있죠. 특히 웹페이지의 내용이 길 경우 원하는 위치 이동이 번거로울수 있습니다. 이런 경우 현재 페이지 내 특정 위치에 링크를 걸어 목차에서 타이틀을 클릭할 경우 자동 스크롤하게 되면 무척 편리하겠죠.
아래 동영상으로 어떤 기능인지 잠시 살펴보고 그 기능을 할 수 있는 html 소스코드에 대해 알아보도록 하겠습니다.
웹 페이지 내에서 원하는 특정 위치로 화면 스크롤 이동하는 HTML 소스 알아보기
위 동영상을 통해 구현 내용을 쉽게 이해하셨겠죠. 자 그럼 구체적으로 웹페이지 사용된 HTML 태그는 <a>의 href 속성값을 이용하여 본 페이지에 적용을 해 보겠습니다.
목차
1. 우리나라 문단 첫머리 위치 이동
2. 좋은나라 문단 첫머리 위치 이동
3. 대한민국 문단 첫머리 위치 이동
이미지 위치 이동
아래는 위 스크롤이동 html 태그의 전체 소스코드입니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<p><h2>목차</h2></p>
<p><a href="#우리나라">1. 우리나라</a></p>
<p><a href="#좋은나라">2. 좋은나라</a></p>
<p><a href="#대한민국">3. 대한민국</a></p>
<p><a href="#like_image">4. LIKE 이미지</a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="우리나라" class="">
1. 우리나라 문단 첫머리 위치 이동
</div>
<hr>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="좋은나라" class="">
2. 좋은나라 문단 첫머리 위치 이동
</div>
<hr>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="대한민국" class="">
3. 대한민국 문단 첫머리 위치 이동
</div>
<hr>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="like_image" class="">이미지 위치 이동<br>
<img src="https://martech.org/wp-content/uploads/2014/08/facebook-like-button-1920.jpg" width="400 ">
</div>
<hr>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>도움이 되셨다면 좋아요 및 구독 부탁드려요 ^^
반응형
'IT 정보 > 블로그 웹페이지 꾸미기' 카테고리의 다른 글
| 블로그 글에 목차를 꼭 넣어야 하는 이유 (1) | 2025.03.20 |
|---|---|
| 어떤 블로그 플랫폼이 당신에게 더 나은 수익을 줄까? 티스토리 vs 네이버 (1) | 2024.12.01 |
| 워드프레스 404 오류 고유주소 설정 및 AIOSEO 에러 해결 방법 (0) | 2022.01.07 |
| [저품질 블로그] 관련한 잘못된 소문과 네이버 답변 (0) | 2021.12.22 |
| 어도비 무료 이미지 편집 프로그램 포토 익스프레스 사용방법 (1) | 2021.10.14 |
'IT 정보/블로그 웹페이지 꾸미기' Related Articles
more
