HTML에서 이미지 가져오기 (img 태그)

신규 블로그를 만들었습니다!

2020년 이후부터는 아래 블로그에서 활동합니다.

댓글로 질문 주셔도 확인하기 어려울 수 있습니다.

>> https://bluemiv.tistory.com/

웹 개발을 하다보면 이미지는 굉장히 중요한 역할을 합니다.

HTML에는 자체적으로 이미지를 가져와 보여주는 기능이 있습니다. 이 기능을 하는 img 태그에 대해 살펴봅니다.

그리고, img 태그안에 들어가는 속성(src, alt, width, height)도 같이 살펴봅시다.

<img> 이미지 태그

img태그는 image의 줄임말입니다. 따로 언급하지 않더라도 쉽게 추측 할 수 있습니다. 이미지 태그를 사용하는 방법은 매우 간단합니다.

위와 같이 사용하면 됩니다. 여기서 이미지 경로는 로컬에 있는 이미지(PC에 저장된 이미지)의 경로가 들어가도 되고, 네트워크 상에서 돌아다니는 이미지의 경로를 넣어도 됩니다.

예를들어 봅시다. 저는 "조보아"님 사진을 가지고 예제를 만들었습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8" />
    <title>이미지</title>
</head>
<body>
    <!-- 로컬에서 이미지 불러오기 -->
    <h3>Local 환경에서의 이미지</h3>
    <p><img src="images/jo01.jpg" alt="조보아 사진"/></p>

    <!-- 인터넷에서 이미지 불러오기 -->
    <h3>인터넷 환경에서의 이미지</h3>
    <p><img src="http://rgo4.com/files/attach/images/2676751/909/558/019/093271cf31ad9cabdf4216e7bbcc7b7b.jpg" alt="조보아 사진"/></p>

    <!-- 크기 조절하기 -->
    <h3>크기 조절</h3>
    <p>
        <img src="http://image.chosun.com/sitedata/image/201808/10/2018081001569_0.jpg"
            alt="조보아 사진" />
    </p>
    <p>
        <img src="http://image.chosun.com/sitedata/image/201808/10/2018081001569_0.jpg"
            alt="조보아 사진"
            width="300" />
    </p>
</body>
</html>

9번~10번째 줄이 로컬 이미지이고,

13번~14번째 줄이 네트워크상에서 돌아다니는 이미지입니다.

17번~ 25번째 줄을 보면, width라는 속성을 이용해서 이미지의 크기를 조절할 수 있습니다.

결과는 아래와 같습니다.

alt 속성

alt 속성은 필수 속성은 아니지만 넣어주는 권장합니다.

하는 역할을 먼저 설명하자면, 이미지의 경로가 잘못되거나 이미지 파일이 깨져서 불러올 수 없는 상황이 되면, 이미지 대신에 alt속성에 넣은 문자열이 화면에 출력이됩니다. 예를들면,

<img src="not_exists.jpg" alt="조보아 사진" />

width, height 속성

그리고, width와 height 속성을 통해서 사진의 크기를 조절 할 수 있습니다. (보통은 css로 처리합니다.)

예제확인 사이트
https://taehongdev.github.io/html_css_study/exam03/exam03_04.html

3장 예제4

taehongdev.github.io

다른 글

2019/03/15 - [WEB/HTML&CSS] - HTML에서 리스트 사용방법(ol, ul, li)

HTML에서 리스트 사용방법(ol, ul, li)

HTML에는 리스트를 표현할 수 있는 방법이 크게 2가지가 있다. 하나는 ol, ul을 사용하는 방법, 두번째는 dl, dt를 사용하는 방법이다. 무엇을 사용할지는 개발자 마음이다. 다만 추천하는 방법은 ol이나 ul이다...

hongku.tistory.com

2019/03/16 - [WEB/HTML&CSS] - HTML 테이블 사용방법 (table)

HTML 테이블 사용방법 (table)

html 문서에는 테이블을 생성할 수 있는 방법이 있다. 바로 table 태그를 사용하면 되는데, table 태그 안에는 행(row)을 컨트롤할 수 있는 tr태그와 열(column)을 컨트롤할 수 있는 td태그가 있다. 그리고, colsp..

hongku.tistory.com

저작자표시 비영리 동일조건

'WEB > HTML&CSS' 카테고리의 다른 글

CSS의 기본정리. 반드시 알아야하는 CSS 내용 (0)	2019.03.19
HTML 오디오 태그 (Audio, iframe) 음악 자동재생 (3)	2019.03.18
HTML 테이블 사용방법 (table) (0)	2019.03.16
HTML에서 리스트 사용방법(ol, ul, li) (0)	2019.03.15
CSS :: 버튼(Button) 예쁘게 꾸미기, 여러개의 버튼 그룹화 하기 (28)	2018.10.19