AI 서비스 기획/개발 코딩

[HTML 6강] Bookmarks, Image Maps, Background, Picture

청함보리 2025. 4. 29. 20:28
반응형

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

 

참조: https://www.w3schools.com/

반응형