이미지 표시의 기본: <img> 태그 완벽 가이드
웹 페이지에 이미지를 삽입하는 것은 콘텐츠를 풍부하게 만들고 사용자 경험을 향상시키는 데 필수적입니다. HTML에서 이미지를 표시하는 데 사용되는 <img> 태그와 핵심 속성들에 대해 자세히 알아보겠습니다.
<img> 태그란 무엇인가요?
<img> 태그는 HTML에서 이미지를 웹 페이지에 삽입하는 데 사용되는 태그입니다. 이 태그는 빈 태그로, 닫는 태그 없이 <img ... /> 형태로 사용됩니다.
<img> 태그를 사용하려면 이미지 파일의 위치를 지정하는 src 속성이 필수적으로 필요하며, 이미지에 대한 설명을 제공하는 alt 속성을 사용하는 것이 좋습니다.
핵심 속성: src, alt, width, height
<img> 태그의 주요 속성과 각 속성의 역할은 다음과 같습니다.
-
src<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVtG3UKuroCKglSlseW6KU4cMmuMH1OrbSw04D8znZ2RtdjUOvfjNPifU-yLOehQ224DSjWShClGvYPQZHaGuRdtMbxMojy9VqYICWV4kHn6J7bxuxrm2aEXdCEtl1mJGJeyoGhMYS6gKU3d4SxylvdU36CFfs-iWR8PJmg7RswJRv4593f8gK29IGUEJ7/s16000-rw/%ED%85%8C%EC%8A%AC%EB%9D%BC%20%EB%AA%A8%EB%8D%B83.png " />결과
-
alt(alternative text): 이미지를 표시할 수 없는 경우 대체 텍스트를 제공합니다. 시각 장애가 있는 사용자가 스크린 리더를 사용하여 웹 페이지를 탐색할 때 이미지에 대한 정보를 얻을 수 있도록alt속성을 사용하는 것이 중요합니다. 또한, 이미지 로딩에 실패했을 경우alt속성에 지정된 텍스트가 표시됩니다.<img src="https:\images\study.png " alt="나의 이미지 설명" />결과
-
width: 이미지의 너비를 픽셀 단위로 지정합니다.<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVtG3UKuroCKglSlseW6KU4cMmuMH1OrbSw04D8znZ2RtdjUOvfjNPifU-yLOehQ224DSjWShClGvYPQZHaGuRdtMbxMojy9VqYICWV4kHn6J7bxuxrm2aEXdCEtl1mJGJeyoGhMYS6gKU3d4SxylvdU36CFfs-iWR8PJmg7RswJRv4593f8gK29IGUEJ7/s16000-rw/%ED%85%8C%EC%8A%AC%EB%9D%BC%20%EB%AA%A8%EB%8D%B83.png " width="300" />결과
-
height: 이미지의 높이를 픽셀 단위로 지정합니다.<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVtG3UKuroCKglSlseW6KU4cMmuMH1OrbSw04D8znZ2RtdjUOvfjNPifU-yLOehQ224DSjWShClGvYPQZHaGuRdtMbxMojy9VqYICWV4kHn6J7bxuxrm2aEXdCEtl1mJGJeyoGhMYS6gKU3d4SxylvdU36CFfs-iWR8PJmg7RswJRv4593f8gK29IGUEJ7/s16000-rw/%ED%85%8C%EC%8A%AC%EB%9D%BC%20%EB%AA%A8%EB%8D%B83.png " height="200" />결과
예시로 이해하기
다음은 <img> 태그를 사용하여 이미지를 표시하는 예시입니다.
<!DOCTYPE html>
<html>
<head>
<title>이미지 표시 예제</title>
</head>
<body>
<h1>귀여운 고양이</h1>
<img src="https://images.pexels.com/photos/1170986/pexels-photo-1170986.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="귀여운 고양이 이미지" width="200" height="300" />
</body>
</html>
위 코드는 pexels.com에서 귀여운 고양이 이미지를 가져와 웹 페이지에 표시합니다. alt 속성은 "귀여운 고양이 이미지"로 설정되어 이미지를 볼 수 없는 경우 대체 텍스트를 제공합니다. width와 height 속성은 이미지의 크기를 200x300 픽셀로 설정합니다.
마무리
<img> 태그와 src, alt, width, height 속성을 사용하여 웹 페이지에 이미지를 효과적으로 표시할 수 있습니다. 이미지는 웹 콘텐츠를 더욱 풍부하고 매력적으로 만들어 주는 중요한 요소이므로, 이러한 속성들을 적절히 활용하여 웹 페이지의 품질을 향상시키세요.
SEO를 위한 팁: 이미지 파일 이름과 alt 속성에 관련 키워드를 포함시키면 검색 엔진 최적화에 도움이 됩니다.
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean.
댓글 없음:
댓글 쓰기