안녕하세요 오늘은 오랜만에 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(){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 함수를 사용하여 애니메이션 효과를 얻을 수 있습니다.ScrollTop 함수를 사용하여 스크롤을 이동시킬 수 있습니다(4.5초간 이동시킵니다).
이렇게 적어주시면 스크롤을 이동시킬 수 있습니다.오늘의 중요한 코드 설명은 여기서 끝입니다! 그래도 혹시 모르니까 나머지 코드도 설명드릴게요!
<div class=”MyPage”> <header> <div class=”banner”> <nav class=”PAB”> <li> <ahref=”#”class=”about”> About Me</a> <li> <li> <nav class=”project”> Project </a> </li> <https://blog.naver.com/kosy17> 여기는 예시 장면입니다.~
<div class=”My Page”>를 사용하여 큰 틀을 만들어 주었습니다.<div class=”banner”> 그 안에 banner라는 틀을 만들어 주었습니다.<navclass=”PAB”> nav를 사용하여 class 이름이 PAB라는 네비게이션 바를 만들어 주었습니다.여기서 PAB는 아무 이름이나 넣어주셔도 됩니다.<ulclass=”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 태그 중 앵커를 만드는 방법 중 하나인 <A> &l…blog.naver.com <div class=”who”> 그리고 class 이름이 who라는 div를 만들어 줍니다.여기에 제 소개를 넣을 예정입니다.
<div class=”introduction Img”> 이쪽으로 오실 거예요. 여기는 예시 장면입니다.~class의 이름을 introductionImg이라고 하는 이름의 div를 만듭니다.여기에는 아마 이미지를 넣을 예정입니다.지금은예시로글을넣어놨어요.
결과적으로 결과를 보면 아래와 같이 아래로 내려간 것을 알 수 있습니다.오늘 포스팅은 실제로 자주 사용하는 기능으로 알아두면 정말 유용하게 사용할 수 있을 것 같아요.
오늘도 긴글 읽어주셔서 감사합니다!!