Friday, December 15, 2006
HTML : 웹 이미지(사진, 그림) 크기 변경/조정, 사진 사이즈 축소 태그 속성; Image Size
그림/사진의 크기 조정은, 포토샵에서 그림 자체의 크기를 변경하는 것이 가장 좋지만, 여기서는 HTML 태그 속성을 사용하여, 임시로 이미지 사이즈를 조정하는 방법을 설명합니다.
웹페이지에서, 그림/사진 등 이미지의, 가로 세로 길이를 변경하려면
옆으로스크롤가능
이렇게 width / height 속성을 사용하면 됩니다.
원본 크기 이미지
위의 원본 사과 사진은
가로 길이 (width) : 350 픽셀
세로 길이 (height) : 500 픽셀
입니다.
옆으로스크롤가능
width="175" height="250" 을 지정하여 절반으로 축소시킨 결과
원본의 절반 값인 175 와 250 을 지정하자, 사진 크기가 4분의1로 축소되었습니다.
옆으로스크롤가능
width="400" height="100" 값을 지정하여, 그림 늘이기
가로 세로 비율을 다르게 지정하면 위와 같이 그림이 왜곡됩니다. 의도적인 경우가 아닌 이상, 이런 식으로 지정하면 안됩니다.
width height 속성을 잘못 지정하면, 그림이 삐뚤어지기에 주의가 필요합니다.
그리고 어떤 경우든, width height 속성으로 이미지 사이즈를 조정하면 화질이 나빠지게 됩니다.
width height 속성은, 이미지 사이즈 조정 용도 외에도, 이미지의 정확한 크기를 브라우저에게 "미리 알려주는" 역할을 합니다.
브라우저는 이미지 파일을 완전히 읽었을 경우에만, 이미지 크기를 알 수 있습니다. 그렇지만 width height 속성을 사용하여 원본의 정확한 가로 세로 길이를 미리 알려주면, 이미지를 읽기 전에도 브라우저가 이미지 크기를 알 수 있어, 웹페이지를 바르게 출력하는 데에 도움이 됩니다. 다만 이때, 정확한 값을 지정하지 않으면 그림이 왜곡되고 화질이 나빠지기에 주의가 필요합니다.
업데이트:
다음과 같이
가로 길이만 지정하면, 세로 길이는 일정한 비율로 자동으로 조절됩니다.
포토샵으로 사진 사이즈를 축소하는 방법입니다: ▶▶ 포토샵] 사진 사이즈 축소 크기 조절; 이미지 사이즈 조정 변경; Image Size Photoshop
웹페이지에서, 그림/사진 등 이미지의, 가로 세로 길이를 변경하려면
옆으로스크롤가능
<img src="그림 주소" width="가로 길이" height="세로 길이" alt="그림 설명" />
이렇게 width / height 속성을 사용하면 됩니다.
이미지 사이즈 변경 예제
원본 크기 이미지
위의 원본 사과 사진은
가로 길이 (width) : 350 픽셀
세로 길이 (height) : 500 픽셀
입니다.
옆으로스크롤가능
<img src="https://photos1.blogger.com/blogger/2921/1916/1600/photoshop_apples.jpg" width="175" height="250" alt="사과" />
width="175" height="250" 을 지정하여 절반으로 축소시킨 결과
원본의 절반 값인 175 와 250 을 지정하자, 사진 크기가 4분의1로 축소되었습니다.
옆으로스크롤가능
<img src="https://photos1.blogger.com/blogger/2921/1916/1600/photoshop_apples.jpg" width="400" height="100" alt="사과" />
width="400" height="100" 값을 지정하여, 그림 늘이기
가로 세로 비율을 다르게 지정하면 위와 같이 그림이 왜곡됩니다. 의도적인 경우가 아닌 이상, 이런 식으로 지정하면 안됩니다.
width height 속성을 잘못 지정하면, 그림이 삐뚤어지기에 주의가 필요합니다.
그리고 어떤 경우든, width height 속성으로 이미지 사이즈를 조정하면 화질이 나빠지게 됩니다.
width height 속성은, 이미지 사이즈 조정 용도 외에도, 이미지의 정확한 크기를 브라우저에게 "미리 알려주는" 역할을 합니다.
브라우저는 이미지 파일을 완전히 읽었을 경우에만, 이미지 크기를 알 수 있습니다. 그렇지만 width height 속성을 사용하여 원본의 정확한 가로 세로 길이를 미리 알려주면, 이미지를 읽기 전에도 브라우저가 이미지 크기를 알 수 있어, 웹페이지를 바르게 출력하는 데에 도움이 됩니다. 다만 이때, 정확한 값을 지정하지 않으면 그림이 왜곡되고 화질이 나빠지기에 주의가 필요합니다.
업데이트:
다음과 같이
<img src="그림 주소" width="400" alt="사과" />
가로 길이만 지정하면, 세로 길이는 일정한 비율로 자동으로 조절됩니다.
포토샵으로 사진 사이즈를 축소하는 방법입니다: ▶▶ 포토샵] 사진 사이즈 축소 크기 조절; 이미지 사이즈 조정 변경; Image Size Photoshop
tag: html
HTML | CSS | 자바스크립트 JavaScript
블로그 닷컴에서는, 그림의 기본 가로 길이가 400 픽셀이기에,
width="400"
으로 지정하시면 잘 될 것입니다. 포스트를 업데이트했습니다.
퍼센트 단위로는 잘 안되더군요. 퍼센트는 상대적인 크기라서, 브라우저 상태에 따라 그림이 일그러지게 됩니다.
(∩_∩)
제 블로그에 남겨주신 코멘트에 연관된 부분이군요. ^^
혹시 % 단위로 가로 세로를 일정하게 확대, 축소 하는 방법은 없을까요?
(새 블로거 버전에서는, 한글 아이디 글자가 깨져서, 다시 올립니다.)
<< Home