HTML 수업

이미지 - img

목적

문서에 이미지를 포함합니다.

예제

<html>
<body>
    <img src="img.jpg" height="300" alt="산 이미지" title="산 이미지">
</body>
</html>

등장시기

html2

댓글

댓글 본문
작성자
비밀번호
  1. Hyeon Ju An
    alt 개념 확실히 알고 갑니다^^
  2. 180118 감사합니다!
  3. 171231 감사합니다!
  4. 푸른하늘
    6
  5. Migyeong Kang
    잘 들었습니다.
  6. 바람과 나무
    감사합니다.
  7. 서주희
    사진을 삽입할때 png 파일은 등록이 안되나요??
    다른 gif 파일 같은 거두요
    깨져서 나오네요
  8. 이성준
    깜싸합니다
  9. 오빠는다르다
    감사합니다_!!
  10. 아이노바
    너무 감사합니다.
  11. gridshim
    170829
    <img>태그는 안 닫아도 된다
    폭이나 넓이가 '비율대로 늘어날 수 있도록 하나만 이용?
    alt는 대안가능한! 이미지가 깨졌을 경우, alt 속성값으로 어떤 정보가 있는지 알려준다.
    title을 쓰면 이미지 위에 설명을 쓸 수 있다.
  12. Ji-Hoon Lee
    170804 완료!
  13. php가 첫취업?
    감사합니다
  14. 14번째
    4.27.
  15. 자바 입문자
    엑박 표시에 오른쪽 마우스 클릭하신 후 속성 확인해보세요.. 이미지 경로가 잘못돼서 그럴 수도 있어요. 엑박들은 대개 요청한 이미지 파일이 해당 경로에 없을 때 발생합니다.
    대화보기
    • 한가람
      철자 하나 안틀리고 그대로 다 했는데..
      jpg파일도 같은파일안에 넣구..
      엑박뜨는 이유가 뭘까요 ㅠㅠ
    • VVINKIM
      <img> 닫을 필요없다
      sec 속성 = 파일 이름
      width 속성 = 크기 변경 (폭) / height 속성 = 크기 변경 (높이) / 한가지의 값만 변경하게 되면 자동 변경 된다
      alt 속성 = 이미지가 깨지거나 사용할 수 없을 경우 alt의 값이 화면에 표시
      title 속성 = 툴팁을 통해 도움말 생성
    • 푸른하늘
      감사합니다
      170324
    • 무중력고양이
      170315 완료
    • Young Kwang Cho
      <a>는 콘텐츠에 링크를 연결하는 태그이고,
      <img>는 웹페이지에 이미지를 보여주는 태그입니다.

      두 태그는 태생이 다릅니다.

      <a>의 href속성으로 이미지의 경로를 넣더라도, 화면에는 이미지가 나타나지 않겠죠.
      <a>내용내용</a> 이처럼 <a>는 태그 사이에 콘텐츠가 들어가야 하고, 그 콘텐츠를 화면에 노출시키기 때문입니다.
      <img>는 src 속성으로 이미지 경로를 넣게 되면 해당 태그 위치에 이미지가 노출됩니다.
      (대부분의 태그들은 태그 사이에 콘텐츠를 넣고 그것을 노출시키지만 img나 input 처럼 몇몇 요소들은 태그 자체가 다른 콘텐츠로 치환되어 나타납니다. replacement tag 이렇게 표현했던것 같은데..정확히는 모르겠네요.)

      물론 <a href="이미지경로">이미지</a> 이렇게 하면 화면에는 이미지라는 텍스트가 노출되는데요. 그 '이미지' 텍스트를 클릭한다면, 이미지 경로로 페이지가 이동할건데요. 요즘 브라우저들은 매우 다양한 포맷을 지원하기 때문에 이미지가 나타날겁니다. 하지만 그건 내가 원하는 페이지에서 이미지 노출하는것이 아닌, 페이지를 이동하여 그냥 이미지 뷰어처럼 브라우저가 이미지를 보여주는것뿐입니다.
      대화보기
      • 미니밥통
        신기하게 귀에 쏙속 들어옵니다.
      • 웹초보
        궁금증이 생겼는데요
        웹어플리케이션만들기 강의부터 듣고 와서 html강의를 듣고있는데요
        <a>를 이용하면 링크를 가져올 수 있잖아요 근데 왜 굳이 <img>를 이용하는 건가요?
        혹시나 해서 <a>를 이용해 봤는데 이미지가 불려지지 않더라구요. 구글링을 해봤으나 바로 찾아지지 않는게
        각 테그의 내부 부분과 관련된 깊은 내용인거 같아서 질문 드립니다.
      • 무무
        너무 감사드립니다.
      • 임지호
        img 태그 웹페이지에 이미지파일을 넣는 태그
        속성 src = 어떤 이미지 파일을 넣을 건지 정함
        width, height = 폭, 높이를 지정(둘 중 하나만 지정하면 원래 이미지 파일 비율에 맞게 알아서 크기 조정)
        alt = 이미지가 어떠한 이유로 정상적으로 나오지 않을 때 대체되는 텍스트(시각장애인들은 이것으로 웹에서
        이미지 파일을 인지하기 때문에 습관화하는 것도 괜찮다)
        title = 이미지 파일에 마우스를 올리면 나오게 되는 도움말의 내용을 기록
      • newbie
        이미지파일을 같은 폴더에 넣고 해보세여
      • 이미지가 엑박으로 웹에 표시가 안되는 이유는 뭐죠 ㅠㅠㅠ..
      • boom
        아두이노 스케치에 똑같이 적용해보려고하는데... 자꾸 에러가 뜨네요... 혹시 아두이노 스케치에 적용할때 주의할게 있을까요?
      • D.JA
        DONE!
      • bak.ha
        수강완료
      • 심외무별법
        감사합니다.
      • 김종엽
        2016.08.12 완료!
      • Ian Si Mong Seong
        수강완료
        2016.08.01
      • 김윤아
        수강완료~
      • riggive0408
        저 혹시 이미지 파일을 밑에 뜨는거 말고 오른쪽 사이드에는 뜰수 있도록 설정 못하요?
      • JustStudy
        2016.07.19 화
        고맙습니다 3.
      • ㅁㄴㅇ
        음 포맷이 jpg가 아니지 않을까요.. png거나 gif거나..
        대화보기
        • 이승민
          pixabay 같은 사이트는 후에 요긴하게 쓸 수 있을듯 하네요 ㅎ 좋은사이트도 알려주셔서 감사합니다~
        • 김경동
          pixabay 애용하겠습니다!
        • 여어리희
          제목을 그냥 Img로는 인식을 하는데 Img.jpg로 하니까 그림이 안 뜨는 것은 왜 그러는 건지 궁금합니다
        • openarms
          pixabay.com 이라는 좋은사이트가 있었네요! 감사합니다.
        • 좋은 강의 잘들었습니다.
          감사합니다.
        • 검사무운
          잘 봤습니다.
        • SK Kim
          도장 쾅!
        • cham
          감사합니다~
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기