[HTML] HTML <a> <img>, 링크와 이미지 세부사항

허션·2025년 8월 15일

HTML element HTML 이미지 a html html css html 링크 html 매핑 html 배경 html 버튼 html 요소 img picture 매핑 배경 이미지 플로팅

공부

목록 보기

4/13

HTML 링크 요소 세부사항

절대적인 url(Absolute URL) vs 상대적인 url(Relative URL)
- 절대적인 url : https:// ~ 부터 시작하는 통상적인 웹 주소
- 상대적인 url : 현재 html 웹(파일)의 주소를 기반으로 한 url (한 웹 주소가 여러 다른 하위 페이지를 가지고 있을 때, 혹은 html 파일이 위치한 폴더 안에 다른 리소스 파일들이 있을 때 이용)
<a> 태그 안에 <img>태그를 넣음으로써 링크 미리보기로 이미지를 띄울 수 있다.
누군가에게 이메일을 바로 보내는 (유저의 이메일 프로그램을 여는) 링크 : mailto:someone@example.com
e.g. <a href="mailto:best3487@snu.ac.kr">Mail Me!</a>

링크 색깔

방문 전(unvisited - 기본값) / 방문 후(visited) / 마우스를 위에 올려놓았을 때(hover) / 클릭 시(active) - 이 4개의 링크 상태에 따라 스타일을 다르게 지정할 수 있음.
링크 요소는 기본 스타일값이 밑줄이 쳐져 있는 형태이며, text-decoration=none이라고 css style에서 따로 명시하면 밑줄을 없앨 수 있다.

<style>
a:link {
	background-color: #20B2AA;
	color: PapayaWhip;
	font-size: 200%;
	text-decoration: none;
} 

a:visited {
	color:LightPink;
	text-decoration: none;
}

a:hover {
	color:Tomato;
	text-decoration: underLine;
}

a:active {
	color:Snow;
	text-decoration: underLine;
}
</style>

link (기본 상태)

hover (마우스 띄운 상태))

visited (링크 방문 상태)

active (링크 클릭하고 있는 상태)

링크 버튼

CSS의 style (e.g.{padding: 15px 25px; display: inline-block})를 활용해서 링크 요소가 버튼처럼 보이도록 할 수 있음.
(padding : 순서대로 요소의 세로 방향과 가로 방향에 적은 픽셀 만큼의 패딩을 넣는 스타일 속성)
- 예시 :
```
a:link {
	background-color: #20B2AA;
	color: PapayaWhip;
	padding: 15px 25px;
	display: inline-block;
	border-radius: 20px;
} 
```

북마크 만들기 :

웹페이지가 너무 길 경우 페이지의 특정 요소로 이동하는 북마크 요소를 만들 수 있음.

→ 북마크를 설정해둘 요소에 id 속성을 설정해두고

→ 북마크는 링크 요소(<a>)로 만들고, href=”#(설정한id)” 속성을 설정해 두면 됨.

