HTML IMG tag 사용법 : 그림 이미지 크기 조절 방법, 좌우 가운데 정렬 방법, 여백 설정 방법, 기타 속성 설정 하기

웹페지에 HTML <Img> 태그로 그림 이미지를 넣을 때, 이미지 좌우 정렬, 이미지 크기 조절, 이미지 여백을 조절하게 됩니다. 방법은 스타일(style) 속성을 주면 간단하게 할 수 있습니다.


1. 그림 이미지 넣기

기본 태그 모양
<img src="여기에 이미지 주소(URL)를 적으면 됩니다." />

실제 예
<img src="https://1.bp.blogspot.com/pink-rose-250x250.png" />



참고: 태그 끝에 빨강색으로 표시한 / 는 <img ~~ 태그를 마무리 하는 것입니다. / 가 없어도 대부분 무리없이 작동을 하지만, / 가 없으면 오류가 나는 경우도 있습니다. 특별한 사정이 없다면, 태그 규칙에 맞게 / 를 넣어 주는 것이 더 낫지 싶습니다.
참고: <img src = ~~ 에서, img는 image [이미지]의 약칭이고, src는 source [소스]의 약칭입니다.




2. 이미지 크기 조절 하기

위에서와 같이 이미지를 불러 오면, 원래의 크기대로 표시가 됩니다. 페이지에 잘 어울리도록 이미지 크기를 조절하려면, 아래와 같이 스타일(style) 속성에서 너비(width)와 높이(height)를 지정해 주면 됩니다.

태그 모양
<img
src="이미지URL"
style="width:100px; height:100px;"
/ >

실제 예
<img
src="https://1.bp.blogspot.com/pink-rose-250x250.png"
style="width:100px; height:100px;"
/ >



참고: 위와 같이 하면, 페이지에 불려지는 이미지는 원래 크기 그대로 이지만, 방문자가 보는 페이지에서는 속성에서 지정한 크기로 표시됩니다. 이미지 크기는 페이지 로딩 속도에 미치는 영향이 상대적으로 크다 할 수 있습니다. 그러므로, 이미지를 필요 이상의 크기로 만들고, 그것을 줄여서 표시되도록 하기 보다는, 애초에 적절한 크기의 이미지를 만드는 것이 더 좋을 것 같습니다.

참고: 너비와 높이 단위는 px pt em % 등으로 하면 됩니다. px과 pt는 고정된 수치이고, em과 %는 상대적인 가변 수치입니다.  HTML 수치 단위에 대한 설명은 링크 페이지에 있습니다. HTML 단위: 글자 등의 크기를 지정하는 수치 단위 : px, pt, %, em 차이점




3. 이미지 좌우 가운데 정렬 하기

<img> 태그로 그림 이미지를 넣으면, 기본적으로 왼쪽에 위치하게 됩니다. 페이지 상황에 따라, 이미지를 왼쪽 오른쪽으로 정렬할 필요가 있을 때에는, 아래와 같이 스타일(style) 속성에서 float 를 left (왼쪽 정렬) 또는 right (오른쪽 정렬)로 지정하여 주면 됩니다.

1) 태그 모양 (이미지를 왼쪽으로 정렬): float: left;
<img
src="이미지URL"
style="float: left; width:100px; height:100px;"
/ >

실제 예 : 태그 모양 (이미지를 왼쪽으로 정렬): float: left;
<img
src="https://1.bp.blogspot.com/pink-rose-250x250.png"
style="float: left; width:100px; height:100px;"
/ >




2) 태그 모양 (이미지를 오른쪽으로 정렬): float: right;
<img
src="이미지URL"
style="float: right; width:100px; height:100px;"
/ >

실제 예: 태그 모양 (이미지를 오른쪽으로 정렬): float: right;
<img
src="https://1.bp.blogspot.com/pink-rose-250x250.png"
style="float: right; width:100px; height:100px;"
/ >




