안녕하세요 오늘은 버튼 클릭 시 페이지 이동하는 기능을 알아보겠습니다.
페이지 이동 기능을 넣기 위해서는 javaScript 언어를 사용하여 함수를 만들어주어야 합니다.
저는 HTML 간 이동을 보여드릴 예정입니다.
1. JavaScript 파일 생성 및 함수 구현
다음 함수는 SimpleWhiteInterior.html로 이동하는 기능을 가진 함수입니다.
javaScript 파일에 이 함수를 저장합니다.
/* move.js */
function moveWhite() {
location.href = "SimpleWhiteInterior.html";
}2. HTML 파일에 적용
버튼을 만들 html <head> 안에 다음 코드를 통해 연결시켜줍니다.
/* index.html (head) */
<script type="text/javascript" src="javascript/move.js"></script>그다음 body 안 클릭될 이미지 섹션에 onClick 속성을 넣어 위에 만들었던 함수를 적용해줍니다.
/* index.html (body) */
<section class="visual" onclick="moveWhite()">
<h2>Simple White Tone</h2>
</section>여기까지의 결과화면은 다음과 같습니다.
3. CSS에 코드 추가
<a> 태그나 <button> 태그에서는 onClick 속성을 넣으면 하이퍼링크를 적용하기 때문에 다른 설정 없이 마우스 커서의 모양이 누를 수 있는 모양으로 변경됩니다. 하지만 저처럼 다른 태그에 onClick 속성을 넣으면 위 결과화면과 같이 마우스의 커서가 바뀌지 않습니다. 따라서 다른 태그에선 CSS에 코드를 추가해주어야 합니다.
/* white.css */
.visual {
/* 마우스 커서를 포인터 모양으로 변경 */
cursor: pointer;
text-align: center;
line-height: 450px;
font-size: 25px;
color: #434343;
margin: 30px;
max-width: 100%;
height: 400px;
margin:0 auto;
background-image: url('../images/index/simpleWhite.jpg');
background-size: cover;
background-repeat: no-repeat;
}위 코드를 적용한 결과화면은 다음과 같습니다.
마우스 커서가 바뀐 것을 볼 수 있습니다! 이렇게 다른 태그에 onClick 속성을 넣는다면 CSS에 코드 한 줄을 추가해준다면 custom 버튼도 만들 수 있답니다.
읽어주셔서 감사합니다 :)