[HTML] HTML에서 이미지 다루기

HTML에서 이미지 다루기

HTML에서 이미지를 삽입하고 관리하는 방법은 다양합니다. 가장 기본적인 방법은 <img> 태그를 사용하는 것입니다.

기본 이미지 삽입

<img> 태그는 src 속성을 통해 이미지 파일의 경로를 지정합니다. 다음은 간단한 예시입니다.

<img src="example.jpg" alt="예시 이미지">

alt 속성

alt 속성은 이미지가 로드되지 않았을 때 나타낼 대체 텍스트를 설정합니다. 이 속성은 웹 접근성을 높이는 데도 중요합니다.

<img src="example.jpg" alt="산과 하늘">

이미지 크기 지정

width와 height 속성을 사용하여 이미지의 크기를 지정할 수 있습니다.

<img src="example.jpg" alt="예시 이미지" width="300" height="200">

이미지 링크

이미지를 클릭하면 다른 페이지로 이동하게 만들고 싶다면, <a> 태그로 <img> 태그를 감싸면 됩니다.

<a href="https://www.example.com">
  <img src="example.jpg" alt="예시 이미지">
</a>

이미지에 타이틀 추가

title 속성을 사용하여 이미지에 마우스를 올렸을 때 나타나는 텍스트를 설정할 수 있습니다.

<img src="example.jpg" alt="예시 이미지" title="이것은 예시 이미지입니다.">

이미지 정렬

CSS를 이용하여 이미지를 정렬할 수 있습니다. 예를 들어, 이미지를 가운데 정렬하려면 다음과 같이 스타일을 적용할 수 있습니다.

<style>
  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
</style>

<img src="example.jpg" alt="예시 이미지" class="center">

반응형 이미지

반응형 웹 디자인에서는 이미지도 화면 크기에 따라 적절히 조절되어야 합니다. 이를 위해 max-width 속성을 100%로 설정할 수 있습니다.

<style>
  img {
    max-width: 100%;
    height: auto;
  }
</style>

<img src="example.jpg" alt="예시 이미지">

이미지는 웹 페이지를 더 풍부하고 정보 전달에 효과적이게 만드는 중요한 요소입니다. <img> 태그와 다양한 속성을 활용하여 웹 페이지에 이미지를 적절히 배치하면, 사용자 경험을 크게 향상할 수 있습니다.