안녕하세요 오늘은 오랜만에 HTML 포스팅을 하려고 합니다. 거의 문제를 푸는 포스팅만 했던 기억이 있고… 하하.. 그래서 오늘 포스팅할 내용은 보통 버튼을 눌렀을 때 다른 페이지로 이동하는 경우가 많잖아요?그런데 가끔 버튼을 눌렀을 때 스크롤이 내려가는 걸 본 적이 있나요?오늘은 그것에 대해 투고하도록 하겠습니다.
예시 코드
예시화면,먼저이번에사용할예코드와결과화면을먼저올립니다.먼저 예시 화면을 보시면 스크롤이 맨 위에 위치해 있다는 것을 알 수 있습니다. 저는 About Me 눌렀을 때 스크롤이 내려가는 동작을 하려고 합니다!참고로 그 화면은 포트폴리오 겸 제가 진행한 프로젝트를 모아두려고 그 페이지를 제작 중입니다! 그래서 여기저기 찾아다니며 열심히 제작하고 있습니다.생각보다 어려웠어요. 그리고 뭔가 다른 분들이 한 거 보니까 정말 예쁘고 잘하시는데 제가 한 거 보니까… 정말… 너무 퀄리티였어요.)
지금부터 코드 설명을 하겠습니다 <!DOCTYPEhtml> <html lang=”KO”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=”device-width, initial-scale=1.0″> <title> <Myportfolio</title> 여기까지는 일반적인 HTML기본틀(?)입니다. Title 이름은 My Portfolio라고 지었습니다.
<link rel=”stylesheet” type=”text/css” href=”index.css”> 이부분은 자주 사용하지 않을 수 있습니다.나는 CSS 작업을 할 때 칸을 나누어 진행합니다.
이렇게 화면 반으로 나눠서 왼쪽은 HTML 작업, 오른쪽은 CSS 작업을 합니다.그래서 왼쪽 HTML과 연동시키기 위해 사용하는 코드입니다. CSS 이름은 index.css 입니다.
<script type=”text/javascript” src=”http://code.jquery.com/jquery-latest.js”></script> 이 부분은 JQuery의 최신 버전을 사용하기 위한 코드입니다.다른 버전이 있어서 그 버전을 사용해야 한다면 그 버전을 넣어주시면 사용 가능합니다!
<script>$(document).ready(function(){$(“.about”).click(function(){var offset =$(‘.who’).offset();$(‘html,body’).animate({scrollTop:offset.top},450);});</script>지금부터가 오늘 포스팅의 가장 중요한 부분입니다. 지금까지 script를 써본 적이 없는데 오늘은 script를 쓰게 됐네요.script 를 사용하려면 ,<script></script>를 사용해 주세요.
$(document).ready(function(){}); 이 코드는 JQuery의 이벤트 메서드 중 하나입니다.문서가 준비되면 변수를 넣어서 함수를 실행시키라는 뜻입니다.
$(“.about”).click(function(){}; 이 코드는 Class 이름이 about을 가지고 있는 요소를 클릭했을 때 함수를 실행시키기 위한 코드입니다.여기서 about은<li><ahref=”#”class=”about”> About Me</a></li>를 의미합니다.즉, 예시 화면에 표시되는 About Me를 위로합니다.
var offset = $(‘.who’).offset(); who에 대한 좌표를 가져와 변수인 offset에 저장하고 who에 대한 좌표로 이동합니다.여기서 .offset();는 좌표를 얻거나 특정 좌표로 이동시키는 함수입니다.
$(‘html, body’).animate({scroll Top:offset.top},450);Animate 함수를 사용하여 애니메이션 효과를 얻을 수 있습니다.Scroll Top 함수를 사용하여 스크롤을 이동시킬 수 있습니다(4.5초간 이동시킵니다).
이렇게 적어주시면 스크롤을 이동시킬 수 있습니다.오늘의 중요한 코드 설명은 이것으로 끝입니다! 그래도 혹시 모르니까 나머지 코드도 설명할게요!
<div class=”MyPage”><header><div class =”banner”><nav class =” PAB”><ul class =” deepPAB”><li><a href=”#”class =”about”>About Me</a></li><li><a href=”#”class =”project”>Project</a></li><li><a href=”https://blog.naver.com/kosy17″>Blog</a></li></ul></nav></div></header><div class=” who”>Who<div class=”introductionImg”>이쪽으로 올꺼랍니다 ここは例のシーンです。~
<div class=”My Page”>를 사용하여 큰 틀을 만들어 주었습니다.<div class=”banner”> 그 안에 banner라는 틀을 만들었어요.<nav class=”PAB”> nav 를 사용하여 class 이름이 PAB 라고 하는 네비게이션 바를 만들어 주었습니다.여기서 PAB는 아무 이름이나 넣어도 됩니다.<ul class=”deepPAB”> li문을 사용하기 위해 ul문을 사용했고 class는 deepPAB로 했습니다.<li> <ahref=”#”class=”about”> About Me</a></li> a태그를 사용하여 이동시킬 수 있습니다. href에 주소를 넣어주시면 해당 주소로 이동이 가능합니다. 여기서 href를 #로 하시면 이벤트가 발생하기 전에 화면 최상단으로 가셔야 이벤트가 진행됩니다.class 이름은 about으로 하고 화면에 표기되는 이름은 About Me로 했습니다.그리고 a태그 관련해서 포스팅한 것도 있으니 한번 구경해보세요.~https://blog.naver.com/kosy17/222172170995 안녕하세요~~ 안녕하세요~~ 오늘은 HTML태그중 앵커(anchor)를 만드는 방법중 하나인 <A>&l… blog.naver.com <div class=”who”> 그리고 class 이름이 who라는 div를 만들어줍니다 여기에 제 소개를 넣을 예정입니다.
<div class=”introduction Img”> 이쪽으로 오실 겁니다. 여기는 예의 장면입니다. ~class의 이름을 introduction Img이라는 이름의 div를 만듭니다.여기에 이미지를 넣을 예정입니다.지금은 예로 글을 넣어두었습니다.
결과를 보면 아래와 같이 아래로 내려갔음을 알 수 있습니다.오늘 포스팅은 실제로 자주 사용하는 기능이라는 것을 알아두면 정말 유용하게 사용할 수 있을 것 같습니다.
오늘도 긴 글 읽어주셔서 감사합니다.