CSS에서 글 정렬 방법 - 초보자도 바로 따라 할 수 있는 가이드

 

오늘은 CSS에서 글 정렬 방법에 대해 알아보겠습니다.

특히 인라인 스타일을 사용하여 글을 정렬하는 방법을 먼저 설명하고, 그 이후에 다른 정렬 방법에 대해서도 살펴보겠습니다.

1. 인라인 스타일로 글 정렬하기

인라인 스타일은 HTML 요소의 style 속성을 사용하여 직접 CSS 스타일을 적용하는 방법입니다. 예를 들어, 텍스트를 오른쪽으로 정렬하고 싶다면 다음과 같이 할 수 있습니다.

<p style="text-align: right;">이 문장은 오른쪽으로 정렬됩니다.</p>

인라인 스타일 사용 예시

여기 몇 가지 예시를 추가해볼게요.

<div style="text-align: center;">
    <h1>중앙 정렬 제목</h1>
    <p style="text-align: left;">이 문장은 왼쪽으로 정렬됩니다.</p>
    <p style="text-align: right;">이 문장은 오른쪽으로 정렬됩니다.</p>
</div>

위 코드를 사용하면 제목은 중앙에 정렬되고, 첫 번째 문장은 왼쪽, 두 번째 문장은 오른쪽에 정렬됩니다.

2. CSS 클래스 사용하기

인라인 스타일을 사용하기보다는 CSS 클래스를 사용하는 것이 더 효율적일 수 있습니다. 클래스를 사용하면 여러 요소에 같은 스타일을 쉽게 적용할 수 있습니다. 다음과 같이 CSS 클래스를 만들 수 있습니다.

<style>
    .left {
        text-align: left;
    }
    .center {
        text-align: center;
    }
    .right {
        text-align: right;
    }
</style>

<div class="center">
    <h1>중앙 정렬 제목</h1>
    <p class="left">이 문장은 왼쪽으로 정렬됩니다.</p>
    <p class="right">이 문장은 오른쪽으로 정렬됩니다.</p>
</div>

이렇게 하면 코드가 더 깔끔해지고 유지보수가 쉬워집니다.

3. 글 정렬 속성 요약

• text-align: 텍스트의 정렬 방식을 설정합니다. 가능한 값은 left, right, center, justify입니다.
• vertical-align: 인라인 요소의 세로 정렬 방식을 설정합니다. 주로 테이블 셀 또는 인라인 요소에 사용됩니다.

4. 추가적인 글 정렬 방법

CSS에서 제공하는 여러 가지 글 정렬 방법이 있습니다. 아래는 몇 가지 예시입니다.

4.1. justify

text-align: justify;를 사용하면 텍스트가 양쪽 끝으로 정렬됩니다.

<p style="text-align: justify;">이 문장은 양쪽으로 정렬됩니다.</p>

4.2. flexbox 사용하기

Flexbox를 사용하면 좀 더 유연한 정렬이 가능합니다.

<div style="display: flex; justify-content: center;">
    <p>이 문장은 중앙에 정렬됩니다.</p>
</div>

CSS에서 글 정렬은 웹 페이지 디자인에서 매우 중요한 요소입니다.

인라인 스타일을 사용하여 간단하게 정렬할 수 있으며, 클래스를 사용하면 더 효율적입니다. 또한 다양한 CSS 속성을 활용하면 더 유연하게 텍스트를 배치할 수 있습니다.

 

구독!! 공감과 댓글은 저에게 큰 힘이 됩니다.

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