앱 만들기/HTML5 study

10-1강. 하이퍼링크 두개 페이지 이동하기

나도처음이야 2024. 7. 4.
반응형

 

하이퍼링크를 사용해서 두 개의 페이지를 서로 이동해 본다.

첫 번째 웹페이지에 하이퍼링크를 만든다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>두개의 페이지 이동하기 A</title>
</head>
<body>
  <a href="hyperlinkB.html">To B page</a>  
</body>
</html>

 

a 태그의 href 속성값으로 두 번째 웹페이지의 주소를 적는다.

웹페이지의 저장위치가 같은 곳일 경우 파일명만 적어도 된다.

첫번째 A페이지 완성

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>두개의 페이지 이동하기 B</title>
</head>
<body>
  <a href="hyperlinkA.html">To A page</a>  
</body>
</html>

 


두 번째 페이지에서도 a 요소를 작성하고,

필수 속성값으로 첫 번째 페이지의 파일명을 기재한다.

 

두번째 B페이지 만들기 완성

 

브라우저에서 확인해보면, 정상적으로 두 페이지가 서로 왕래 가능해진다.

간단하지만 두 개의 페이지가 서로 링크 가능한 웹 사이트가 만들어진 것이다.

웹 사이트는 이렇게 만들어진다.

 

A,B 페이지 이동이 가능한 웹 사이트

 

반응형

'앱 만들기 > HTML5 study' 카테고리의 다른 글

<pre> 태그 사용법  (1) 2024.08.28
10강. 하이퍼링크 만들기  (2) 2024.07.03
6강. div 태그 사용방법  (0) 2024.06.26
5강 img 태그 사용법  (1) 2024.06.23
4강. br 태그 사용법  (2) 2024.06.21

댓글