Programming/HTML CSS
1. img 사용
<img src="sample.jpg">
▶sample.jpg 이미지를 표시합니다. HTML5에서도 같은 용도로 사용됩니다.

img 사용시 아직 존재하지 않는 이미지를 처리해야 하는 경우 placehold.it 을 사용하면 됩니다. src 속성에

http://placehold.it/300x200

위와 같이 placehold.it 주소와 뒤에 원하는 크기를 지정하면 해당 크기만큼의 이미지를 생성하게 됩니다.

2. img 속성

(1) src

표시할 이미지가 있는 위치를 url형태로 지정합니다. 만약 이미지에 대한 크기만 알고 실제 이미지가 없는 경우 src속성에 'http://placehold.it/300x100' 과 같이 지정하면 해당 크기에 맞는 대체이미지를 표시해 줍니다.

(2) alt

해당 이미지를 표시할 수 없는 경우 대신 표시할 내용을 문자열 형태로 지정합니다.

(3) align

이미지의 정렬 방식을 지원하며 left(왼쪽), center(가운데), right(오른쪽)값을 사용할 수 있습니다. 만약 이미지가 텍스트와 같이 사용되는 경우라면 top(위쪽), middle(가운데), bottom(아래쪽)값을 사용해 텍스트가 표시될 상대적인 위치를 지정할 수도 있습니다.

(4) height

이미지를 표시할때 이미지의 높이값을 나타냅니다. 성능상 이 속성을 지정하는 것이 좋습니다.

(5) width

이미지를 표시할때 이미지의 넓이값을 나타냅니다. 성능상 이 속성을 지정하는 것이 좋습니다.

(6) hspace

이미지의 가로 여백을 지정합니다.

(7) vspace

이미지의 세로 여백을 지정합니다.

(8) border

이미지를 표시할때 외곽선의 굵기를 지정합니다. 기본값은 0이며 px단위입니다.

3. CSS img 사용
.css_img {
 width:100px;
 height:100px;
}
4. CSS img 속성

(1) width

이미지의 가로 크기를 지정합니다. 크기 단위는 in(인치), cm(센치미터), mm(밀리미터), pt(포인터), pc(피카스), em, ex(em대비 1/2크기), px(픽셀), %(%단위)등의 상대적 단위크기를 사용하기도 합니다.

(2) height

이미지의 세로 크기를 지정합니다. 단위는 width와 같습니다.

(3) vertical-align

이미지가 텍스트와 함께 사용되는 경우 텍스트의 위치를 지정하는 속성입니다. top(위쪽), middle(가운데), bottom(아래쪽) 값을 사용할 수 있습니다.

'Programming > HTML CSS' 카테고리의 다른 글

[HTML] iframe  (0) 2013.04.09
[HTML / HTML5] hr (수평선)  (0) 2013.04.08
[HTML / HTML5 / CSS] img (이미지)  (0) 2013.04.05
[CSS] background  (0) 2013.04.04
[CSS] letter-spacing  (0) 2013.04.03
[CSS] line-height  (0) 2013.04.02
0 0