[HTML] 17. HTML 이미지(1)

HTML & CSS

[HTML] 17. HTML 이미지(1)

Pig-Rabbit 2020. 3. 24. 23:16

2020/03/24 - [HTML and CSS] - [HTML] 16. HTML 링크(2)

2020/03/23 - [HTML and CSS] - [HTML] 15. HTML 링크(1)

2020/03/04 - [HTML and CSS] - [HTML] 4. HTML 요소

웹사이트에는 이미지가 무궁무진하게 사용된다.

이미지는 웹사이트의 첫인상을 결정할 정도로 큰 요소이므로

웹사이트를 꾸미기 위해서는 이미지를 잘 활용하는 것이 필수이다.

HTML 이미지 문법에 대해서 배워보자.

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

<img> tag는 속성들만 가지고 있어야 한다.

또한 따로 </img>와 같은 닫는 tag가 필요하지 않다.

속성들 중에서 가장 중요한 것은 src 속성으로 이미지의 URL을 특정시킨다.

<img src="url">

그다음으로 중요한 것은 alt 속성이다.

alt 속성은 이미지를 대체할 수 있는 텍스트를 제공한다.

만약 사용자가 다른 어떠한 이유 때문에 (주로 인터넷, src속성 오류, 컴퓨터 오류 등이 있다.)

이미지를 볼 수 없다면 alt로 정의된 텍스트가 대신 나타난다.

다음은 <img>를 사용하는 대표적인 예시 중 하나이다.

<!DOCTYPE html>
<html>
<body>

<h2>Alternative text</h2>

<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>

<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">

</body>
</html>

물론 src="img_chania.jpg"로 지정된 그림 파일이 실제 폴더에 있지 않다면

사진 대신에 alt="Flowers in Chania"가 이미지 자리를 대체할 것이다.

alt 속성은 꼭 사용되지 않아도 괜찮지만,

보통의 경우에 alt 속성이 없으면 웹페이지가 정상 동작하지 않을 때가 있다.

그러므로 alt 속성으로 꼭 대체될 텍스트를 지정해주자.

위에서 봤듯이, 이미지 사이즈 또한 조절할 수 있다.

이 때는 style 속성을 사용하여 이미지의 너비와 높이를 조절할 수 있다.

바로 다음과 같이 말이다.

<!DOCTYPE html>
<html>
<body>

<h2>Image Size</h2>

<p>Use the style attribute to specify the width and height of an image:</p>
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

</body>
</html>

style 대신에 바로 width와 height 속성을 사용하는 것 또한 가능하다.

아래는 위와 같은 결과를 내보내는 코드이다.

<!DOCTYPE html>
<html>
<body>

<h2>Image Size</h2>

<p>In this example, we specify the width and height of an image with the width and height attributes:</p>

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

</body>
</html>

보면 style="width:500px;height:600px;" 로 표현되던 이미지 크기가

width="500" height="600"로 대체되어 표현됐음을 알 수 있다.

웹사이트를 제작할 때 언제나 style이나 width와 height로 이미지 크기를 지정해주자.

왜냐면 이것을 지정하지 않으면 이미지가 업로드되면서

깜빡거리는 현상이 발생할 때가 많다.

그럼 여기서 헷갈리는 사람이 있을 것이다.

style을 width와 height로 분리해서 대체할 수 있으면

무엇을 어떻게 사용하는 것이 좋을까?

나는 무조건 style을 사용하기를 추천한다.

왜냐면 스타일시트 즉, CSS로 전체 이미지의 style이 이미 지정되어 있으면

style로 따로 지정한 이미지의 경우에는 영향받지 않지만

width와 height로만 지정한 이미지의 경우에는 CSS의 style 서식을 따르게 된다.

바로 다음과 같은 예시에서 말이다.

<!DOCTYPE html>
<html>
<head>
<style>
/* This stylesheet sets the width of all images to 100%: */
img {
  width: 100%;
}
</style>
</head>
<body>

<h2>Styling Images</h2>
<p>The image below has the width attribute set to 128 pixels, but the stylesheet overrides it, and sets the width to 100%.</p>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<p>The image below uses the style attribute, where the width is set to 128 pixels which overrides the stylesheet:</p>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>

그림 파일을. html과 같은 폴더에 존재하는 것으로 변경해서 꼭 시행해보기를 바란다.

그렇다고 이미지가 항상 같은 폴더에 있을 필요는 없다.

만약 당신이 이미지를 /image/라는 디렉터리에 넣고 싶다면,

위의 <img> 부분을 다음과 같이 변경하면 된다.

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

디렉터리에 제한은 없으니 알아두도록 하자.

이때 만약 속한 폴더에 있는 디렉터리가 아니라 이전 폴더로 가고 싶다면

"../"를 사용하면 이전 폴더로 디렉터리를 설정할 수 있다.

위와 비슷하게 다른 서버에서 이미지를 가져오고 싶다면,

그 서버에 있는 이미지의 URL을 src에 입력해주면 된다.

추가로 이미지에 대한 몇 가지 팁을 정리해보았다.

1) HTML 이미지로 움직이는. gif 파일을 넣을 수 있다.

<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">

2) 이미지에 링크를 심을 수 있다.

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>

3) 이미지 위치는 style의 float으로 조정 가능하다.

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>

4) HTML Screen Reader (HTML 코드를 읽어주는 소프트웨어)를 사용하면 이미지를 대체하기 위해 alt에 있는 텍스트를 읽는다.

이 장에서 배운 것들은 이미지의 기초이다.

배운 내용을 정리하자면

이미지를 정의하기 위해 HTML <img> tag를 사용하자.
이미지의 URL은 src 속성으로 정의한다.
문제가 있을 시 이미지를 대체할 수 있는 텍스트는 alt 속성으로 정의한다.
이미지의 사이즈 조정을 위해 HTML width와 height 속성 사용이 가능하다.
이미지의 사이즈 조정을 위해 CSS width와 height 속성 사용이 가능하다.
CSS float 를 사용하여 이미지를 원하는 위치에 넣을 수 있다.

다음 장에서는 이미지를 활용하는 다양한 방법에 대해서 배워볼 것이다.

저작자표시 비영리 변경금지