<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html 수업 첫 날</title>
</head>
<body>
--이미지를 불러오는 태그 <img>
<img alt="이미지가 없을 때 나오는 메세지" src="이미지2.png">
<br>
<img alt="이미지없음" src="이미지1.gif">
<br>
<a href="http://www.naver.com">
<img alt="이미지 없음" src="이미지2.png">
</a>
<br><br>
<img alt="이미지가없음" src="이미지2.png" width ="200" height ="200">
<br>
<img alt="이미지가없음" src="이미지1.gif" width ="200" height ="200">
<br>
<img alt="" src="이미지2.png" border="5">
--사진 테투리에 사각형을 만들고 그 사각형의 굵길를 5로 지정해 준다.
--hspace 속성은 이미지의 왼쪽과 오른쪽에있는 공백을 지정합니다.
이그림은 왼쪽
<br><br>
<img alt="" src="이미지2.png" align="left" hspace="10">
--align은 왼쪽
<br clear="left">
--위에 align 으로 왼쪽으로 배치를 했다면 다음에 나오는 요소들도 왼쪽으로 배치된다.
따라서 여기서 필요한게 clear 속성인데 이것은 위에 왼쪽으로 배치한 것을 종료시켜
다음에 넣는 요소들이 왼쪽으로 배치되지 않게 해주는 것이다.
이그림은 오른쪽
<img alt="" src="이미지2.png" align="right" hspace="10">
<br clear="right">
<!-- 이 라인까지만 이렇게 써라-->
</body>
</html>
'HTML,CSS' 카테고리의 다른 글
| HTML(7)+CSS ,전체에 style주기 (0) | 2018.07.28 |
|---|---|
| HTML(6) table, caption,tr,td,th,colspan,rowspan (0) | 2018.07.28 |
| HTML(4) font, div, link, a href , #id (0) | 2018.07.28 |
| HTML(3) sub,sup,strong (0) | 2018.07.28 |
| HTML(2) style,align,inline방식 (0) | 2018.07.28 |