1.이미지 넣기

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

2.이미지 크기 조절

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

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

- 왼쪽정렬 < float: left; >

- 오른쪽 정렬 < float: right; >

- 가운데 정렬 < display: block; margin: 0 auto; >

<img src="이미지URL" style="display: block;
margin: 0 auto; width:100px; height:100px;" / >

4.이미지 좌우 정렬과 여백 설정 하기

바깥쪽 여백 = 마진(margin)

안쪽 여백은 = 패딩(padding)

<img src="이미지URL" style="float: left;
margin-right: 20px; margin-bottom: 10px;
width:100px; height:100px;" / >

img 태그에 넣을 수 있는 파일

• GIF : 색상만 지원함. 단순 이미지에 최적화됨
• JPG/JPEG : 수백가지 색상을 지원함. 사진에 최적화됨
• PNG : JPG보다 저용량에 수백가지 색상을 지원함

img 태그와 이용할 수 있는 속성

• border : 이미지 테두리 폭을 지정
• width : 사진 너비를 지정
• height : 사진 높이를 지정
• align : 사진 정렬
• alt : 사진이 뜨지 않을 때 이를 대체할만한 설명