Web/HTML

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

씨네 2021. 11. 30. 11:53
728x90

1. 텍스트 표현 요소

<b> : 텍스트 진하게

<strong> : 텍스트 진하게

<em> : 텍스트 기울임

<i> : 텍스트 기울임

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

<sub> : 아래 첨자

<sup> : 윗 첨자

<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