HTML 태그는 웹페이지에 이미지를 추가합니다. src 속성을 사용하여 침대에 눕히려는 이미지의 위치를 지정합니다. alt 속성은 이미지를 로드할 수 없는 경우 이미지 대신 텍스트를 표시하는 데 자주 사용됩니다.
웹이 처음 발명되었을 때 웹 페이지는 텍스트만 표시할 수 있었습니다. 그러나 웹 페이지에 이미지를 추가하는 기능은 빠르게 추가되었습니다. 그 이후로 이미지는 웹상의 대부분의 페이지에서 중요한 부분이 되었습니다. 로고에서 사진에 이르기까지 이미지는 인터넷 어디에나 있습니다.
이 튜토리얼에서는 웹 개발자로서 HTML 이미지와 함께 작동하는 태그. 또한
에서 사용할 수 있는 몇 가지 주요 속성에 대해서도 설명합니다. 태그.
HTML 이미지 태그
HTML 태그는 웹 문서에 이미지를 추가합니다. src 속성을 사용하여 포함하려는 이미지의 위치를 지정합니다. 이것은 컴퓨터에 있는 파일이거나 다른 파일에 대한 URL일 수 있습니다. alt 속성을 사용하면 이미지를 로드할 수 없는 경우 표시되는 대체 텍스트를 지정할 수 있습니다.
HTML 구문은 다음과 같습니다. 태그:
태그에 닫는 태그가 없습니다. 대신 태그는 "/>"로 끝납니다. 이는
태그에는 별도의 닫는 태그가 필요하지 않습니다.
태그는 모든 브라우저에서 지원됩니다.
HTML은 HTML 파일을 저장하는 폴더가 참조하는 이미지를 저장하는 폴더와 동일하다고 가정합니다. 이 동작은 이미지를 찾을 수 있는 정확한 파일 경로 또는 URL을 지정하여 무시할 수 있습니다.
위 구문에서 house.png. 파일을 참조합니다. 이 파일은 우리가 작업하고 있는 HTML 파일과 같은 폴더에 있습니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
그러나 이미지 파일을 다른 폴더(예:사진)에 저장하는 경우 다음 코드를 사용합니다.
외부 소스의 이미지를 포함하려면 절대 URL을 사용할 수 있습니다. 다음은 의 예입니다. 외부 이미지를 참조하는 태그:
즉, 일반적으로 가능하면 로컬 파일에서 이미지를 참조하는 것이 가장 좋습니다. 외부 이미지를 참조하면 브라우저가 로컬 파일에서 이미지를 검색할 때보다 더 많은 작업을 수행하기 때문입니다.
HTML 이미지 예
HTML 의 예를 살펴보겠습니다. 태그가 실행 중입니다. 지역 커피 하우스인 Golden Roast의 웹사이트를 구축한다고 가정해 보겠습니다. Golden Roast는 홈페이지에 커피 한 잔의 이미지를 표시하기를 원합니다.
그들이 우리에게 웹 페이지에 추가하기 위해 준 파일은 coffee.png입니다. HTML 페이지를 저장하는 폴더에는 이 이미지도 저장됩니다. 이 이미지를 사이트에 추가하려면 다음 코드를 사용할 수 있습니다.
골든 로스트
코드 반환:
코드를 분해해 보겠습니다. 먼저 를 사용했습니다. 웹 페이지의 주요 요소를 저장하는 태그입니다. 그런 다음 을 사용했습니다. 태그를 사용하여 페이지의 제목을 정의합니다. 이 제목의 텍스트는 다음과 같습니다. Golden Roast.
다음 줄에서 우리는 img 요소를 사용하여 coffee.png라는 이미지를 코드에 추가했습니다. 이 이미지는 HTML 파일과 동일한 폴더에 포함되어 있습니다. 결과적으로 src 속성을 사용하여 폴더를 가리킬 필요가 없었습니다. 방금 파일 이름을 지정했습니다.
이미지 HTML:대체 텍스트
대체 텍스트를 추가하는 것은 HTML에서 이미지 작업의 중요한 부분입니다. alt 속성으로 표시되는 대체 텍스트 , 이미지에 대한 텍스트 설명입니다.
이미지로 작업할 때 alt 속성을 지정해야 하는 여러 가지 이유가 있습니다. 대체 텍스트:
- 의도했지만 존재하지 않는 이미지를 설명합니다. . 대체 텍스트는 이미지를 찾을 수 없는 경우에 유용합니다. 예를 들어 지정한 폴더에 해당 파일이 없기 때문입니다.
- 의도했지만 천천히 로드되는 이미지를 설명합니다. . 웹 페이지 방문자의 연결 속도가 느린 경우 이미지 로드가 지연될 수 있습니다.
- 접근성 향상 . 방문자가 스크린 리더를 사용하는 경우 대체 텍스트를 사용하면 이미지에 대한 설명을 들을 수 있습니다.
대체 텍스트는 어떤 이유로든 이미지를 렌더링할 수 없는 경우 웹 페이지에서 사용자에게 여전히 일부 텍스트를 표시하도록 합니다. 대체 텍스트를 지정하지 않은 상태에서 이미지가 깨지면 깨진 이미지 아이콘이 나타납니다.
HTML 대체 텍스트 예
위의 커피 하우스 예에서 이미지에 alt 속성을 추가한다고 가정합니다. 지정하려는 대체 텍스트는 밝은 갈색 나무 테이블 위의 커피 콩으로 둘러싸인 커피 로스팅입니다. 다음 코드를 사용하여 이 대체 텍스트를 추가할 수 있습니다.
골든 로스트
이제 누군가가 우리의 coffee.png 파일을 다른 폴더로 옮겼다고 가정합니다. 결과적으로 웹 페이지에서 더 이상 파일을 찾을 수 없습니다. 그러면 이미지를 찾을 수 없기 때문에 대체 텍스트가 웹 페이지에 나타납니다. 다음은 이 경우 방문자가 당사 웹페이지에서 볼 수 있는 예입니다.
alt 속성을 추가할 때 간략하게 유지하고 이미지 자체를 설명하는 데 사용하십시오. 우리의 커피 예에서 우리는 커피의 이미지가 무엇을 담고 있는지 설명했습니다. 사용자에게 혼란을 줄 수 있으므로 페이지에 이미 있는 텍스트를 반복하고 싶지 않습니다.
HTML 이미지:제목
제목 속성을 사용하여 이미지에 대한 추가 정보를 제공할 수 있습니다. 제목 속성을 사용하면 사용자가 이미지 위로 마우스를 가져갈 때 표시되는 툴팁을 제공합니다.
제목 속성은 이미지에 툴팁을 추가하려는 경우 유용할 수 있습니다. 그러나 title 속성은 스크린 리더를 지원하지 않으며 모바일 장치(마우스가 없는 장치)에서는 표시되지 않습니다.
테이블 위의 커피 한 잔 값으로 제목 속성을 추가한다고 가정해 보겠습니다. 이전의 우리 이미지로. 이를 위해 다음 코드를 사용할 수 있습니다.
골든 로스트
커서로 이미지 위로 마우스를 가져가면 제목 태그의 내용이 나타납니다.
HTML 이미지 크기:너비 및 높이
이미지 너비와 높이 속성을 사용하여 이미지의 너비와 높이를 각각 지정할 수 있습니다.
커피 하우스의 예로 돌아가 보겠습니다. 커피 이미지가 너비 400픽셀, 길이 400픽셀이 되기를 원한다고 가정합니다. 이 이미지가 웹 페이지에서 너무 많은 공간을 차지하는 것을 원하지 않습니다. 다음 코드를 사용하여 이러한 매개변수를 지정할 수 있습니다.
골든 로스트
코드 반환:
보시다시피 이 예의 이미지는 이전 이미지보다 작습니다. 첫 번째 예에서 이미지는 500×500이었습니다. 이제 이미지는 400×400입니다. 높이와 너비 속성을 모두 지정하고 각각을 400으로 설정했기 때문입니다.
HTML 이미지:이미지 위치 지정
이미지로 작업할 때 이미지가 페이지의 왼쪽 또는 오른쪽에 떠 있도록 결정할 수 있습니다. 부동은 페이지에 있는 이미지의 수평 정렬(왼쪽 또는 오른쪽)을 나타냅니다. 여기에서 CSS float 속성이 사용됩니다.
이전의 커피 이미지가 페이지 오른쪽에 나타나길 원한다고 가정합니다. 다음 코드를 사용하여 이를 수행할 수 있습니다.
골든 로스트
코드 반환:
float:right;을 사용했습니다. 스타일 속성 내의 속성. 이렇게 하면 이미지가 페이지 오른쪽에 떠 있도록 지정할 수 있습니다.
결론
웹 페이지에 이미지를 배치하는 HTML 태그입니다. 이미지는 로컬 파일이나 폴더 또는 외부 소스에서 렌더링할 수 있습니다.
이 튜토리얼에서는
HTML의 태그. 또한 HTML
에서 제공하는 몇 가지 속성을 사용하는 방법에 대해서도 이야기했습니다. 꼬리표. 이제 전문가처럼 HTML에서 이미지를 사용하는 데 필요한 지식을 갖추었습니다!
HTML에 대해 더 알고 싶으십니까? 전문가 팁과 온라인 과정 및 학습 리소스 목록은 HTML 학습 방법 가이드를 확인하세요.