HTML-Image(이미지)

728x90

※ 주의 !

이 글은 개인 공부 목적으로 많은 오류가 있을 수 있습니다.

문제가 있다면 말씀 부탁 드리겠습니다.

안녕하세요 Gon입니다.

이번 글에서는 다양한 문서들을 조금더 시각적으로 향상을 시켜주고 도움을 줄 이미지에를 구현하는 방법에 대하여 알아보록 하겠습니다.

HTML Images Syntax - 이미지 문법

HTML 에서는 <img> 태그를 이용하여 웹페이지에 이미지를 구현할 수 있습니다.

조금 더 정확이 표현하자면 HTML에서 <img>태그를 이용하여 해당 이미지에 대한 공간을 확보하는 것입니다. 그리고 이 확보한 공간에

어떠한 경로를 지정하여 지정된 경로의 이미지를 구현하는 것입니다.

<img> 태그의 특징

앞서 대부분 다른 tag들은 시작태그와 종료태그로 구성되어있습니다.

하지만 <img>태그는 <br>태그처럼 empty태그라 불리며, 종료태그가 존재하지 않습니다.

위에서 언급했다 시피 <img>태그는 공간을 확보하는 일을하고 이 안에 2가지 속성값(src,lat)을 이용하여 경로를 지정해줍니다.

src 속성

<img>태그안에 사용되는 속성인 src 속성은 구현하고 싶은 이미지파일의 경로를 지정해 주는 속성입니다.

alt 속성

<img>태그안에 사용되는 속성인 alt 속성은 어떠한 문제로 인하여 이미지파일을 불러오지 못했을 경우 대체 택스트를 제공하기 위한 속성입니다.

위의 두가지 속성을 이용해서 우리는 HTML안에 이미지를 불러올 수 있게 됩니다.

이때에 주의사항은 불러오는 이미지파일의 경로의 지정이 정확해야 됩니다. 이 내용에 관해서는 추후에 더 자세히 다루도록 하겠습니다.

다음과 같이 사용할 수 있습니다.

<img src="imgfile.jpg" alt="이미지 로드 실패">

이미지의 사이즈 조정

어떠한 이미지를 해당 웹페이지에서 구현을 하려고 할때 해당 이미지의 사이즈와 구현을 하고싶은 크기가 다른 경우가 대부분 입니다.

이러한 사이즈의 변경이 필요할 때 style 속성을 이용하여 지정 할 수 있습니다.

이방법은 크게 3가지 방법으로 사용할수 있는데 기존 CSS에 좀더 자세하게 적어놨습니다.

2021/01/04 - [컴퓨터/HTML] - HTML-CSS

HTML-CSS

※ 주의 ! 이 글은 개인 공부 목적으로 많은 오류가 있을 수 있습니다. 문제가 있다면 말씀 부탁 드리겠습니다. 안녕하세요 Gon입니다. 이글에서는 HTML을 이용하여 전자문서를 만드는 과정에서 계

blog-of-gon.tistory.com

간략한 예시를 들자면 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 100%;
}
</style>
</head>
<body>

<!-- Internal 방식의 이미지 구현 -->
<img src="someimg.gif" alt="internal방식">

<!-- Inline 방식의 이미지 구현 -->
<img src="someimg.gif" alt="inline방식" width="128px" height=128px">
<img src="someimg.gif" alt="inline방식" style="width:128px;height=128px">



</body>
</html>

이번 글에서는 HTML 작성 중 이미지 구현에 대하여 알아보았습니다.

감사합니다.

Gon

728x90

'컴퓨터 > HTML&CSS' 카테고리의 다른 글

HTML-List(목록) (0)	2021.02.03
HTML-tables(행과열의 구성 또는 표) (0)	2021.01.20
HTML-Links(링크태그) (0)	2021.01.11
HTML-CSS (0)	2021.01.04
HTML-Colors (0)	2020.12.30