728x90
반응형
※ HTML 예제는 주석 처리를 하지 않으니, 블로그 자체가 깨져버리는 기현상이 생긴다. 사용할 때는 <!-- --> 주석을 제외하고 사용하자.
1. CENTER 태그 이용하기
되도록 사용하지 않도록 하자. (HTML5에서 지원하지 않음)
<!--
<!DOCTYPE html>
<html>
<body>
<H1><CENTER> 태그 이용</H2>
<CENTER><img src="IU.jpg"></CENTER>
</body>
</html>
-->2. DIV 태그 이용하기
text-align 속성 값을 지정하여 사용한다.
<!--
<!DOCTYPE html>
<html>
<body>
<H1><DIV> 태그 이용</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><STYLE> 태그 이용</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를 지정해 준다.
위의 세 방법 모두 이미지를 센터에 오도록 해준다.
728x90
반응형
'Program Language > HTML' 카테고리의 다른 글
| [HTML] HTML TAG를 텍스트로 표현하기 (0) | 2021.09.08 |
|---|