html에서 이미지 크기를 적당히 조정하는 방법

width와 height 속성 사용하기

HTML에서 이미지를 삽입할 때, 태그를 사용합니다. 이때 width와 height 속성을 사용하여 이미지의 크기를 조정할 수 있습니다.

예를 들어, 다음과 같이 width와 height 속성에 값을 지정하여 이미지 크기를 조정할 수 있습니다.

<img src="image.jpg" width="500" height="300">

위 코드에서는 이미지의 가로 길이를 500px, 세로 길이를 300px로 지정하여 이미지의 크기를 조정하였습니다.

CSS를 사용하기

또 다른 방법은 CSS를 사용하여 이미지 크기를 조정하는 것입니다.

예를 들어, 다음과 같이 CSS를 사용하여 이미지의 크기를 조정할 수 있습니다.

<img src="image.jpg" style="width: 50%; height: auto;">

위 코드에서는 style 속성을 사용하여 width 속성을 50%로 지정하고, height 속성은 자동으로 조정하도록 하였습니다. 이렇게 하면 이미지의 가로 길이를 부모 요소의 50%로, 세로 길이는 가로 길이에 맞게 자동으로 조정됩니다.

Bootstrap 등 프레임워크를 사용하기

마지막으로, Bootstrap 등의 CSS 프레임워크를 사용하여 이미지 크기를 조정할 수도 있습니다.

예를 들어, 다음과 같이 Bootstrap의 img-fluid 클래스를 사용하여 이미지의 크기를 조정할 수 있습니다.

<img src="image.jpg" class="img-fluid">

위 코드에서는 img-fluid 클래스를 사용하여 이미지가 부모 요소에 맞게 조정되도록 하였습니다. 이렇게 하면 모바일 기기에서도 이미지가 잘 보이도록 할 수 있습니다.