Program Language/HTML

[HTML] 이미지 가운데 정렬하기

야곰야곰+책벌레 2021. 9. 8. 12:08
728x90
반응형

※ HTML 예제는 주석 처리를 하지 않으니, 블로그 자체가 깨져버리는 기현상이 생긴다. 사용할 때는 <!-- --> 주석을 제외하고 사용하자.

 

1. CENTER 태그 이용하기

되도록 사용하지 않도록 하자. (HTML5에서 지원하지 않음)

<!--
<!DOCTYPE html>
<html>
    <body>
        <H1>&lt;CENTER&gt; 태그 이용</H2>
        <CENTER><img src="IU.jpg"></CENTER>
    </body>
</html>
-->

2. DIV 태그 이용하기

text-align 속성 값을 지정하여 사용한다.

<!--
<!DOCTYPE html>
<html>
    <body>
        <H1>&lt;DIV&gt; 태그 이용</H2>
        <DIV style ="text-align:center";>
            <img src="IU.jpg">
        </DIV>
    </body>
</html>
-->

3. Style 태그 이용하기

img 태그를 이용할 시 가운데에 오도록 지정할 수 있다.

<!--
<!DOCTYPE html>
<html>
    <head>
         <style>
            img { display:block; margin:auto;}
        </style>
    </head>
    <body>
        <H1>&lt;STYLE&gt; 태그 이용</H2>
        <img src="IU.jpg">
    </body>
</html>
-->

4. CSS 파일 이용하기

CSS파일에 지정된 스타일을 만든 후, HTML에서 해당 스타일을 가져다 쓴다.

<!--
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body>
        <H1>CSS Stylesheet 이용</H2>
        <img id="cen_img" src="IU.jpg">
    </body>
</html>
-->
#cen_img {
    display:block;
    margin:auto;
}

link 태그를 이용하여 css 파일을 연결한 후, cen_img 스타일을 적용시킬 태그에 id를 지정해 준다.

위의 세 방법 모두 이미지를 센터에 오도록 해준다.

HTML_이미지 센터링 예제.zip
0.06MB

728x90
반응형