HTML공부 3일 차!
Chpater 3는 이미지와 하이퍼링크를 사용하는 방법을 알려준다.
<figure>
<img src="images/fantasy.jpg" alt="환상적인 이미지">
<figcaption> 환상적인 이미지</figcaption>
<img src="images/fantasy.jpg" width = "250" height =100 alt="환상적인 이미지">
<figcaption> 환상적인 이미지</figcaption>
</figure>- <img> 이미지를 첨부하는 태그 , src = 이미지의 주소 , alt = 화면낭독기로 읽을 경우 읽는 텍스트 width = 이미지의 가로길이 조절 , height = 이미지의 세로 길이 조절
- <figcaption> Chapter 2에서 표의 설명글 붙이는 태그로 쓰이지만 이미지의 설명글을 붙일 때도 쓰인다
<! -- 텍스트 링크 -->
<h2>텍스트 링크</h2>
<a href= "http://www.kpu.ac.kr/index.do?sso=ok" target ="_blank">한국산업기술대학교</a>
<br>
<! -- 이미지 링크 -->
<a href= "http://www.kpu.ac.kr/index.do?sso=ok">
<img src="images/fantasy.jpg" width = "250" height =100 alt="환상적인 이미지"></a>
<! -- 페이지가 길 경우 링크 -->
<ul id ="menu">
<li><a href="#content1">메뉴1</a></li>
<li><a href="#content1">메뉴2</a></li>
</ul>
<h2 id="content1">내용1</h2>
<p><a href ='#menu'>메뉴로</a></p>
<h2 id="content2">내용2</h2>
<h2><a href="#menu">메뉴로</a></h2>
- <a> 링크를 만들 수 있는 태그 , href = 링크 주소 , <a> 텍스트 링크 제목 or 이미지 </a> , target = 새창에서 띄우는 옵션
- 페이지가 길 경우 목차를 만들어 링크를 걸 수 있다. ex) <a href =" #content1"> 메뉴 1 </a>
<img src="images/fantasy.jpg" alt="환상적인 이미지" usemap="#favorites">
<map name="favorites">
<area shape="rect" coords="10,10,160,200" href = "http://www.kpu.ac.kr/index.do?sso=ok"
target = "_blank">
<area shape="rect" coords="220,10,380,200" href = "https://www.naver.com/"
target = "_blank">
</map>- <map> 하나의 이미지에 두 개의 링크를 걸어주는 태그 , area = 모양 , coords = 좌표
<h1>SVG 이미지 삽입하기</h1>
<img src="images/muffin.svg">
- 비트맵 이미지 : jpg/jpeg, png파일을 크게 확대해 나타내면 이미지 테두리 부분이 울퉁불퉁해진다.
- 벡터 이미지 : SVG파일 크기를 조정해도 이미지가 깨지지 않고 깨끗이 유지되기 때문에 로고나 아이콘에서 많이 사용되며 데이터 시각화에서 차트나 다이어그램, 지도 등을 구현할 때 사용된다.
아래 코드는 사진에 링크 여러 개를 연결하는 실습을 한 것이다.
<!DOCTYPE html>
<html lang='ko'>
<head>
<meta charset = 'utf-8'>
<title>실습</title>
</head>
<body>
<img src="images/event.jpg" alt="이벤트"usemap = "#eventMap">
<map name ="eventMap">
<area shape="circle" coords = "327,239,55" href="https://www.naver.com/" alt="네이버링크"
target = "_blank">
<area shape="rect" coords = "45,1277,192,1475" href="https://www.naver.com/" alt="네이버링크"
target = "_blank">
</map>
</body>
</html>링크를 연결할 모양이 원일 경우 원점을 찾고 반지름을 순서대로 입력하면 된다.
사각형인 경우 좌측 상단과 우측 하단의 좌표를 찾아서 입력하면 된다.
C , C++을 배울 때와 느낌이 너무 달라서 아직 미흡한 부분이 많다. 그래도 조금만 더 쓰다 보면 익숙해질 것 같다.
오늘 공부한 내용은 텍스트와 이미지에 링크를 연결해 보았다. 앞서 배웠던 태그들을 활용해서 새로운 태그들을 결합하여 나오는 예제들이 많은 것 같다. 자연스럽게 앞서 배웠던 태그들을 다시 깨닫게 해 주었고 점점 더 재미있어지는 것 같다.
'HTML' 카테고리의 다른 글
| [Chapter 4-1] HTML5 공부 5일차! (2021-07-03) (0) | 2021.07.04 |
|---|---|
| [Chapter 3 - 연습문제] HTML5 공부 4일차!(2021-07-01) (0) | 2021.07.01 |
| [Chapter2 - 연습문제] HTML5 공부 2일차 (2021-06-29) (0) | 2021.06.30 |
| [Chapter 2-2] HTML5 공부 2일차 (2021-06-29) (0) | 2021.06.30 |
| HTML공부 시작! (2021-06-28) (0) | 2021.06.29 |