3) 태그 모양 (이미지를 가운데 정렬): display: block; margin: 0 auto;
<img
src="이미지URL"
style="display: block; margin: 0 auto; width:100px; height:100px;"
/ >

실제 예: 태그 모양 (이미지를 가운데 정렬): display: block; margin: 0 auto;
<img
src="https://1.bp.blogspot.com/pink-rose-250x250.png"
style="display: block; margin: 0 auto; width:100px; height:100px;"
/ >



참고: 위 예에서는 마진(margin)을 margin: 0 auto; 로 하였읍니다. 이렇게 하면, 이미지의 위쪽과 아래쪽 여백은 영(0)이 됩니다.
ㅇ 이미지의 위쪽 아래쪽 여백을 영(0)으로 하지 않으려면, margin: 0 auto; 대신에, margin-left: auto, margin-right: auto; 로 하면 됩니다.
ㅇ 이미지의 위쪽 아래쪽 여백을 설정하려면, margin: 20px auto 20px auto; 와 같이 위쪽 아래쪽 여백에 수치를 지정하면 됩니다. 마진의 여백 수치 순서는 margin: 위쪽 오른쪽 아래쪽 왼쪽 여백 순서입니다.

참고: 위 예에서, display: block; 속성을 준 것은, 이미지를 하나의 블록(영역)으로 잡아주기 위한 것입니다. 바꾸어 말하자면, 이미지를 하나의 독립적인 블록으로 잡아 주고, 좌우의 여백(margin)을 자동(auto)으로 설정해 줌으로써, 좌우 여백이 동일하게 되고, 결과적으로 이미지가 블록의 가운데에 위치하게 됩니다.




3-1. 이미지 좌우 정렬과 여백 설정 하기

이미지 정렬에 float 속성을 주면, 이미지 아래쪽에 있는 내용이 이미지 옆의 빈공간으로 딸려 올라가게 됩니다. 그리고 이미지의 기본 여백은 영(0)입니다. 그러므로, 이미지와 내용 사이에 여백을 설정해 주는 것이 보기에 더 나은 경우가 많습니다. 이미지 경계를 기준으로 바깥쪽 여백은 마진(margin) 속성으로, 그리고 안쪽 여백은 패딩(padding) 속성으로 주면 됩니다.


1) 태그 모양 (이미지 왼쪽 정렬 + 오른쪽과 아래쪽에 여백을 설정함)
<img
src="이미지URL"
style="float: left;  margin-right: 20px; margin-bottom: 10px; width:100px; height:100px;"
/ >

실제 예: 이미지 왼쪽 정렬 + 오른쪽과 아래쪽에 여백 설정함
<img
src="https://1.bp.blogspot.com/pink-rose-250x250.png"
style="float: left;  margin-right: 20px; margin-bottom: 10px;  width:100px; height:100px;"
/ >

이 부분은 의미가 없으므로 읽지 마세요. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다.

이 부분은 의미가 없으므로 읽지 마세요. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다.


2) 태그 모양 (이미지 오른쪽 정렬 + 왼쪽과 아래쪽에 여백을 설정함)
<img
src="이미지URL"
style="float: right;  margin-left: 20px; margin-bottom: 10px; width:100px; height:100px;"
/ >

실제 예: 이미지 오른쪽 정렬 + 왼쪽과 아래쪽에 여백 설정함
<img
src="https://1.bp.blogspot.com/pink-rose-250x250.png"
style="float: right;  margin-left: 20px; margin-bottom: 10px;  width:100px; height:100px;"
/ >

이 부분은 의미가 없으므로 읽지 마세요. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다.

이 부분은 의미가 없으므로 읽지 마세요. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다.




3-2. 아래쪽 내용이 따라 올라오지 않도록 하기

위에서 보듯이, float 로 이미지를 좌우 정렬하면, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가게 됩니다. 이미지는 왼쪽 또는 오른 쪽에 정렬을 하되, 아래쪽 내용이 따라 올라가지 않도록 하는 방법은 몇 가지를 생각해 볼 수 있겠습니다. 아래의 예는 <div> 태그에 clear: both; 속성을 설정한 것입니다.

