Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

HTML에서 텍스트를 가운데 정렬하는 방법 완벽 가이드

HTML center 태그란?

HTML의 <center> 태그는 이 태그로 감싸진 콘텐츠를 화면 가운데에 정렬하기 위해 사용되던 요소입니다. 텍스트뿐만 아니라 이미지, 표 등 다양한 콘텐츠를 중앙에 배치할 수 있었습니다.

참고: 안타깝게도 이 태그는 HTML5에서 공식적으로 폐기(deprecated)되었습니다. 따라서 최신 웹 표준에서는 사용하지 않는 것이 좋으며, 대신 CSS를 활용한 정렬 방식을 권장합니다.

center 태그 사용 예제

다음 코드를 실행하면 텍스트가 화면 가운데에 정렬되는 것을 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML center 태그</title>
   </head>
   <body>
      <center>이 텍스트는 가운데 정렬됩니다</center>
      <p>이것은 일반 텍스트입니다.</p>
   </body>
</html>

권장 대체 방법: CSS 활용하기

<center> 태그는 더 이상 지원되지 않으므로, 현대적인 웹 개발에서는 CSS의 text-align 속성을 사용해야 합니다. 아래는 동일한 결과를 얻는 모범 사례입니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         .center-text {
            text-align: center;
         }
      </style>
   </head>
   <body>
      <p class="center-text">이 텍스트는 CSS로 가운데 정렬됩니다</p>
   </body>
</html>

정리

  • <center> 태그는 과거에 콘텐츠를 중앙 정렬하기 위해 사용되었으나 현재는 폐기되었습니다.
  • 텍스트 정렬에는 CSS의 text-align: center; 속성을 사용하세요.
  • 블록 요소 자체를 중앙에 배치하려면 margin: 0 auto; 또는 Flexbox를 활용하는 것이 좋습니다.