컴퓨터 엑셀 워드 포토숍 구글어스 WINDOWS JAVASCRIPT JAVA C++

 
Previous Post 울트라에디트, 파일 정렬(소팅), 텍스트 소트 방법; Text File Sorting Ul...도스(DOS)에서, 연월일(년월일)/시분초, 현재 날짜 구하기; get Date Time도스로 빠져 나가기, 윈도우에서 도스로; How To Exit To DOS배치파일] 랜덤 숫자 발생, 1~10 난수 생성; Random Number Batch Fi...엑셀/VBA] 배열 선언 초기화; VB ARRAY Initialize ExamplePerl/펄] 프랑스어 숫자 읽기, 서수로 세기; Number to French Spell...자바/Java] 한글 자소 분리 + 유니코드(UTF-8) 파일로 읽고 쓰기 버전; hang...배치파일] 요일 출력, 오늘 현재 요일만 구하기; Get DAY OF THE WEEK St...배치파일] 요일 삭제, 날짜 문자열에서 요일 지우기; Remove DAY OF THE WE...배치파일/Batch File] args / argc, argv 파라미터(인수; 매개변수) ...

HTML] 웹 이미지(사진, 그림) 크기 변경/조정, 사진 사이즈 축소 태그 속성; Image Size

Friday, December 15, 2006

그림/사진의 크기 조정은, 포토샵에서 그림 자체의 크기를 변경하는 것이 가장 좋지만, 여기서는 HTML 태그 속성을 사용하여, 임시로 이미지 사이즈를 조정하는 방법을 설명합니다.

웹페이지에서, 그림/사진 등 이미지의, 가로 세로 길이를 변경하려면

<img src="그림 주소" width="가로 길이" height="세로 길이" alt="그림 설명" />


이렇게 width / height 속성을 사용하면 됩니다.



이미지 사이즈 변경 예제


사과
원본 크기 이미지
위의 원본 사과 사진은

가로 길이 (width) : 350 픽셀

세로 길이 (height) : 500 픽셀

입니다.




사과
<img src="http://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="http://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


☞ HTML/CSS/자바스크립트(JavaScript)

2 Comments:
At 10:43 AM, Blogger mwultong said...

블로그 닷컴에서는, 그림의 기본 가로 길이가 400 픽셀이기에,
width="400"
으로 지정하시면 잘 될 것입니다. 포스트를 업데이트했습니다.

퍼센트 단위로는 잘 안되더군요. 퍼센트는 상대적인 크기라서, 브라우저 상태에 따라 그림이 일그러지게 됩니다.

(∩_∩)

 
At 4:12 PM, Anonymous gurumaru said...

제 블로그에 남겨주신 코멘트에 연관된 부분이군요. ^^

혹시 % 단위로 가로 세로를 일정하게 확대, 축소 하는 방법은 없을까요?

(새 블로거 버전에서는, 한글 아이디 글자가 깨져서, 다시 올립니다.)

 

Post a Comment

<< Home RSS 2.0 feed

구글 Google 에서 제공하는 무료 블로그 서비스인 블로거 Blogger 의 인터넷 주소는 www.blogger.com 입니다. Blogger 에 블로그를 만들면, blogspot.com 이라는 주소에 블로그가 생성됩니다.
블로그를 직접 방문하지 않고도 최신 게시물을 구독하려면 RSS 2.0 feed 주소를 리더기에 등록하시면 됩니다.
Categories
Previous Posts
Monthly Archives
Top