Map/Area
-이미지의 특정 부분을 선택 가능
- map 태그의 id를 img 태그에서는 usemap 속성에 입력하여 연결시키고,
map 태그에서는 내부에 area 태그를 입력하여 선택할 부분을 정함.
area 태그의 속성
-href:클릭 시 이동할 주소
-shape: area의 모양
✔react : 직사각형
✔circle : 원형 모양
✔poly : 형 영역
✔default : 전체 영역
-coords: 좌표 <img src="그림파일주소" alt="나타나지 않았을때"
usemap=" 사용할 map의 id">
<map name="이름" id="아이디">
<area href="img를 클릭했을 때 이어질 사이트 주소"
alt="나타나지 않았을때" shape="모양" coords="좌표"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style >
main{padding:50px; height:100%; background-color: whitesmoke;}
#info{display: inline-block; width:30%;}
#info article p{width:50%; color:darkslategrey; text-align: left;}
#photo{display: inline-block; width:69%;}
</style>
</head>
<body>
<main>
<div id="info">
<article>
<h2>패션</h2>
<p>Behance에서 제공하는 Boho 내추럴에서 생동감 넘치는 고급 여성복까지 아우르는 룩으로 최첨단 패션을 통해 다양한 색상을 살펴보세요.</p>
</article>
</div>
<div id="photo">
<img src="img/c1.jpg" usemap="#c1"/>
<map name="c1" id="c1">
<area href="https://color.adobe.com/ko/trends" alt="c1" shape="default" >
</map>
<img src="img/c2.png" usemap="#c2"/>
<map name="c2" id="c2">
<area href="https://color.adobe.com/ko/trends" alt="c2" shape="default" >
</map>
<img src="img/c3.jpg" usemap="#c3"/>
<map name="c3" id="c3">
<area href="https://color.adobe.com/ko/trends" alt="c3" shape="default" >
</map>
</div>
</main>
</body>
</html>
여기서 사진에 마우스를 가져다 되면, 클릭할 수 있는 모양이 나타나고
클릭하면, 해당 연결 사이트로 이어짐.
*출처*
이미지 파일은 adobe.color에서 가져왔습니다.
[링크텍스트](https://color.adobe.com/ko/trends)dl/dt/dd
-용어를 정리하는 태그
dl : 전체 감싸기
dt : 용어
dd : 설명
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style >
dt{color:darkred}
dd{color:darkgreen}
</style>
</head>
<body>
<dl>
<dt>"EasyLiving"</dt>
<hr>
<dd>"Easy Living" (1937) is a jazz standard written by Ralph Rainger <br/>and lyrics by Leo Robin for the film Easy Living where it was the main theme of the score but not sung.</dd>
</dl>
</body>
</html>
Figure, Figcaption
- 일러스트, 다이어그램, 사진, 코드등에 주석을 다는 용도
figcaption에 주석을 넣어준다.<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<figure>
<img src="img/easyliving.jpg" alt="easyliving" />
<figcaption>EasyLiving</figcaption>
</figure>
</body>
</html>
*이미지는 아래의 링크에서 사용했습니다.
[EASYLIVING]
(https://www.jazziz.com/short-history-easy-living-ralph-rainger-leo-robin-1937/)
가끔져요