HTML로 이미지 추가

작가: Christy White
창조 날짜: 4 할 수있다 2021
업데이트 날짜: 1 칠월 2024
Anonim
HTML - 이미지 : img
동영상: HTML - 이미지 : img

콘텐츠

웹 사이트 나 소셜 네트워크 프로필에 이미지를 추가하는 것은 웹 페이지를 꾸미는 훌륭한 방법입니다. HTML (HyperText Markup Language)에는 웹 페이지를 만드는 많은 기능이 있지만 다행스럽게도 이미지를 추가하는 데 필요한 코드는 그리 어렵지 않습니다.

단계로

방법 1/1 : HTML을 사용하여 이미지 삽입

  1. 핫 링크를 허용하는 Photobucket 또는 TinyPic과 같은 무료 호스팅 웹 사이트에 이미지를 업로드하세요. 핫 링크를 사용하면 이미지를 웹 사이트 서버에 직접 연결할 수 있습니다. 일부 공급자는 핫 링크가 대역폭을 사용하고 서버 공간을 차지하기 때문에이를 금지했습니다.
    • 유료 호스팅 계정이있는 경우 웹 사이트가 위치한 서버에 이미지를 직접 업로드하세요. 이것은 항상 무료 사이트보다 더 안정적이며 전혀 비쌀 필요가 없습니다.
  2. 텍스트 편집기에서 새 문서를 엽니 다 (예 :, 메모장 / 메모장) 또는 웹 사이트 / 프로필에서 HTML 코드를 직접 변경할 수있는 페이지를 엽니 다.
  3. 시작 img 꼬리표. 그만큼 img 태그가 비어 있습니다. 즉, 닫는 태그가 필요하지 않습니다. 그러나 XHTML 유효성 검사의 경우 앞에 공백과 슬래시를 넣을 수 있습니다. ~보다 큰 기호.
    • img />
  4. 사용 가능한 속성이 많이 있지만 하나만 필요합니다.src. 이미지의 위치 / 주소 또는 URL입니다.
    • img src = "이미지의 URL"/>
  5. 다음은 alt 속성을 추가하십시오. 이미지로드에 실패한 경우 대체 텍스트가 표시됩니다. 스크린 리더를 사용하는 시각 장애인을위한 서비스이기도합니다.
    • 이미지 위로 커서를 가져 가면이 텍스트도 도구 설명으로 표시되지만 Internet Explorer의 경우에만 해당됩니다. 모든 브라우저에서 작동하는 솔루션 (Firefox et al.) 그것입니다 표제 추가로 사용할 속성 alt. (이미지에 도구 설명이 포함되지 않도록하려면 후자를 생략 할 수 있습니다.)

예로서:img src = "이미지의 URL"alt = "경우에 따라"title = "Tooltip"/>


  1. 이제 이미지의 크기를 신장 속성 및 픽셀 또는 백분율을 지정합니다. 이 방법으로 크기를 조정하면 이미지 자체의 크기가 아닌보기 크기 만 변경됩니다. 이미지의 로딩 시간을 단축하려면 특히 큰 이미지의 경우 사진 편집 소프트웨어 또는 PicResize.com과 같은 온라인 서비스를 사용하여 미리 크기를 조정하는 것이 좋습니다.
    • img src = "이미지의 URL"alt = "경우에 따라"title = "툴팁"높이 = "50 %"너비 = "50 %"/>
    • img src = "이미지의 URL"alt = "경우에 따라"title = "Tooltip"높이 = "25px"너비 = "50px"/>

  • 이러한 속성의 값은 1-100 %의 픽셀 또는 백분율로 제공됩니다.
  • 이미지는 상단, 하단, 중간, 오른쪽, 왼쪽 등과 같은 다양한 서식 속성을 사용하여 웹 페이지의 어느 곳에 나 배치 할 수 있습니다.
  • hspace 속성은 이미지의 왼쪽과 오른쪽에 수평 공간을 삽입하는 데 사용되며 vspace 속성은 이미지 및 기타 객체의 상단과 하단에 공간을 만드는 데 사용됩니다.
  • 이미지에 너무 탐닉하지 마십시오. 지저분하고 전문가답지 않은 것 같습니다.
  • GIF 이미지는 로고나 만화에는 적합하지만이 파일 형식은 색상이 많은 사진 및 기타 이미지에는 적합하지 않습니다.
    • GIF 이미지는 이미지에 대해 최대 256 색의 8 비트 색상 만 지원합니다. 따라서 16 비트 또는 24 비트 컬러 일러스트레이션이나 사진의 재현이 좋지 않을 것으로 예상됩니다.
    • GIF 이미지는 투명도도 지원합니다. 한 비트의 투명도가 가능하므로 한 가지 색상을 투명하게 만들 수 있습니다.
    • 인터 레이싱은 GIF 이미지에서도 지원되므로 사이트 방문자는 이미지가 완전히로드되기 전에 이미지가 어떻게 보일지에 대한 아이디어를 얻을 수 있습니다.
    • GIF 형식은 애니메이션도 지원합니다.
  • URL에 이미지의 파일 형식 (.webp .gif 등)이 명시되어 있는지 확인합니다.

경고

  • Hotlink하지 마십시오!