HTML을 사용하여 웹 페이지에 이미지를 추가하는 방법

HTML을 사용하여 웹 페이지에 이미지를 추가하는 방법

2022-06-01 last update

5 minutes reading Spin Up HTML
이 강좌에서 HTML을 사용하여 웹 사이트에 이미지를 추가하는 방법을 배울 것입니다.화면 판독기를 사용하는 사이트 방문자의 접근성을 높이기 위해 이미지에 대체 텍스트를 추가하는 방법도 배울 것이다.

HTML을 사용하여 이미지 추가

<img> 요소를 사용하여 HTML 문서에 이미지를 추가합니다.<img> 요소는 이미지를 저장하는 파일의 위치를 설정할 수 있는 속성src이 필요합니다.이미지 요소는 다음과 같이 작성됩니다.
<img src="Image_Location">
<img> 요소는 끝 </img> 태그를 사용하지 않습니다.<img> 요소를 사용하려면 다운로드 our image of Sammy the Shark 하여 프로젝트 디렉토리 html-practice. 에 배치하십시오.
참고: 상어 사미의 이미지를 다운로드하려면 이미지의 the linkCTRL + Left Click (Mac에서) 또는 Right Click (Windows에서) 을 선택한 다음 다른 이름으로 저장 을 선택하여 프로젝트 디렉토리에 저장합니다.
그런 다음 small-profile.jpeg 파일의 내용을 지우고 index.html 파일에 붙여넣습니다.(이 강좌 시리즈를 배우지 않으셨다면 저희 강좌 Setting Up Your HTML Project 에서 설정 <img src="Image_Location"> 파일에 대한 설명을 보실 수 있습니다.
그런 다음 이미지의 파일 경로를 복사하여 저장된 위치로 대체합니다index.html.Visual Studio 코드 텍스트 편집기를 사용하는 경우 왼쪽 패널의 이미지 파일 Image_Location 에서 CTRL + Left Click (Mac에서) 또는 Right Click (Windows에서) 을 사용하고 [경로 복사] 를 선택하여 파일 경로를 복사할 수 있습니다.이 프로세스에 대한 자세한 내용은 다음 gif를 참조하십시오.

참고: 이미지의 절대 또는 전체 파일 경로가 아니라 복사된 이미지의 상대 또는 프로젝트 파일 경로를 확인하십시오.상대 경로는 현재 작업 디렉토리에 대한 파일 위치를 나타냅니다. 절대 경로와 반대로 절대 경로는 루트에 대한 파일 위치를 나타냅니다.이 두 경로는 이 예에서 모두 유효하지만, 만약 우리가 온라인으로 사이트를 발표하기로 결정한다면 상대적인 경로만 유효하다.우리의 최종 목표는 발표 가능한 사이트를 만드는 것이기 때문에 문서에 small-profile.jpeg 요소를 추가할 때, 우리는 현재 상대 경로를 사용하기 시작할 것이다.
파일을 저장하고 브라우저에 다시 로드합니다.다음을 수신해야 합니다.

기술적으로는 온라인 위탁 관리 이미지를 가리키는 링크를 파일 경로로 사용할 수도 있습니다.작업 원리를 이해하려면 아래와 같이 이미지 위치를 상어 사미 이미지에 대한 링크로 바꾸어 보십시오.
<img src="https://html.sammy-codes.com/images/small-profile.jpeg">
파일을 저장하고 브라우저에서 다시 로드합니다.이 그림은 웹 문서에 불러와야 하지만, 이 그림은 로컬 프로젝트 디렉터리가 아닌 온라인 위치에서 가져옵니다.위치 링크를 <img> 태그의 index.html 속성으로 사용하여 다른 온라인 이미지를 추가할 수 있습니다.
그러나 사이트를 만들 때, 일반적으로 사용자의 이미지를 프로젝트 디렉터리에 저장하여 사이트의 지속성을 확보하는 것이 가장 좋다.이미지가 호스트에서 삭제되거나 주소가 변경되면 사이트에서 더 이상 나타나지 않습니다.

액세스 가능한 대체 텍스트


이미지를 추가할 때는 항상 src 속성을 사용하여 내용을 설명하는 선택적 텍스트를 포함해야 합니다.이 텍스트는 일반적으로 웹 페이지에 표시되지 않지만, 화면 판독기는 시력이 손상된 웹 사이트 방문자에게 내용을 전달한다.
<img src="https://html.sammy-codes.com/images/small-profile.jpeg" alt="Digital Ocean’s mascot, a blue smiling shark." >
대체 텍스트를 추가할 때 다음 Best Practice를 기억하십시오.

  • 정보가 풍부한 이미지에 대해 대체 텍스트는 이미지 자체와 관련되지 않고 이미지의 주제를 명확하고 간결하게 묘사해야 한다.예를 들어'상어 사미의 이미지, 디지털 해양의 마스코트'라고 쓰지 말고'상어 사미, 디지털 해양의 마스코트'라고 쓴다.

  • 장식적인 이미지의 경우 <img> 속성을 사용해야 하지만 빈 값을 사용해야 합니다. 이렇게 하면 화면 판독기의 체험을 개선할 수 있기 때문입니다: alt.

  • 이미지가 정보적인지 장식적인지 확인하는 데 유용한 안내서https://www.w3.org/WAI/tutorials/images/decision-tree/
  • 이제 HTML 문서에 이미지를 추가하는 방법과 액세스 가능성을 돕기 위해 대체 텍스트를 추가하는 방법을 익혀야 합니다.우리는 이 시리즈의 뒷부분 강좌 How To Add a Profile Image To Your Webpage 에서 이미지 크기와 스타일을 어떻게 바꾸는지 배울 것이다.다음 강좌에서는 HTML 문서에 링크를 추가하는 방법을 학습합니다.