이미지 삽입하기
<img> 태그를 사용한다.
<img> 의 속성
src 이미지 파일이 위치한 곳에 관한 url 정보가 들어간다.
align 이미지와 텍스트를 같이 사용했을 때 텍스트의 위치를 정렬시킨다.
(top, center, bottom, left, right)
alt 웹브라우저에서 이미지에 마우스를 대면 간단한 설명을 표시한다.
border 이미지의 테두리를 지정한다.
height 이미지의 높이를 지정한다. (픽셀 단위)
width 이미지의 넓이를 픽셀 단위로 지정한다. (픽셀 단위)
hspace 이미지의 좌우에 여백을 지정한다.
vspace 이미지의 상하에 여백을 지정한다.
usemap 이미지에 이미지 맵을 지정할 때 사용한다.
▶ 예
<html>
<head>
<title>문서에 이미지 넣기</title>
</head>
<body>
<p><img scr=http://goodtree.grs.pw/img/sample1.jpg width=”186” height=”179” align=”left”>
<strong>IMAGE SAMPLE</strong><br>
<br>
이미지 샘플의 예를 살펴보자.<br>
<br>
이미지 샘플 1<br>
이미지 샘플 2<br>
이미지 샘플 3<br>
이미지 샘플 4<br>
<br>
이미지 샘플 5<br>
이미지 샘플 6<br>
이미지 샘플 7<br>
이미지 샘플 8<br>
</body>
</html>
웹 상에 있는 이미지 올리기
위의 이미지 삽입하는 소스의 앞과 뒤에 링크 소스를 다음과 같이 추가해 준다.
<a href=”이미지를 클릭하면 나타나게 될 HTML 문서 경로”>
<img src=”이미지 경로” width=”가로픽셀” height=”세로픽셀”>
</a>
▶ 예
<a href="http://goodtree.grs.pw/page/1.html">
<img src=http://goodtree.grs.pw/img/sample1.jpg width=”500” height=”500>
</a>
이미지나 텍스트를 깔끔하게 표 안에 정리하기
테이블 태그를 이용한다.
<table width=”테이블크기픽셀” border=”0” cellspacing=”0” cellpadding=”0”>
<tr>
<td><img src=”첫번째 줄에 들어갈 이미지 경로” width=”가로픽셀” height=”세로픽셀”>
</td>
</tr>
<tr>
<td><img src=”두번째 줄에 들어갈 이미지 경로” width=”가로픽셀” height=”세로픽셀”>
</td>
</tr>
</table>
▶ 예
<table width=”750” border=”0” cellspacing=”0” cellpadding=”0”>
<tr>
<td>
<ime src="http://goodtree.grs.pw/img/sample1.jpg” width=”750” height=”500”>
</td>
</tr>
<tr>
<td>
<ime src="http://goodtree.grs.pw/img/sample2.jpg” width=”750” height=”500”>
</td>
</tr>
</table>
'홈페이지 만들기' 카테고리의 다른 글
| Material Design 무료로 사용하기 (0) | 2021.04.27 |
|---|---|
| css 스타일 시트 a 명령어 [링크 밑줄과 색지우기] (0) | 2021.04.27 |
| 구글 폰트 사용하기 (0) | 2021.04.27 |
| 홈페이지 표만들기 명령어 (0) | 2021.04.24 |
| 홈페이지 html 문서 작성 명령어 1 (0) | 2021.04.24 |
