offfff

HTML 이미지(HTML Images) 본문

프로그래밍

HTML 이미지(HTML Images)

offfff 2016. 9. 3. 09:00

HTML Images Syntax


HTML에서 이미지는 <img>태그로 정의된다.

<img>태그는 empty 태그로 내용과 끝 태그가 없고, 속성만을 갖는다.


<!DOCTYPE html>

<html>

<body>

<img src="이미지의 경로" alt="텍스트" style="width:너비값;height:높이값;">

</body>

</html>




The alt Attribute


alt 속성은 이미지가 표시될 수 없는 상황에 대체되는 텍스트를 제공하는 속성이다.

이미지 로딩에 실패하거나 스크린 리더가 화면을 읽어야 할 때 등의 상황에서 사용된다.




HTML Screen Readers


스크린 리더는 HTML코드를 읽고, 텍스트를 변환해서, 사용자에게 그 내용을 들려주는 프로그램이다.

스크린 리더는 화면을 볼 수 없는 사람들에게 유용하다.




Image Size - Width and Height


이미지의 너비와 폭을 결정하기위해 style 속성을 사용할 수 있다. 그 값은 픽셀 단위로 결정한다.

width와 height 속성을 그대로 사용하는 방법도 있다. 값은 기본 단위가 픽셀이다.

이미지를 불러올 때 폭과 너비를 소스코드에서 정해주는게 좋다.

그렇게 하지 않으면 이미지가 로드될 때 페이지가 깜빡거린다.


<!DOCTYPE html>

<html>

<body>

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

<img src="html5.jpg" alt="HTML5 Image" width="128" height="128">

</body>

</html>




Width and Height, or Style?


HTML5에서 width, height, style 모두 다 쓸 수 있다.

하지만 style 속성을 더 추천한다. style 속성은 원본 이미지의 크기가 바뀌는걸 style sheet로 막을수 있기 때문이다.

아래의 예제를 통해 확인할 수 있다.


<!DOCTYPE html>

<html>

<head>


<style>

img { width:100%; }

</style>


</head>

<body>


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

<img src="picture.gif" alt="HTML5 Icon" width="128" height="128">


</body>

</html>




Images in Another Folder


src 속성에서 이미지가 있는 경로를 구체적으로 명시하지 않으면,

브라우저는 웹페이지가 속한 폴더에서 그 이미지를 찾는다.

보통 하위 폴더에 이미지를 모아서 저장하는게 일반적이기 때문에,

src 속성에서 정확한 경로를 명시해 주어야 한다.


<!DOCTYPE html>

<html>

<body>


<img src="/image/example.gif" alt="example text">


</body>

</html>




Images on Another Server


어떤 웹 사이트는 이미지 서버를 따로 두고 거기에 이미지를 저장하기도 한다.

웹 사이트 주소로도 이미지를 가져오는게 가능하다.


<!DOCTYPE html>

<html>

<body>


<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="w3schools.com">


</body>

</html>



Animated Images


GIF 표준은 움직이는 사진도 허용한다. 움짤을 불러오는 것도 다른 이미지를 불러오는것과 다르지 않다.




Using an Image as a Link


이미지를 링크로 사용하려면, <a>태그를 <img>태그 앞뒤로 둘러주기만 하면된다.


<!DOCTYPE html>

<html>

<body>


<a href="dk-projects.tistory.com>

<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="w3schools.com">

</a>


</body>

</html>




Image Floating


CSS float 속성을 사용하면 텍스트를 기준으로 이미지 정렬 위치를 설정할 수 있다.


<!DOCTYPE html>

<html>

<body>


<p>

<img src="picture.gif" alt="picture" style="float:right; width=42px; height:42px">

</p>


<p>

<img src="picture.gif" alt="picture" style="float:left; width=42px; height:42px">

</p>


</body>

</html>




Image Maps


map 태그를 사용해서 image-map을 정의할 수 있다.

image-map은 클릭가능한 부분을 가진 이미지이다.

map 태그는 img 태그의 usemap 속성의 값을 가지고 해당 이미지와 연결된다.

map 태그는 여러개의 area 태그를 내용으로 가지고, 이미지에 클릭가능한 부분들을 만든다.


<!DOCTYPE html>

<html>

<body>


<img src="planet.gif" alt="Planets" usemap="#planetmap">

<map name="planetmap">

<area shape="rect" coords="0,0,82,126", alt="Sun" href="sun.htm">

<area shape="circle" coords="90,58,3", alt="Mercury" href="mercury.htm">

</map>


</body>

</html>




아래 링크를 참조하여 번역 및 수정 함

http://www.w3schools.com/html/html_images.asp

저작자표시 비영리

'프로그래밍' 카테고리의 다른 글

HTML 리스트(HTML Lists)  (0) 2016.09.05
HTML 표(HTML Tables)  (0) 2016.09.04
HTML 링크(HTML Links)  (0) 2016.09.02
HTML CSS  (0) 2016.09.01
HTML 색 정의(HTML Colors)  (0) 2016.08.31
'프로그래밍' Related Articles more