HTML 이미지
HTML을 사용하면 문서에 이미지를 표시할 수 있습니다.
예제
- 이미지 삽입
- 이 예제는 웹 페이지에 이미지를 표시하는 방법을 보여줍니다.
- 다른 위치에서 이미지를 삽입하다
- 이 예제는 다른 폴더나 서버의 이미지를 웹 페이지에 표시하는 방법을 보여줍니다.
이미지 태그（<img>）와 원소 속성（Src）
HTML에서 이미지는 <img> 태그로 정의됩니다.
<img>는 빈 태그입니다. 이는 태그에만 속성이 있고 닫는 태그가 없다는 의미입니다.
이미지를 페이지에 표시하려면, 원소 속성（src）을 사용해야 합니다. src는 "source"을 의미합니다. 원소 속성의 값은 이미지의 URL 주소입니다.
이미지를 정의하는 문법은 다음과 같습니다：
<img src="url" />
URL은 이미지가 저장된 위치를 나타냅니다. "boat.gif"라는 이름의 이미지가 www.codew3c.com의 images 디렉토리에 위치하면, 그 URL은 http://www.codew3c.com/images/boat.gif입니다.
브라우저는 이미지를 문서에서 이미지 태그가 있는 곳에 표시합니다. 만약 이미지 태그를 두 개의 구절 사이에 두면, 브라우저는 먼저 첫 번째 구절을 표시한 후 이미지를 표시하고 마지막으로 두 번째 구절을 표시합니다.
텍스트 속성（Alt）를 대체합니다
alt 속성은 이미지에 대체 텍스트를 정의하는 데 사용됩니다. 대체 텍스트 속성의 값은 사용자가 정의합니다.
<img src="boat.gif" alt="Big Boat">
브라우저가 이미지를 로드하지 못할 때, 대체 텍스트 속성은 독자에게 잃어버린 정보를 알립니다. 이 경우, 브라우저는 대체 텍스트를 표시합니다. 페이지에 모든 이미지에 대체 텍스트 속성을 추가하는 것은 좋은 습관입니다. 이는 정보를 더 잘 표시하는 데 도움이 되며, 텍스트 브라우저를 사용하는 사람들에게 매우 유용합니다。
기본적인 고려사항 - 유용한 팁:
HTML 파일에 10개의 이미지가 포함되어 있다면, 이 페이지를 올바르게 표시하기 위해 11개의 파일을 로드해야 합니다. 이미지를 로드하는 것은 시간이 걸립니다. 따라서 우리의 조언은 이미지를 신중하게 사용하는 것입니다。
더 많은 예제
- 배경 이미지
- 이 예제에서는 HTML 페이지에 배경 이미지를 추가하는 방법을 보여줍니다。
- 이미지 정렬
- 이 예제에서는 텍스트 속에 이미지를 정렬하는 방법을 보여줍니다。
- 浮动 이미지
- 이 예제에서는 이미지를 문단의 왼쪽이나 오른쪽으로 float하는 방법을 보여줍니다。
- 이미지 크기 조정
- 이 예제에서는 이미지를 다른 크기로 조정하는 방법을 보여줍니다。
- 이미지에 대체 텍스트 표시
- 이 예제에서는 이미지에 대체 텍스트를 표시하는 방법을 보여줍니다. 이미지가 로드되지 않을 때, 대체 텍스트 속성은 독자에게 잃어버린 정보를 알립니다. 페이지에 모든 이미지에 대체 텍스트 속성을 추가하는 것은 좋은 습관입니다。
- 이미지 링크 제작
- 이 예제에서는 이미지를 링크로 사용하는 방법을 보여줍니다。
- 이미지 맵 생성
- 이 예제에서는 클릭 가능한 영역을 가진 이미지 맵을 생성하는 방법을 보여줍니다. 각 영역은 슈퍼 링크입니다。
- 이미지를 이미지 맵으로 변환
- 이 예제에서는 일반 이미지를 이미지 맵으로 설정하는 방법을 보여줍니다。
