[HTML 6강] Bookmarks, Image Maps, Background, Picture
1. HTML Bookmakrs (원하는 페이지 점프)
(1) 'id' attribute 사용
<h2 id="C4">Chapter 4</h2>
(2) 북마크 링크 추가
<a href="#C4">Jump to Chapter 4</a>
(3) 다른 페이지에서 북마크된 링크 추가
<a href="html_demo.html#C4">Jump to Chapter 4</a>
2. HTML Images
(1) <img> 태그를 사용하며, 2개의 어트리뷰트가 필요.
- src : 사진 경로
- alt : 이미지의 설명글
<img src="url" alt="alternatetext">
(2) Width and Height
- style 어트리뷰트를 사용해서 사진의 너비, 높이 책정
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
- width, height 어트리뷰트로도 가능
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
style 어트리뷰트 사용을 추천한다. 시트가 바뀔때 이미지 사이즈가 바뀜을 방지함.
(3) 사진의 위치에 따라 src 어트리뷰트 활용
- 하위 폴더에 있을 경우
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
- 다른 서버나 웹페이지에 있을 경우
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
(4) HTML 에서는 gif도 바로 업로드 가능하다.
(5) 이미지를 링크로 활용할 수 있다.
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
(6) Image Floating
- CSS 'float' 특성으로 글의 왼쪽, 오른쪽에 이미지 삽입 가능
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
3. HTML Image Maps
<map> 태그는 이미지 맵으로, 클릭가능한 영역이다.
사진에서 컴퓨터, 핸드폰, 커피 클릭시 각각 다른 해당 페이지로 이동한다.
(1) <img> 태그에 'usemap' 어트리뷰트 추가하기.
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
해시태그 #를 통해 이미지맵으로 이동 가능
(2) 이미지맵 생성
<map> 엘리먼트 추가하기. 이미지맵을 만들기 위한 엘리먼트로, name 어트리뷰트를 필요로 함.
<map name="workmap">
이때 name은 앞선 <img> 에서의 usemap과 이름이 같아야 한다.
(3) Area, 클릭 가능한 영역을 설정한다.
<area> 엘리먼트를 사용하며, 영역의 모양을 아래의 values 에서 선택해야 한다.
- default - defines the entire region
- rect - defines a rectangular region / shape="rect" / 꼭지점 끝 값 입력 (x,y)
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
- (x,y) = (34,44) ~ (270,350) 위치 지 - circle - defines a circular region / shape="circle" / 원의 중심 위치 + 반지름(radius) 지정
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
- (x,y,z) = (x좌표, y좌표, 반지름) - poly - defines a polygonal region / shape="poly" / 다각형,
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">
- 점이 되는 여러 포인트들 지정. (140,121), (181,116), ...., (128, 147)
(4) Image Map and JavaScript
자바스크립트 기능으로도 구현 가능하다.
<area> 엘리먼트에 click 이벤트 기능을 넣기.
<map name="workmap">
<area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()">
</map>
<script>
function myFunction() {
alert("You clicked the coffee cup!"); #팝업 띄워주기
}
</script>
4. HTML Background Images
(1) <style> + CSS 'background-image'
<p style="background-image: url('img_girl.jpg');">
(2) <style> + <head> section
<style>
p {
background-image: url('img_girl.jpg');
}
</style>
(3) <style> + <body> element
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
(4) 이미지가 작으면 화면에 반복되는데, background-repeat: no-repeat 로 조절 가능
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
(5) Background Cover: background-size, background-attachment: fixed (전체 화면으로 고정)
(6) Background Stretch
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
5. HTML <picture> Element
- 각기 다른 장치나 스크린 사이즈에 각각 다른 디스플레이를 가능하게 하는 엘리먼트
- 1개 이상의 <source> 엘리먼트들을 포함하고, srcset 으로 다른 이미지들 연관.
- <picture> 엘리먼트 사용 이유 2가지
(1) Bandwidth - 사이즈에 맞는 엘리먼트 사용
(2) Format Support - 모든 포맷의 이미지 파일 사용 가능.
HTML Image Tags
TagDescription
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |