HTML 수업

웹의 신체

HTML 수업 웹의 신체

이미지

이미지의 표현

HTML에서 이미지를 표현하기 위해서는 <img> 태그를 사용한다.

문법(Syntax)

<img src="이미지가 위치하는 URL" alt="대체텍스트" width="폭" height="높이" longdesc="링크" />
  • src : source의 약자로 이미지가 위치하는 URL을 기술한다.
  • alt : alternative의 약자로 한국어로는 대체 텍스트라고 부른다. 이미지가 로딩되기 전이나, 이미지를 로딩할 수 없는 경우 이미지의 위치에 텍스트가 표시된다. 시각장애인을 위한 장치와 검색엔진에서도 사용된다.
  • width, height : 이미지의 크기
  • longdesc : 이미지와 관련된 링크

설명(Description)

  • 이미지를 로드해서 화면에 표시함
  • alt는 대체 텍스트를 활용해서 시각장애인, 저사양,저속도 사용자, 이미지가 유실되는 상황에 대비해야 함.

예제(Example)

example1. 이미지 태그를 사용하는 다양한 방법 (jsfiddle, github, ?)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	</head>
	<body>
		이미지 로딩 : <br /><img src="http://farm7.staticflickr.com/6234/6233942894_0a917abbf0_s.jpg" /><br /><br /><br />
		대체 텍스트 사용 : <br /><img src="http://farm7.staticflickr.com/6234/6233942894_0a917abbf0_s.jpg" alt="생활코딩 로고" /><br /><br /><br />
		대체 텍스트 사용, 존재하지 않는 이미지 로딩 : <br /><img src="http://farm7.staticflickr.com/6234/empty.jpg" alt="생활코딩 로고" /><br /><br /><br />
		이미지의 크기 지정 : <br /><img src="http://farm7.staticflickr.com/6234/6233942894_0a917abbf0_s.jpg" width="50" /><br /><br /><br />
	</body>
</html>

참고

댓글

댓글 본문
작성자
비밀번호
  1. NAMO
    감사합니다!
  2. JustStudy
    고맙습니다
  3. qoeksl87
    이고잉님 목소리가 너무 좋아서 자꾸 듣게됨 ㅋㅋㅋ
  4. 통조림
    저도 궁금해서 검색해 본 걸 공유해봅니다 ㅋㅋ
    이미지에 대한 설명이 alt속성값 안에 다 담지 못할만큼 설명이 긴 경우,
    다른 html파일로 설명을 따로 빼서 longdesc의 속성값으로 그 파일의 주소를 주는 거라고 합니다.
    그런데 이렇게 longdesc를 쓰는 경우에도 alt에 개략적인 설명을 겸하는게 좋다고 하네요.
    대화보기
    • LuWoo
      html 막 들어온 초보입니다. 이미지링크는 어디서 구하는 건지를 모르겠어서요...
      일단 이미지가 있는 url 그대로 arc에 넣어서 해봤는데 그러면 이미지가 깨지더라고요...

      예제대로 <a>를 더해서 이미지를 클릭해서 링크로 이동할수 있게 하는것까지는 알갰는데 이미지링크를 어디서 봐야하는지좀 알려주시면 감사하겠습니다.
    • MaBin
      실례가 되지 않는다면 img태그에서 longdesc는 어떤 역할을 하는지 알려주실 수 있으신가요?
    • Harryki007
      마지막에 보여주신 이미지링크에 대해서 저번시간에 배운 target="_blank" (새창으로 링크열기)를 응용해봤는데요

      <a href="https://opentutorials.org/" target="_blank"><img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png"></a>

      처음에 해도해도 안되길래 왜 안되나 봤더니 제가 img태그 안에다가 target태그를 집어넣었더라고요;;;

      여러분은 그런실수 하지마세요 ㅠ
    • 보현
      좋은 강의 감사합니다!!
      이미지는 안나오네요.. URL이 바꼇나 봅니다 아쉽아쉽
    • 코코
      오 진짜 강의가 이해도 잘되고 재밌어요~ 감사합니다!!
    • 라이크
      생활코딩이미지링크가 깨졌나봐요..
      정말 강의는 잘 보고 있습니다. 최고!!
    • jerry
      좋은 강의 감사합니다.
    • 컴퓨터를만지자
      많이 배워갑니다!
    • 김신애
      ↓ 저는 안 깨져 보이는데요?
    • 정규석
      이미지가 다 깨졋네요
    • 전지
      잘 봤습니다. 감사합니다~
    • 어부바
      감사합니다.
    • YellowBall
      이미지(2/2) 잘 들었습니다.
      그런데 궁금한 것이 있습니다 longdesc가 어떻게 쓰이는 것인가요? 2015/4/22
    • phpfacebook
      http://teilar.tistory.com......%B8

      이런거 이야기하시는걸까요?
      대화보기
      • egoing
        주소에서 https의 s를 빼고 접속해 보세요~
        대화보기
        • 좋아요~
          ㅇ헐쿠 ㅣ.... 동영상이 저만 안되는건가요.. ㅠㅠ
        • egoing
          음 질문이 잘 이해가 안되네요~
          대화보기
          • Jhungmin
            화면에 나타날 수 있는 픽셀 수를 확인하는 방법이 따로 있나요??
            대화보기
            • Jhungmin
              쉽고 재미있게 수강중인 학생입니다. 정말 감사의 말씀 드립니다. 다름이 아니라 소스코드에 http://naver.com 이라고 해야 하는 이유, 다시 말하면 www 를 치면 안되는 이유가 무엇인지 알려주시면 감사하겠습니다.
            • egoing
              pixel이라는 단위입니다.
              대화보기
              • jinwookyoo0517@googlemail.com
                안녕하세요 동영상 강의 정말 잘보고 있습니다
                질문이 하나 있는데요 이미지의 폭과 높이 크기 단위가 어떻게 되나요 센티미터인가요 아니면 밀리미터인가요??
              • 서현뿌뿌
                감사합니다~
              • 야곱
                참 쉽게 설명해주시니 감사합니다.
              • 후르츠
                alt로 설명하기에는 너무 많은 내용이 제공되어야 한다면 img 태그에 longdesc(long description)라는 속성을 이용하여 대체 콘텐츠를 포함한 페이지 URI를 참조하도록 하는 것을 권장하고 있다.

                참고 링크의 longdesc 설명입니다.
              • 98OptiMus
                에구구 님 정말감사하옵니다 ㅠㅠ
              • Jina Kim
                잘 보았습니다. 감사합니다
              • 충박
                플리커 이미지 없어졌어요 ㅠ
              • 유형찬
                감사합니다! 선생님!
              • archivist
                궁금했는데 감사합니다^^
                대화보기
                • huziya
                  alt 태그는 반드시 해줘야하는군요..
                • 박종길
                  잘 배웠습니다.
                  그런데.....
                  Longdesc 부분에 대한 설명이 없네요....
                  하다보면 나중에 배우게 되겠지요?
                • 박종길
                  감사합나다.
                • egoing
                  이미지를 윈도우 안으로 드래그 앤 드롭하면 될 것 같아요.
                  대화보기
                  • 박종길
                    윈도우에서 내가 만든 jpg 파일을 가상머신 우분투로 이동시키려면 어떻게 하나요?
                    꼭 좀 알려주세요.
                  • 로망
                    잘보고있습니다 감사합니다
                  • egoing
                    버그라는 말이 있군요. title 속성을 대신 사용하면 된다고 하네요. 아래는 제가 찾아본 내용입니다. :)

                    http://stackoverflow.com......ome
                    대화보기
                    • 캥캥
                      2013.10.02
                      alt가 크롬에서는 안되고 파이어폭스에서만 되는 것은 이유가 있나요?
                    • mimiandchopa
                      잘보았습니다 ^^
                    • Hyunduk Yi
                      잘 봤습니다. 쉽게 이해되네요. ^^
                    • 장난감 가루
                      근데 <img> longdesc 설정은 html5에서 지원하지 않는다고 하네요?
                      http://www.w3schools.com/tags/...
                    • Rags
                      자신 컴퓨터의 이미지를 표시하려면 src에 아래의 예제 처럼 추가하면 됩니다.file://C:/Users/Rags/Pictures/test.jpg
                      대화보기
                      • dong y
                        재밌어요 감사합니다 PHP 배우기전에 배우는데 강의 퀄리티도 좋고너무너무 감사합니다. 복받으실겁니다.
                      • zimin
                        초보입니다. 반드시 URL사용해서 불러와야하나요? 그럼 서버가 필요한 건가요? 도와주세요 ㅋㅋㅋ
                      • goodbreath
                        alt 태그란 걸 오늘 처음 알았어요~ 어쩐지 그 기능에서 인간미가 느껴지네요 ^^
                      • Jmogoon
                        잘 들었습니다. 고맙습니다.
                      • Dongju Kim
                        img src응 Image Source라는 뜻.
                      버전 관리
                      egoing
                      현재 버전
                      선택 버전
                      graphittie 자세히 보기