![[HTML] 텍스트(text), 이미지(img)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcyNjmd%2FbtriAHRbxpb%2FvAIPrZjXmDctgQoTG8RSIk%2Fimg.jpg)
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>진하게(<b>)</b><br>
<strong>진하게(<strong>)</strong><br>
<i>기울임(<i>)</i><br>
<em>기울임(<em>)</em><br>
<small>작은 텍스트 표시, 코멘트(<small>)</small><br>
윗 <sup>첨자</sup>(<sup>)<br>
아래 <sub>첨자</sub>(<sub>)<br>
<ins>내용 추가 (<ins>)</ins><br>
<del>내용 삭제 (<del>)</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 |