[HTML] 이미지 태그
2023. 3. 9. 13:56ㆍ기술 창고/HTML
728x90
SMALL
HTML에는 이미지를 불러올 수 있는 태그가 존재한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Abc corporation Abc corporation</title>
</head>
<body>
<h1><a href="index.html">abc.com</a></h1>
<h2>About us</h2>
<img src="images/ABC_com.gif" alt="abc logo"> <!-- alternative 대체 -->
<img src="http://place-hold.it/300x300" alt="dummy image">
<ul>
<li><a href="about.html">about us</a></li>
<li><a href="docs/services.html">services</a></li>
<li><a href="docs/location.html">location</a></li>
<li><a href="docs/html/partners.html">partners</a>
<ul>
<li><a href="http://www.naver.com" target="_blank">naver</a></li>
<li><a href="http://www.daum.net" target="_blank">daum</a></li>
</ul>
</li>
<li><a href="docs/catalog.zip">catalog download</a></li>
<li><a href="mailto:info@abc.com">contact us</a></li>
</ul>
<hr />
<p>
<a href="#ci">Our CI</a> /
<a href="#vision">Our Vision</a> /
<a href="#history">Our History</a>
</p>
<hr />
<h2 id="ci">Our CI</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
<h2 id="vision">Our Vision</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
<h2 id="history">Our History</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
</body>
</html>
<!--
# id 속성 : 해당 태그의 고유한 구분값
# 현재 페이지 내에서 원하는 섹션 부분으로 이동하고 싶을 때 사용하는 방법
(1) 원하는 섹션 태그에 id 속성을 부여한다. 예) <h2 id="history">
(2) 이동하고자하는 a 태그의 href 속성에 1번에서 부여한 id 속성값을 넣어준다. 예) <a href="#history">
여기서 a 태그의 href에 적은 id 값의 맨 앞에 있는 #는 id 속성을 의미한다.
-->- <img> : 이미지를 호출하는 태그
- src 속성 : 이미지를 호출할 절대 경로 혹은 상대 경로를 넣는 속성.
예1) <img src="images/abc.jpg"> : 상대경로 이미지 호출
예2) <img src="http://place-hold.it/300x300"> : 절대경로 이미지 호출 - alt 속성 : src 에 넣은 경로를 통해 이미지를 호출할 때 잘못된 경로 명을 입력하거나 파일 명을 입력했을 때 대체로 나오게 할 정보값 속성.
예) <img src="images/abc.jpgt" alt="abc_logo"> : abc.jpg 파일명이 잘못 설정되어있어서 이미지가 나오지 않고 alt 로 설정한 정보가 대체되어 나온다. - 이미지도 텍스트의 lorem 명령어처럼 더미 이미지를 호출할 수 있다.
src="http://place-hold.it/300x300"
[실행한 결과]
728x90
반응형
LIST
'기술 창고 > HTML' 카테고리의 다른 글
| [HTML] Form 태그 (0) | 2023.03.14 |
|---|---|
| [HTML] 원하는 섹션으로 이동 (0) | 2023.03.09 |
| [HTML] anchor 태그 이동 경로 설정 파악 (0) | 2023.03.09 |
| [HTML] anchor 태그 (0) | 2023.03.09 |
| [HTML] 테이블 태그 (2) | 2023.03.07 |