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

HTML
태그란? 텍스트 가운데 정렬 방법과 예제

HTML <center> 태그란?

HTML의 <center> 태그는 텍스트나 요소를 화면의 가운데로 정렬하기 위해 사용되는 태그입니다. 이 태그로 감싼 내용은 브라우저에서 수평 중앙 위치에 배치됩니다.

주의: <center> 태그는 HTML4.01에서 폐기(deprecated)되었으며, HTML5에서는 더 이상 지원되지 않습니다. 따라서 최신 웹 개발에서는 CSS를 활용한 정렬 방식을 사용하는 것이 권장됩니다.

CSS 대체 방법

<center> 태그 대신 아래와 같은 CSS 속성으로 동일한 결과를 얻을 수 있습니다.

  • 텍스트 정렬: text-align: center;
  • 블록 요소 중앙 정렬: margin: 0 auto;
  • Flexbox 활용: display: flex; justify-content: center;

그럼 이제 HTML에서 center 태그를 구현하는 예제를 살펴보겠습니다.

예제

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
   border: 2px solid blue;
}
</style>
</head>
<body>
<table>
   <center>예산 계산용 테이블</center>
   <caption>지출 내역</caption>
   <tr>
      <th>항목</th>
      <th>비용</th>
   </tr>
   <tr>
      <td>제품 개발</td>
      <td>500000</td>
   </tr>
   <tr>
      <td>마케팅</td>
      <td>500000</td>
   </tr>
   <tr>
      <td>서비스</td>
      <td>100000</td>
   </tr>
   <tr>
      <td>고객 지원</td>
      <td>100000</td>
   </tr>
   <tr>
      <td>유지보수</td>
      <td>100000</td>
   </tr>
   <tr>
      <td colspan="2">총 예산 = 1,300,000 INR</td>
   </tr>
</table>
</body>
</html>

출력 결과

HTML center 태그란? 텍스트 가운데 정렬 방법과 예제

위 예제에서는 <center> 태그를 사용해 표 위의 제목인 '예산 계산용 테이블'을 화면 가운데에 정렬했습니다. 표에는 각 항목별 비용과 함께 총 예산이 함께 표시됩니다. 다만 실무에서는 앞서 소개한 CSS 속성을 사용해 같은 결과를 구현하는 것이 바람직합니다.