<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3> 링크테스트 </h3>
<a href = "이동할 주소url"> 텍스트 </a>
<!-- a가 링크 태그 href: 에 이동할 주소 url 적어준다 -->
<a href= "1.html"> 내 페이지 </a><br/>
<a href="http://www.daum.net"> 다음 </a><br/>
<a href="http://www.naver.com"> 네이버 </a><br/>
<!-- 하이퍼링크 같은 개념 -->
<!-- 이미지를 띄우는 태그는 img -->
<!-- 절대경로를 적어준다 -->
<img src = "/webApp1/img/다음.png"/><br/>
<img src = "/webApp1/img/네이버.gif"/><br/>
<!-- 상대경로 -->
<!-- html 폴더 한단계 위에 있는 webapp에 들어가서 img 폴더 들어갈꺼니까 -->
<!-- 상위 폴더로 간다는 뜻으로 ../ 으로 표현 해줌 -->
<a href="http://www.daum.net"><img src = "../img/다음.png" width= "220" height = "250"></a> <br/>
<a href="http://www.naver.com"> <img src = "../img/네이버.gif" style = "height : 220px"></a> <br/>
<!-- alt : 사진 엑박 떳을 때 왜 떴는지 텍스트로 알려주는 속성 -->
</body>
</html>이미지를 넣고 싶다면 사진을 다운로드 받은 뒤 이미지 폴더를 하나 만들어줘서 그 안에 이미지를 넣어주면 된다.
▶ 하이퍼 링크
<a href = "url">링크 텍스트 </a> "url" 에 인터넷 주소를 넣어주면 된다
▶ 이미지 출력
<img> 태그는 웹페이지에서 이미지를 정의한다. <img> 는 바디 없이 속성만 갖는다. 따라서 <img src = "경로" / > 후 / 로 헷갈리지 않게 닫아 준다. <img> 의 속성으로는 src와 alt 가 있다. src는 출력하려는 이미지의 경로를 적어주고 alt는 이미지가 출력 되지 않을 경우 보여줄 텍스트를 등록한다. 그리고 이미지 역시 style 속성을 사용하여 이미지의 크기를 조절 할 수 있다.
▶ 이미지에 하이퍼링크 넣기
하이퍼링크에 이미지를 넣으려면 어떻게 해야 할까?
<a> </a> 사이에 <img> 를 넣어 주면 된다.
'Front > html' 카테고리의 다른 글
| [html] 웹 페이지의 기본 뼈대 - 테이블 칸 병합 (0) | 2023.03.22 |
|---|---|
| [html] 웹 페이지의 기본 뼈대 - Form (0) | 2023.03.21 |
| [html] 웹 페이지의 기본 뼈대 - 테이블 (0) | 2023.03.20 |
| [html] 웹 페이지의 기본 뼈대 - 목록 형식으로 출력 (0) | 2023.03.20 |
| [html] 웹 페이지의 기본 뼈대 - Style (0) | 2023.03.20 |
