[html/css] 이미지를 넣는 img 태그(css로 이미지 중앙 정렬 방법)

[html/css] 이미지를 넣는 img 태그(css로 이미지 중앙 정렬 방법)

오늘 알아볼 태그는 사진이나 그림 같은 이미지를 넣는 <img>태그입니다...

또한 이미지와 함께 사용하는 여러 속성이나, 이미지 중앙 정렬 방법도 같이 알아볼게요

<img>태그

<img>태그는 브라우저에게 이미지가 들어간다고 알리는 태그이며, 닫는 태그는 없습니다.

xhtml에서는 <img /> 로 시작 태그와 닫는 태그를 대신함. 예 <img src="leaf.png" />

<img>태그에 넣을 수 있는 이미지로는 다음 파일입니다.

GIF : 256 색상만 지원하므로, 단순한 이미지에 최적화 됨

JPG/JPEG : 수백가지 색상을 지원하며, 사진에 최적화 됨

PNG : JPG보다 저용량에 수백가지 색상을 지원함 됨

<img>는 이미지가 위치한 곳을 알려주는 src 속성과 같이 사용합니다.

src 속성

source의 약자로, href 속성처럼 주소를 입력합니다.

문서를 연결하는 a 태그 (href, title, target 속성)

사용 예:

<img> 태그와 같이 이용할 수 있는 속성을 보면 다음과 같습니다

참고로 본래 사진 크기와 다르게 너비와 높이값을 임의로 줄일 수 있지만 원래 사진의 용량이 작아지는 것은

아니므로 이미지 편집 프로그램을 이용하여 용량을 줄이는 게 좋습니다.

border 이미지 테두리 폭을 지정(pixel값)

width 사진 너비를 지정(pixel값)

height 사진 높이를 지정(pixel값)

align 사진 정렬

alt 사진이 뜨지 않을 때 이를 대체할만한 설명

사용 예:

위의 속성 중 border, align 같은 속성은 html5에서 지원하지 않으므로 css를 이용하여 스타일을 주는 게 좋습니다

사용 예:

img

{

border: 3px solid red;

width: 100px;

height: 100px;

float:right;

}

아래 링크도 참조

border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법)

float 속성에 대하여

이미지를 왼쪽, 오른쪽, 중앙 정렬하기

이미지를 정렬 할 때, html 문서 안에서 align 속성을 사용하여 수평 정렬 할 수 있습니다.

<img src="leaf.png" align="left"> 이미지를 수평을 기준으로 왼쪽 정렬

<img src="leaf.png" align="center"> 이미지를 수평을 기준으로 중앙 정렬

<img src="leaf.png" align="right"> 이미지를 수평을 기준으로 오른쪽 정렬

css에서는 왼쪽, 오른쪽 정렬할 때 float 속성을 사용합니다

하지만 css에서 이미지를 중앙 정렬할 때는 어떻게 해야 할까요?

CSS에서 이미지 중앙 정렬 방법

1. 이미지를 block 요소로 만들고, margin값으로 중앙 정렬합니다.

display 속성 (inline, block, none, inline-block 차이), visibility 속성(visible, hidden, collapse 차이)

margin 속성 자세히 알아 보기(margin-top,margin-left, margin-bottom, margin-left 설정 방법)

img

{
border: 3px solid red;
width: 100px;
height: 100px;
display: block;
margin-left: auto;

margin-right: auto;
}

2. 이미지 상위 요소에 text-align 속성을 적용합니다.

text-align은 block 요소 안에 있는 inline 요소를 정렬하는 속성임

text-align는 속성값으로 left, right, center, justity 등이 있습니다.

text-align 속성으로 정렬하기 (left, right, center, justify) 참고

사용 예

img.htm

<html>
<head>
<style type="text/css">
p{

text-align: center;

}
img

{
border: 3px solid red;
width: 100px;
height: 100px;
}
</style>
</head>

<body>

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세.
남산 위에 저 소나무 철갑을 두른듯 바람서리 불변함은 우리 기상일세.
가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편 단심일세.
이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세.
후렴 무궁화 삼천리 화려강산 대한 사람 대한으로 길이 보전하세

</body>
</html>

실행 화면입니다. 이미지가 중앙 정렬되었습니다.

[html/css] div 1개 정렬하기(왼쪽, 오른쪽, 가운데 정렬)

[html/css] table 중앙 정렬하기

[html/css] div 이미지 공백 없애기

'css' 카테고리의 다른 글

[html/css] div 1개 정렬하기(왼쪽, 오른쪽, 가운데 정렬) (0)	2014.04.15
[html/css] table 중앙 정렬하기 (1)	2014.04.12
[html/css] a: link, a: visited, a: active, a: hover 사용법 자세히 알기 (1)	2014.04.08
[html/css] display 속성 (inline, block, none, inline-block 차이), visibility 속성(visible, hidden, collapse 차이) (6)	2014.04.05
[html/css] overflow 속성 (overflow: visible, hidden, scroll, auto 차이) (4)	2014.04.04