→ 이런 북마크는 다른 웹페이지에서도 링크 요소로 설정해줄 수 있음. (href=”링크#설정한id”)

<body>
<a id="top" href="#bottom">Move To Bottom</a>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<a id="bottom" href="#top">Move To Top</a>

HTML 이미지 세부사항

`src=”이미지 주소”`:

웹페이지는 열릴 때마다 <img> 태그의 src 속성 안에 있는 주소에서 이미지를 가져옴. 웹페이지 안에 고정된 것이 아니기 때문에, 웹페이지가 열릴 때 src에 명시한 주소 안에 이미지가 반드시 있어야 함.
- 이미지 주소의 경우 절대적 url과 상대적 url 중, 로컬 html 파일이 위치한 폴더 기준으로 이미지 주소를 적는 상대적인 url(relative url)을 사용하는 것을 적극 권장.
  
  (절대적 url을 가진 이미지는 외부 웹사이트에 호스팅된 이미지이므로, 다른 사람의 웹사이트에서 이미지를 가져오는 것은 윤리적이지도 않으며(내 웹에서 이미지가 로딩될 때의 트래픽 비용을 외부 웹사이트가 부담하는 등) 해당 주소의 이미지가 나도 모르게 바뀔 수 있으므로 불안정함. 만약 내 소유 웹사이트에서 이미지를 가져온다고 하면 괜찮을 것)
즉, 상대적인 url을 사용하기 위해 로컬 html 파일이 위치한 폴더 안 어딘가 이미지 파일이 있어야 하고 그 위치를 임의로 바꾸면 안된다. (코드 상 이미지의 주소를 같이 바꾸지 않는 이상)
src에 명시된 링크에 이미지가 없거나 네트워크 문제로 가져오는 것을 실패한 경우, 깨진 이미지 아이콘과 함께 alt 속성에 설정해둔 대체 텍스트가 표시된다.

width, height 속성 :

이미지의 크기 (가로 x 세로) 는 width, height 속성보다는 style 속성에서 css 문법으로 설정하는 것을 권장 :
- 속성으로 크기를 정의할 경우, header에서 정의된 style element 등 CSS style sheet에서 전체적으로 정의해 준 이미지 크기가 속성으로 정의된 개별 이미지 크기를 무시하고 덮어쓸 수 있음.
- 반면 개별 이미지의 크기를 따로 css로 정의해 주면 전체 css style 설정과 개별 요소들의 설정을 모두 유지할 수 있으므로, 그냥 css style로 이미지 크기를 정의하는 것에 익숙해지자.
```
	(w3schools의 예시) 
```

이미지 형식 :

이미지로 gif 애니메이팅 파일을 넣을 수도 있다.

이뿐만 아니라 APNG, GIF, ICO, JPEG, PNG, SVG 파일 모두를 지원함

이미지 “플로팅” :

문단 <p> 요소 안에 이미지 요소 <img>를 넣으면 문단 안에 이미지를 위치시킬 수 있다.

또한 css의 float 문(e.g. style=”float:right”)으로, 이미지가 다른 요소 위에 ‘떠 있도록’ 할 수 있는데, 이미지와 다른 요소를 나란히 정렬시키는 데 이용된다고 보면 된다.

floating 코드 예시 :

<p>
<img src="images/cafe.jpeg" alt="cafe that feels good"
style="float:left;width:200px">
느낌 좋은 카페. 느낌 좋은 카페. 느낌 좋은 카페. 느낌 좋은 카페. 느낌 좋은 카페. 느낌 좋은 카페. 느낌 좋은 카페. 느낌 좋은 카페. 느낌 좋은 카페. 느낌 좋은 카페. 느낌 좋은 카페. 느낌 좋은 카페. 
</p>

이미지를 링크로 넣기 :

<a> 안에 <img>를 넣으면 된다.

ex:

<h1>고함항아리구경하기>>
<a href="https://github.com/h-seo-n/Scream-Jar" style="float:right;">
<img src="images/cloud.jpeg" style="width:200px">
</a>
</h1>

이미지 매핑 :

좌표를 이용해서 이미지의 특정 구역을 클릭하면 다른 링크로 이동하는 등, 이미지의 특정 구역과 사용자와의 상호작용을 구현할 수 있다.
<map> 요소에서 설정해줄 구역을 shape와 coords 속성으로 정의해주고, <map>의 name 속성과 <img>의 usemap 속성이 일치하게 함으로써 연결해주면 된다.

예시 형식 :

<img src="images/ex1.jpg, usemap=#ex1">

<map name="ex1">
    <area shape="rect" coords="34,44,270,350" href="example1.htm"
>

<area> : <map> 요소 안에 구역을 설정해주는 <area> 요소가 있고, 추가적 속성으로 구역의 모양과 크기를 설정해줄 수 있다.
- shape=”rect” : 가장 왼쪽 상단의 좌표와 가장 오른쪽 하단의 좌표, 총 두 쌍의 좌표를 coords에 적어 준다.
- shape=”circle” : 원의 중심 좌표와 원의 반지름, 총 세 개의 숫자를 적어준다.
- shape=”poly” : 여러 쌍의 좌표를 입력하면, 그 점들을 선으로 연결한 다각형 모양을 만든다. (사진 출처 : https://www.w3schools.com/html/html_images_imagemap.asp)
- <area href = “…”> : 정의해준 구역을 클릭했을 때, href 속성에 적은 링크로 이동하도록 한다.
JavaScript : <area> 요소의 onclick 속성에 자바스크립트 함수 이름을 명시함으로써, 정의해준 이미지 구역(맵 요소)이 자바스크립트 함수에 정의된 대로 사용자와 상호작용하게 할 수 있다.

ex.
```
<area … onclick=”myfunction()”> …
<script>
function myFunction() { … }
</script>
```

배경으로 이미지 넣기 :

전체 웹페이지에 배경 이미지 넣기:
<style> 태그 혹은 css 시트 안에 background-image: url(’이미지 주소’); 를 설정해주면 된다.
- ex:
```
<style>
body {
	background-image: url('images/landscape.jpeg');
	background-size: cover;
	background-attachment: fixed;
}
</style>
```
특정 HTML 요소에 배경 이미지 넣기 : 개별 style 속성으로 설정해주면 된다.

배경 이미지 관련 스타일 설정들 :
- background-size :
  - “cover”로 설정해둘 시, 이미지가 기존의 비율을 유지하면서 페이지(혹은 요소) 전체를 채운다. → 밑에 나오는 background-attachment 설정 없이 그냥 cover만 할 시 “100%”로 설정하는 것과 같음
  - “100%”로 설정하면 기존의 비율을 유지하면서 가로 길이만 페이지(혹은 요소)의 길이에 맞춘다.
  - “100% 100%”로 설정하면 비율을 유지하지 않고 페이지(혹은 요소) 전체를 덮어버린다.
- background-attachment :
  - 현재 사용자가 브라우저를 통해 보고 있는 웹의 영역인 viewport에 배경이 고정되어 있는지, 혹은 페이지(혹은 요소)가 스크롤 될때 배경이 같이 스크롤 되는지의 여부.
    → background-size=cover; background-attachment=fixed; 이렇게 동시에 설정해두면 배경 이미지가 항상 페이지(혹은 요소) 전체를 가린다.
- background-repeat :
  - 이미지의 원래 크기가 요소나 페이지보다 작으면, 페이지(혹은 요소)를 모두 덮을때까지 배경 이미지가 반복된다. 이게 싫으면 background-repeat: no-repeat;를 설정해주면 된다.

→ css background에 대해 더 검색해보면 더 잘 알 수 있는데 실제로 만들때 그때그때 검색하면서 해도 될 것 같다.

`<picture>` 요소

모바일, 태블릿, 데스크탑 등 웹사이트를 여는 기기에 따라 브라우저의 너비가 달라지면, 화면 크기에 따라 다른 이미지를 표시할 수 있게 하는 요소이다. 사용 기기에 따라 다른 디자인을 보여주는 반응형 디자인을 구현할 때 등에 사용할 수 있다.
형식 :
```
<picture>
	<source media="(min-width: nnnpx)" srcset="ex1.jpg">
	<source media="(min-width: mmmpx)" srcset="ex2.jpg">
	<img src="default_img.jpg">
</picture>
```
<picture> 내부 <source> 요소가 있고, media 속성으로 어떤 조건 하에 해당하는 이미지를 표시할지 설정해준다. 이때 브라우저는 소스를 순서대로 보다가 조건을 만족하는 소스를 찾으면 더 보지 않고 바로 그 소스(이미지)를 표시한다.
<source>요소들을 다 작성한 후 마지막에 <img> 요소를 넣어주면, 모든 조건이 만족하지 않을 때의 기본값 이미지가 된다.

허션

다시해보자.

이전 포스트

[HTML] 브.꾸 : HTML 브라우저 탭 꾸미기 (웹 제목 및 아이콘)

다음 포스트

[HTML] HTML <a> <img>, 링크와 이미지 세부사항

공부

HTML 링크 요소 세부사항

링크 색깔

링크 버튼

북마크 만들기 :

HTML 이미지 세부사항

`src=”이미지 주소”`:

width, height 속성 :

이미지 형식 :

이미지 “플로팅” :

이미지를 링크로 넣기 :

이미지 매핑 :

배경으로 이미지 넣기 :

`<picture>` 요소

[HTML] 브.꾸 : HTML 브라우저 탭 꾸미기 (웹 제목 및 아이콘)

[HTML] html 리스트 요소들 (<ul>, <ol>, <li>, ...)

0개의 댓글

[HTML] HTML <a> <img>, 링크와 이미지 세부사항

공부

HTML 링크 요소 세부사항

링크 색깔

링크 버튼

북마크 만들기 :

HTML 이미지 세부사항

`src=”이미지 주소”`:

width, height 속성 :

이미지 형식 :

이미지 “플로팅” :

이미지를 링크로 넣기 :

이미지 매핑 :

배경으로 이미지 넣기 :

<picture> 요소

[HTML] 브.꾸 : HTML 브라우저 탭 꾸미기 (웹 제목 및 아이콘)

[HTML] html 리스트 요소들 (<ul>, <ol>, <li>, ...)

0개의 댓글

`<picture>` 요소