AND_END

10. HTML 이미지 본문

HTML

10. HTML 이미지

하둉이 2018. 12. 9. 03:35
반응형

<* 10. HTML 이미지 *>




- HTML 이미지 구문

: HTML에서는 이미지가 <img>태그로 정의됩니다.

 <img>태그는 닫는 태그가 없습니다.

 src 속성은 이미지의 URL(웹 주소)를 지정합니다.


<img src="url">



- alt 속성

: alt 속성은 어떤 이유로 사용자가 볼 수 없는 경우에 속성은 이미지에 대한 대체 텍스트를 제공한다.

 alt 속성의 값은 이미지를 설명한다. 


<!DOCTYPE html>

<html>

<body>


<img src="img_chania.jpg" alt="Flowers in Chania">


</body>

</html>

  실행 결과



또한,

브라우저에서 이미지를 찾을 수 없다면 alt 속성 값이 표시됩니다.


<!DOCTYPE html>

<html>

<body>


<p>If a browser cannot find the image, it will display the alternate text:</p>


<img src="wrongname.gif" alt="Flowers in Chania">


</body>

</html>

  실행 결과





- 이미지 크기 (너비와 높이)

: style 속성을 사용하여 이미지의 너비와 높이를 지정할 수 있습니다.



EX 1)


<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">


EX 2)


<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">


--> width 및 height 속성은 픽셀 이미지의 폭과 높이를 정의합니다.




- 다른 폴더의 이미지 

: 이미지를 하위 폴더에 저장하는 것이 일반적입니다. 그런 다음 src 속성에 폴더 이름을 포함시켜야 합니다.


<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">


/ (슬러시)를 사용하여 하위폴더로 이동을 합니다. 위의 예제는 현재 HTML파일이 있는 폴더에서 images 폴더로 이동하여 html5.gif파일을 찾습니다.




- 이미지 플로팅

: CSS float 속성을 사용하여 이미지가 텍스트의 왼쪽이나 오른쪽으로 떠있게 합니다.



<p><img src="smiley.gif" alt="Smiley face"style="float:right;width:42px;height:42px;"></p>


<p><img src="smiley.gif" alt="Smiley face"style="float:left;width:42px;height:42px;"></p>

  실행 결과





- 이미지 map

: <map> 태그는 이미지 맵을 정의합니다. 이미지 맵은 클릭 가능한 영역이 있는 이미지입니다.

  

<!DOCTYPE html>

<html>

<body>


<h2>Image Maps</h2>


<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>


</body>

</html>


실행 결과 (클릭 전 -> 클릭 후)




- 배경 이미지 

:  웹 페이지에 배경 이미지를 추가하려면 body 요소에 background-image 속성을 지정하세요.


<body style="background-image:url('clouds.jpg')">

<h2>Background Image</h2>

</body>

실행 결과




: 단락에 배경 이미지 추가


<body>

<p style="background-image:url('clouds.jpg')">
...
</p>

</body>








반응형

'HTML' 카테고리의 다른 글

12. HTML 목록  (0) 2019.01.03
11. HTML 테이블  (0) 2018.12.22
9. HTML 링크  (0) 2018.12.03
8. HTML CSS  (0) 2018.11.28
7. HTML 색상  (0) 2018.11.19
'HTML' Related Articles more