저번 포스팅에서는 링크 요소에 대해서 알아보았는데요. 이번에는 이미지와 파비콘에 대해 포스트 해보려고 합니다.
이미지는 웹사이트에서 자주 사용되는 요소로 대부분의 웹사이트에서 이미지를 확인할 수 있습니다.
파비콘은 웹사이트의 아이콘으로 탭에 표시됩니다.
네이버에 접속하면 아래와 같은 아이콘이 보신적 있으시죠? 이런 아이콘을 파비콘이라고 합니다.
우선 이미지 요소의 사용법을 살펴보면 다음과 같습니다.
<img src="url" alt ="alternatetext">
src는 이미지의 URL 혹은 경로(path)를 지정하는 속성이고 alt는 네트워크 문제나, 이미지 파일이 존재하지 않는 경우 깨진 박스 아이콘과 함께 출력될 텍스트를 지정하는 속성입니다.
이미지의 URL은 이미지에 마우스 오른쪽를 클릭하면 위 사진과 같은 항목들이 표시되는데요. 이때 이미지 주소 복사를 선택하셔서 src에 넣으시면 됩니다. 다만 특히 이미지같은 경우에는 저작권법에 따라 이미지를 무단으로 사용하시면 처벌을 받을 수 있습니다!
다음으로는 파비콘을 추가하는 방법입니다.
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
파비콘은 https://www.favicon.cc 에서 생성할 수 있으며 <head> 요소 내 <link> 요소를 통해 추가할 수 있습니다.
아래 첨부파일은 제가 간단하게 만든 파비콘입니다.
이미지 요소와 피비콘을 넣은 간단한 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>myHTML</title>
<link rel="icon" type="x-icon" href="mogi_favicon.ico">
</head>
<body>
<h1>HTML 이미지와 파비콘</h1>
<p>웹사이트에서 자주 볼수 있는 이미지는 <img> 태그를 사용합니다.</p>
<p>저는 <a href="https://ko.wikipedia.org/wiki/%EA%B0%95%EC%95%84%EC%A7%80">강아지</a>와 고양이를 좋아하는데 그 중에서 강아지는 <b>리트리버</b>, 고양이는 <b>코숏</b>을 좋아해요!</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/Labrador-retriever.jpg/440px-Labrador-retriever.jpg" alt="래브라도리트리버">
</body>
</html>
이미지 출처) https://commons.wikimedia.org/wiki/File:Labrador-retriever.jpg
'Web Programming' 카테고리의 다른 글
| [HTML] Lists (0) | 2023.02.15 |
|---|---|
| [HTML] Tables (0) | 2023.02.14 |
| [HTML] HTML Links (0) | 2023.02.12 |
| [HTML] Text Formatting (0) | 2023.02.11 |
| [HTML] HTML Heading & Paragraph (0) | 2023.02.10 |