안녕하세요. 오늘은 오랜만에 HTML 포스팅을 하려고 합니다. 거의 문제 푸는 포스팅만 했던 기억이 있기 때문에… 그래서 오늘 포스팅 내용은 보통 버튼을 눌렀을 때 다른 페이지로 이동하는 경우가 많잖아요?그런데 가끔 버튼을 눌렀을 때 스크롤이 내려가는 것을 본 적이 있습니까?오늘은 그것에 대해 포스팅을 하려고 합니다.
예시 코드
예시 화면, 먼저 사용할 예시 코드와 결과 화면을 먼저 올리도록 하겠습니다.먼저 예시 화면을 보시면 스크롤이 맨 위에 위치하고 있다는 것을 알 수 있습니다. 저는 About Me를 눌렀을 때 스크롤이 내려가는 동작을 하려고 합니다.참고로 해당 화면은 포트폴리오 겸 제가 한 프로젝트를 모아두고자 해당 페이지를 제작 중입니다! 그래서 이곳저곳 찾아다니며 열심히 제작하고 있습니다.. 생각보다 어렵네요. 그리고 다른 분들이 한 걸 보면 정말 예쁘고 잘했는데 제가 하는 걸 보면 정말 정말… 퀄리티가 너무 높거든요.)
지금부터 코드 설명을 하겠습니다.DOCTYPEhtml> <htmllang=”KO”> <head> <metacharset=”UTF-8″> <metaname=”viewport” content=”width=device-width, initial-scale=1.0″> <title> Myportfolio </title> 여기까지는 일반적인 HTML 기본틀(?)입니다.Title 이름은 MyPortfolio라고 지었습니다.
linkrel=”stylesheet” type=”text/css” href=”index.css”> 이 부분은 잘 사용하지 않는 부분입니다.저는 CSS 작업을 할 때 칸을 나누어 진행합니다.
이렇게 화면의 반으로 나눠 왼쪽은 HTML 작업, 오른쪽은 CSS 작업을 합니다.그래서 왼쪽 HTML과 연동하기 위해 사용하는 코드입니다. CSS의 이름은 index.css입니다.
<scripttype=”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({scrollTop:offset.top}, 450); Animate 함수를 사용하여 애니메이션 효과를 얻을 수 있습니다.Scroll Top 함수를 사용하여 스크롤을 이동시킬 수 있습니다(4.5초간 이동시킵니다).
이렇게 써주시면 스크롤을 이동시킬 수 있습니다.오늘 중요한 코드 설명은 여기서 끝입니다! 하지만 만약을 위해 나머지 코드도 설명하겠습니다.
<div class=”MyPage”> <header> <div class=”banner”> <nav class=”PAB”><ul class=”deepPAB”><li><ahref=”#”class=”about”> About Me</a></li><li><ahref=”class=”project”></li></li> 여기는 예시 장면입니다.~
<div class=”My Page”>를 사용해서 큰 틀을 만든 <div class=”banner”> 그 안에 banner라는 틀을 만들었습니다.navclass=”PAB”> nav를 사용해서 class의 이름이 PAB라는 네비게이션 바를 만들어 주었습니다.여기서 PAB는 이름을 넣으셔도 됩니다.<ulclass=”deepPAB”>li 문장을 사용하기 위해 ul문을 사용했고 class는 deepPAB로 했습니다.li> <ahref=”#”class=”about”> AboutMe</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를 만듭니다.여기에는 아마 이미지를 넣을 예정입니다.지금은예시로문장을넣어놨습니다.
결과, 그래서 결과를 보면 아래와 같이 아래로 내려왔음을 알 수 있습니다.오늘 포스팅은 실제로 자주 사용하는 기능으로 알아두면 정말 도움이 될 것 같아요.
오늘도 긴 글 읽어주셔서 감사합니다.