HTML 이미지 가로 사이즈와 세로 사이즈 조절하는 법 

HTML은 웹 페이지를 만드는 데 중요한 마크업 언어이며, 이미지는 웹 페이지에서 시각적인 콘텐츠를 제공하는 데 필수적입니다. 이 글에서는 HTML 이미지의 가로와 세로 사이즈를 조절하는 방법에 대해 알아보겠습니다. 

HTML 이미지 태그

웹 페이지에 이미지를 삽입하려면 <img> 태그를 사용합니다. <img> 태그는 자체적으로 닫히는 태그로, src 속성을 통해 이미지 파일의 경로를 지정합니다.

가로 사이즈 조절

이미지의 가로 크기를 조절하려면 <img> 태그에 width 속성을 사용합니다. 예를 들어, 가로 크기를 300픽셀로 조절하고 싶다면 다음과 같이 작성합니다:

비율 유지

이미지의 비율을 유지하면서 가로 크기를 조절하려면 height 속성을 지정하지 않고 width 속성만 사용합니다. 이렇게 하면 원본 이미지의 비율을 유지하면서 가로 크기가 조절됩니다.

세로 사이즈 조절

이미지의 세로 크기를 조절하려면 <img> 태그에 height 속성을 사용합니다. 예를 들어, 세로 크기를 200픽셀로 조절하고 싶다면 다음과 같이 작성합니다:​

비율 유지

이미지의 비율을 유지하면서 세로 크기를 조절하려면 width 속성을 지정하지 않고 height 속성만 사용합니다. 이렇게 하면 원본 이미지의 비율을 유지하면서 세로 크기가 조절됩니다.

가로 세로 사이즈 동시 조절

width와 height 속성을 동시에 사용하여 이미지의 가로와 세로 크기를 조절할 수 있습니다. 하지만 원본 이미지의 비율이 깨질 수 있으므로 주의가 필요합니다.

Proportional 이미지 조절

HTML에서는 width와 height 속성을 같이 사용하는 대신, CSS 스타일 속성인 max-width와 max-height를 함께 사용하여 이미지를 비율에 맞게 조절할 수도 있습니다.​ 

자동 크기 조절

width와 height 속성을 모두 지정하지 않으면 원본 이미지의 크기 그대로 출력됩니다. 이는 이미지가 원본 크기를 유지하는 것이 중요한 경우에 유용합니다.

결론

워드프레스에서 자주 사용하며, 티스토리에도 가끔 사용하긴 합니다. 이미지는 다음과 같은 width와 height를 통해서,

조절 할 수 있습니다. 주로 많이 쓰이기 때문에 참고하시면 좋습니다.