앱 만들기/HTML5 study

10강. 하이퍼링크 만들기

나도처음이야 2024. 7. 3.

 

 

9강. CSS 클래스 선택자 사용방법

8-2강. CSS 테두리 와 마진, 패딩 속성 사용방법테두리 설정 방법을 먼저 알아보자div 요소는 이미 크기와 배경색상을 설정한 상태이다.1.  테두리 설정하기테두리 설정을 위한 CSS 속성은 border 이

soo0100.tistory.com

 

웹 사이트는 많은 웹 페이지들로 연결되어 있다.

특정 이미지나 텍스트를 클릭하면 새로운 페이지가 열리는 동작을 하이퍼링크 라고 말한다.

HTML a태그 가 바로 이 하이퍼링크 기능르 수행한다.

 

<a> 열림 태그와 </a>  닫힘 태그로 구성되어 있고,

href : 이동할 웹페이지 URL(주소) 필수 속성을 가진다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>하이퍼링크</title>
</head>
<body>
  <a href="https://google.com">구글페이지로 이동</a>  
</body>
</html>

 

예제에서는 href 속성값으로 구글 홈페이지를 적어준다.

a 태그의 콘텐츠 영역에는 하이퍼링크 텍스트 로 보여질 내용을 적어준다.

즉, 구글페이지로 이동을 클릭하면 구글 홈페이지로 이동하는 루틴이다.

하이퍼링크 이동 결과

 

 

 

11강. 자바스크립트 블럭 과 변수 사용법

HTML과 CSS로 만들어진 웹 사이트는일반적으로 정보를 기술하고 보여주는 역할만 할 수 있다. 사용자가 특정액션을 취했을때 동작을 하거나 상호 반응을 보이기 위해서는 자바스크립트라는 프로

soo0100.tistory.com

 

반응형

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

<pre> 태그 사용법  (1) 2024.08.28
10-1강. 하이퍼링크 두개 페이지 이동하기  (2) 2024.07.04
6강. div 태그 사용방법  (0) 2024.06.26
5강 img 태그 사용법  (1) 2024.06.23
4강. br 태그 사용법  (2) 2024.06.21

댓글