[HTML] 텍스트(text), 이미지(img)

728x90

1. 텍스트 표현 요소

 : 텍스트 진하게

 : 텍스트 진하게

 : 텍스트 기울임

 : 텍스트 기울임

 : 작은 텍스트 표시, 코멘트 등

 : 아래 첨자

 : 윗 첨자

<ins> : 내용 추가

<del> : 내용 삭제

2. 이미지

<img alt="" src="">

- 주요 속성

alt : 이미지를 설명하는 내용 지정. 이미지가 보이지 않을 경우, 이미지 설명 텍스트

width : 이미지의 가로 크기 지정

height : 이미지의 세로 크기 지정

src : 이미지 경로 지정

이미지의 경로를 지정해 줄때 해당 경로에 반드시 이미지가 있어야 출력됩니다!

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text img link</title>
</head>
<body>

	<h1>TEXT</h1>
	<!-- web 접근성 (strong, em, ... -->
	<p>
		<b>진하게(&lt;b&gt;)</b><br>
		<strong>진하게(&lt;strong&gt;)</strong><br>
		<i>기울임(&lt;i&gt;)</i><br>
		<em>기울임(&lt;em&gt;)</em><br>
		<small>작은 텍스트 표시, 코멘트(&lt;small&gt;)</small><br>
		윗 <sup>첨자</sup>(&lt;sup&gt;)<br>
		아래 <sub>첨자</sub>(&lt;sub&gt;)<br>
		<ins>내용 추가 (&lt;ins&gt;)</ins><br>
		<del>내용 삭제 (&lt;del&gt;)</del><br>
	</p>

	<hr>
	
	<h1>IMG</h1>

	<img alt="img01 설명입니다." src="resources/img/img01.png" width="200px" height="200px" title="img01.png임!!!">
	
	<!-- 
		px : 픽셀 (해상도 별 상대크기)
		pt : 포인트 (1pt = 0.72인치)
		%, em : 지정/상속 등에 대한 백문율 (상대크기)
	 -->
	
	<h3>이미지에 링크 걸기</h3>
	
	<a href="index.html" title="index로 가자!">
		<img alt="goindex" src="resources/img/img01.png" width="100px" height="100px">
	</a>
	
	<h3>이미지 맵</h3>
	
	<img alt="my icon" src="resources/img/img01.png" usemap="#my" width="100px" height="100px">
	
	<map name="my">
		<area alt="go index" shape="rect" coords="25, 25, 75, 75" href="index.html" title="인덱스 가자!!">
	</map>
	
</body>
</html>

아래 이미지에 링크가 걸려있습니다!

이미지 맵은 이미지 전체에 링크가 걸려있는 것이 아니라 링크를 걸 범위를 지정해주었습니다.

728x90

'Web > HTML' 카테고리의 다른 글

[HTML] 리스트(list) (0)	2021.12.02
[HTML] 링크(link <a>) (0)	2021.12.01
[HTML] 구분선(hr), 인용문(quotation) (0)	2021.11.29
[HTML] 제목, 단락, 주소 (0)	2021.11.28
[HTML] 블록(block) 요소 & 인라인(inline) 요소 (0)	2021.11.27

'Web > HTML' 카테고리의 다른 글

티스토리툴바