본문 바로가기
css

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

by 지구별에 2014. 4. 9.

 

 

[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 src="leaf.png">

<img src="http://aboooks.tistory.com/images/leaf.png">           

 

 

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

 

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

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

 

 

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

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

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

align 사진 정렬

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

 

 

사용 예:


<img src="leaf.png" alt="leaf" border="3px" width="100px" height="100px" align="right">

 

 

 위의 속성 중 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 속성을 사용합니다

<img src="leaf.png" style="float: left;">

<img src="leaf.png" style="float: right;">

 

 

하지만 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>

<h1>
애국가
</h1>


<p>
<img src="leaf.png" alt="leaf" /></p>

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


</body>
</html>

 

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

 

 

 

 

 

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

 

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

 

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

반응형

댓글