250x250
Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 |
Tags
- MAC
- IOS
- jQuery
- Animation
- effect
- 개발자
- 애니메이션
- 백엔드
- 비전공자
- 프론트엔드
- php
- ipad
- hover
- 비전공 개발자
- HTML
- iPhone
- front-end
- html5
- iOS 개발자
- button
- css3
- 풀스택
- image
- xcode
- keyframes
- javascript
- 자바스크립트
- CSS
- react
- SWIFT
Archives
- Today
- Total
비전공자 개발일기
HTML IMG 본문
728x90
SMALL
<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
</body>
</html><map name=""></map>
이미지 맵을 정의, 이미지 맵은 클릭 가능한 영역이 있는 이미지
<area alt="" shape="" coords="" href=""...>
이미지 맵 내부의 영역을 정의
<picture></picture>
반응형 디자인의 아트 디렉션
728x90
LIST
'HTML _CSS' 카테고리의 다른 글
| HTML EMMET (0) | 2021.08.24 |
|---|---|
| HTML BLOCK & INLINE (0) | 2021.08.23 |
| HTML EVENT (0) | 2021.08.20 |
| HTML (0) | 2021.08.19 |
| HTML (0) | 2021.08.16 |