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

CSS를 활용한
태그 가운데 정렬 방법 완벽 가이드

웹 페이지에서 <div> 요소를 화면 가운데에 배치하는 것은 레이아웃 작업에서 매우 자주 사용되는 기법입니다. 정렬 방식은 크게 두 가지로 나눌 수 있습니다. 하나는 HTML의 align 속성을 직접 사용하는 방법이고, 다른 하나는 CSS를 활용하는 방법입니다. CSS 방식이 구조와 스타일을 분리할 수 있어 더 권장되는 방식입니다.

방법 1: HTML의 align 속성 사용하기

가장 간단한 방법은 <div> 태그에 align="center" 속성을 추가하는 것입니다.

<html>
<head>
    <title>CSS 없이 div 가운데 정렬하기</title>
</head>
<body>
<div>
    일반 문단입니다. 여기에는 별도의 정렬을 적용하지 않았습니다.
</div>
<div align="center" style="border: 2px solid blue">
    이 문단은 가운데에 정렬됩니다.
</div>
</body>
</html>

위 예제에서 두 번째 <div>는 align="center" 속성 덕분에 화면 중앙으로 배치되며, 파란색 테두리로 그 결과를 쉽게 확인할 수 있습니다.

방법 2: CSS를 사용한 가운데 정렬 (권장)

CSS를 활용하면 HTML 코드와 스타일을 분리하여 관리할 수 있습니다. 외부 스타일시트 파일을 연결하고 클래스를 지정하는 방식입니다.

<html>
<head>
<title>CSS로 div 가운데 정렬하기</title>
    <link href="../../Content/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
    일반 문단입니다. 여기에는 별도의 정렬을 적용하지 않았습니다.
</div>
<div class="mydiv">
    이 문단은 가운데에 정렬됩니다.
</div>
</body>
</html>

Style.css 파일 내용

외부 스타일시트인 style.css 파일에는 다음과 같이 스타일을 정의합니다.

body {
    background-color: Gray;
}

.mydiv {
    padding: 10px;
    margin: auto;
    width: 30%;
    border: 4px solid black;
}

핵심 포인트: margin: auto

여기서 가장 중요한 속성은 바로 margin: auto입니다. 이 속성은 요소의 좌우 여백을 자동으로 균등하게 분배하여, 너비(width)가 지정된 블록 요소를 부모 컨테이너의 수평 중앙에 위치시킵니다. 반드시 width 값이 함께 설정되어야 정상적으로 동작한다는 점을 기억하세요.

추가 팁: 텍스트까지 가운데 정렬하기

<div> 박스 자체뿐만 아니라 박스 안의 텍스트까지 가운데 정렬하고 싶다면, CSS 파일의 .mydiv 클래스에 text-align: center; 속성을 추가하면 됩니다.

.mydiv {
    padding: 10px;
    margin: auto;
    width: 30%;
    border: 4px solid black;
    text-align: center;
}

이처럼 CSS를 활용하면 HTML 구조를 변경하지 않고도 유연하게 정렬 스타일을 조정할 수 있어, 유지보수 측면에서 훨씬 효율적입니다.