태그 모양 (이미지 왼쪽 정렬 + 아래쪽 내용 따라 올라오지 않게: clear: both;)
<img
src="이미지URL"
style="float: left;  width:100px; height:100px;"
/ >
<div style="clear: both;"></div>

실제 예: 이미지 왼쪽 정렬 + 아래쪽 내용이 따라 올라가지 않게 함: clear: both;
<img
src="https://1.bp.blogspot.com/pink-rose-250x250.png"
style="float: left; clear:both; width:100px; height:100px;"
/ >
<div style="clear: both;"></div> 

이 부분은 의미가 없으므로 읽지 마세요. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다.


이 부분은 의미가 없으므로 읽지 마세요. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다.

참고: 예에서 보듯이, <div> 태그는 영역을 나누되 기본 여백이 영(0)이므로, 이미지와 그 아래쪽 내용 사이에 여백 없이 딱 붙게 됩니다. <div style="clear: both; margin-bottom: 20px; "></div> 와 같이, 마진(margin)을 지정해 주거나, 줄바꿈을 하는 <br /> 태그를 넣거나... 상황에 알맞게 여백을 조절하면 되겠습니다.




4. 기타 이미지 속성 설정하기

<img 태그에는 위에서 본 속성 밖에, 이미지의 테두리 속성을 지정하는 border,  이미지에 대한 설명을 보여주는 alt 등이 있습니다.

<img
src="이미지 주소 URL"
style="여백, 정렬, 너비, 높이 등 속성 지정"
border="이미지 테두리 속성 지정"
alt="이미지 설명 문구 지정" >

참고: 테두리 (border)의 종류와 특성에 대한 설명은 링크 페이지에 있습니다.
>> HTML DIV tag - 테두리 그리기 STYLE - BORDER
>> HTML HR tag : 가로줄 넣기와 굵기 색상 정렬 등 속성 지정하는 방법
>> 테두리선 종류 - BORDER LINE TYPE : solid, dotted, dashed, double, groove, inset, outset, ridge




5. 클래스(class)로 이미지 속성 일괄 적용하기

특정한 이미지 하나에만 속성을 주어 꾸밀 때는 위와 같이 스타일(style) 속성을 사용하면 편합니다. 그러나, 여러개의 이미지에 동일한 속성을 일괄적으로 적용하여야 하는 경우라면, 아래와 같이 클래스(class)를 이용하면, 적용하기도 쉽고, 수정하기도 쉽습니다.

태그 모양
<style type="text/css">
.myimage {
이미지에 적용할 정렬방식, 이미지 너비와 높이, 이미지 테두리, 여백 등 속성을 지정함.
}
</style>

<img class="myimage" src="1번 이미지 URL" />

<img class="myimage" src="2번이미지 URL" />

<img class="myimage" src="3번 이미지 URL" />

................

참고: 위의 .myimage에서, 앞의 점(.)은 클래스(class) 이름임을 표시하는 것입니다. 클래스 이름 myimage는 기억하기 편하고 사용하기 쉽게 임의로 붙이면 됩니다. 다만, 같은 이름이 중복되어서는 안됩니다.

클래스를 활용하는 실제 예: 
<style type="text/css">
.myimage {
float: right;
width: 150px; height: 150px;
margin-left: 20px; margin-bottom: 20px;
border: 5px double #87C540;
}
</style>

<img class="myimage" src="https://1.bp.blogspot.com/pink-rose-250x250.png" />

<img class="myimage" src="2번이미지 URL" />

<img class="myimage" src="3번 이미지 URL" />

................

이 부분은 의미가 없으므로 읽지 마세요. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다.이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다.이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다.

참고: 위 예에서는 이미지를 하나만 넣었지만, 이미지를 여러개 넣으면, 모두 같은 설정이 적용 됩니다.

>> HTML IMG tag: 이미지 테두리 둥글게 하기 (border-radius)
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...