Reference/CSS

text-align 속성은 텍스트 정렬 방식을 설정합니다.

by @webs 2022. 7. 4.

text-align

text-align 속성은 텍스트 정렬 방식을 설정합니다. start와 end 속성은 텍스트의 방향이 다를 경우 left와 right의 차이점을 알 수 있습니다.

특징	설명
기본값	text-align : left
적용	text
버전	CSS1
사용성	★★★★★

정의(Definition)

text-align 속성은 텍스트 정렬 방식을 설정합니다.
text-align : start 속성은 left와 같아 보이지만 글씨의 방향이 반대라면 차이가 납니다.
text-align : end 속성은 right와 같아 보이지만 글씨의 방향이 반대라면 차이가 납니다.
text-align : match-parent 속성은 inherit와 같아 보이지만 start와 end속성을 가져와 left와 right로 치환하여 적용합니다.

텍스트와 관련된 속성

text-align 속성은 텍스트 정렬 방식을 설정합니다.
text-align-last 속성은 문단의 마지막 텍스트 정렬 방식을 설정합니다.
text-decoration 속성은 텍스트 라인 속성을 설정합니다.
text-indent 속성은 문단 들여쓰기 속성을 설정합니다.
text-justify 속성은 텍스트의 정렬 유형을 설정합니다.
text-overflow 속성은 텍스트 영역 속성을 설정합니다.
text-shadow 속성은 텍스트 그림자를 설정합니다.
text-transform 속성은 텍스트 대/소문자를 설정합니다.
text-emphasis 속성은 텍스트에 강조 표시를 설정합니다.
text-underline-offset 속성은 언더라인의 오프셋값을 설정합니다.
text-underline-position 속성은 언더라인의 위치를 설정합니다.
text-combine-upright 속성은 문자 조합을 설정합니다.
text-size-adjust 속성은 스마트폰에서 텍스트 비율을 설정합니다.
text-fill-color 속성은 텍스트의 면 색상을 설정합니다.
text-stroke 속성은 텍스트의 선 색상 및 굵기를 설정합니다.

폰트와 관련된 속성

font 속성은 폰트에 관한 설정을 일괄적으로 설정합니다.
font-family 속성은 폰트 종류를 설정합니다.
font-size 속성은 폰트 사이즈 속성을 설정합니다.
font-size-adjust 속성은 소문자를 기준으로 폰트 크기를 설정합니다.
font-style 속성은 폰트의 스타일을 설정합니다.
font-weight 속성은 폰트의 두께를 설정합니다.
font-stretch 속성은 폰트의 장평을 설정합니다.
font-variant 속성은 영문 폰트의 소문자 표시 형태를 설정합니다.
font-feature-settings 속성은 오픈 타입 글꼴의 세부사항을 설정합니다.
font-kerning 속성은 커닝 기능을 사용할 것인지의 여부를 설정합니다.
font-language-override 속성은 정의된 언어를 다른 언어로 설정합니다.
font-optical-sizing 속성은 텍스트 렌더링을 통해 다양한 크기를 설정합니다.
font-synthesis 속성은 누락된 텍스트의 합성 여부를 설정합니다.
@font-face 속성은 웹폰트를 설정합니다.
color 속성은 폰트의 색상을 설정합니다.

문법(Syntax)

/* 기본 속성 */
text-align : left;
text-align : right;
text-align : center;
text-align : justify;
text-align : justify-all;

/* 글씨 방향에 따라 적용 */
text-align : start;
text-align : end;
text-align : match-parent;

/* 전역 속성 */
text-align: inherit;   /* 상속 */
text-align: initial;   /* 초기화 */
text-align: revert;  /* 원래대로 돌리기 */
text-align: unset;   /* 설정 해제 */

속성(Property)

속성값	값(예)	설명
start	text-align : start;	텍스트의 정렬을 시작 정렬로 설정합니다.
end	text-align : end;	텍스트의 정렬을 끝 정렬로 설정합니다.
left	text-align : left;	텍스트의 정렬을 왼쪽 정렬로 설정합니다.
right	text-align : right;	텍스트의 정렬을 오른쪽 정렬로 설정합니다.
center	text-align : center;	텍스트의 정렬을 가운데 정렬로 설정합니다.
justify	text-align : justify;	텍스트의 정렬을 양쪽 정렬로 설정합니다.
justify-all	text-align : justify;	텍스트의 정렬을 마지막 줄까지 양쪽 정렬로 설정합니다.
match-parent	text-align : match-parent;	start와 end 속성을 left와 right 값으로 치환하여 가져옵니다.
inherit	text-align : inherit;	텍스트의 정렬을 상위요소한테 상속받습니다.

예제1(Sample)

텍스트 정렬 상태를 설정한 예제입니다.

나는 공간을 만드는 것을 좋아한다.
어려을 때부터 나만의 공간을 만드는 것을 좋아했고 나만의 다락방을 좋아했다. 단 한 사람이라도 내가 만든 공간 속에서 영감을 받거나 마음이 움직였으면 좋겠다. 서울에는 집이 없지만, 이곳에서는 나만의 집이 많다. 그 집은 비용도 들지 않고 언제든지 만들 수 있다. 나만의 공간을 마음것 만들 수 있다는 건 코딩에 엄청난 매력인거 같다. 그 한구석에 나만의 꿈을 설계하고 디자인을 하며 앞으로도 살고 싶다.

열심히 할수록 기회는 따른다.
운이 좋은 사람은 없다. 단지 운을 만들 뿐이다. 운을 만들기 위해서는 내가 좋아하는 일이나 내가 하고 싶은 일에 몰두하면 된다. 몰두 하다보면 길이 보이고 방향이 보이게 된다. 운이란 고된 노동과 노력을 통해 스스로 만들어 내는 것이다. 복권에 당첨되는 사람들은 금방 돈을 허비하게 된다. 단지 행운만 좋았기 때문이다. 운을 만든 사람은 돈을 날려먹거나 헛되게 쓰지 않는다. 열심히 할수록 운은 나에게 온다.

나에게 정직하다.
정직은 다른 사람보다 나에게 큰 의미를 부여해야 한다. 자신이 정직하지 않으면 진정으로 원하는 일을 열정적으로 밀고 나갈 수 없다. 마음에서 우러나오는 일을 해야 정직해지며 삶을 더 즐길 줄 알게 된다. 다름 사람에게도 정직해야 하지만 그 무엇보다 나 자신한테 정직해야 한다.

text-align: left text-align: center text-align: right text-align: justify text-align: justify-all

HTML

CSS

SCRIPT

<div class="text-box">
    <div class="box">
        나는 공간을 만드는 것을 좋아한다.<br> 어려을 때부터 나만의 공간을 만드는 것을 좋아했고 나만의 다락방을 좋아했다. 단 한 사람이라도 내가 만든 공간 속에서 영감을 받거나 마음이 움직였으면 좋겠다. 서울에는 집이 없지만, 이곳에서는 나만의 집이 많다. 그 집은 비용도 들지 않고 언제든지 만들 수 있다. 나만의 공간을 마음것 만들 수 있다는 건 코딩에 엄청난 매력인거 같다. 그 한구석에 나만의 꿈을 설계하고 디자인을 하며 앞으로도 살고 싶다.
    </div>
    <div class="box">
        열심히 할수록 기회는 따른다.<br> 운이 좋은 사람은 없다. 단지 운을 만들 뿐이다. 운을 만들기 위해서는 내가 좋아하는 일이나 내가 하고 싶은 일에 몰두하면 된다. 몰두 하다보면 길이 보이고 방향이 보이게 된다. 운이란 고된 노동과 노력을 통해 스스로 만들어 내는 것이다. 복권에 당첨되는 사람들은 금방 돈을 허비하게 된다. 단지 행운만 좋았기 때문이다. 운을 만든 사람은 돈을 날려먹거나 헛되게 쓰지 않는다. 열심히 할수록 운은 나에게 온다.
    </div>
    <div class="box">
        나에게 정직하다.<br> 정직은 다른 사람보다 나에게 큰 의미를 부여해야 한다. 자신이 정직하지 않으면 진정으로 원하는 일을 열정적으로 밀고 나갈 수 없다. 마음에서 우러나오는 일을 해야 정직해지며 삶을 더 즐길 줄 알게 된다. 다름 사람에게도 정직해야 하지만 그 무엇보다 나 자신한테 정직해야 한다.
    </div>
</div>

.text-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.text-box .box {
    width: 32%;
    line-height: 1.4;
}
@media (max-width:800px){
    .text-box .box {
        width: 100%;
        margin-bottom: 2%;
    }
}

document.querySelectorAll("#sample1 .sampleBtn a").forEach(btn => {
    btn.addEventListener("click", (e)=> {
        e.preventDefault();
        const text = btn.innerText;
        document.querySelector("#sample1 .text-box").setAttribute("style", text);
    })
});

예제2(Sample)

start/end와 left/right 속성의 차이점을 보여주는 예제입니다.

글씨의 방향이 direction: rtl로 설정되어 있습니다.

text-align: start text-align: end text-align: left text-align: right

HTML

CSS

SCRIPT

<div class="text-box">
    <div class="box">
        나는 공간을 만드는 것을 좋아한다.<br> 어려을 때부터 나만의 공간을 만드는 것을 좋아했고 나만의 다락방을 좋아했다. 단 한 사람이라도 내가 만든 공간 속에서 영감을 받거나 마음이 움직였으면 좋겠다. 서울에는 집이 없지만, 이곳에서는 나만의 집이 많다. 그 집은 비용도 들지 않고 언제든지 만들 수 있다. 나만의 공간을 마음것 만들 수 있다는 건 코딩에 엄청난 매력인거 같다. 그 한구석에 나만의 꿈을 설계하고 디자인을 하며 앞으로도 살고 싶다.
    </div>
    <div class="box">
        열심히 할수록 기회는 따른다.<br> 운이 좋은 사람은 없다. 단지 운을 만들 뿐이다. 운을 만들기 위해서는 내가 좋아하는 일이나 내가 하고 싶은 일에 몰두하면 된다. 몰두 하다보면 길이 보이고 방향이 보이게 된다. 운이란 고된 노동과 노력을 통해 스스로 만들어 내는 것이다. 복권에 당첨되는 사람들은 금방 돈을 허비하게 된다. 단지 행운만 좋았기 때문이다. 운을 만든 사람은 돈을 날려먹거나 헛되게 쓰지 않는다. 열심히 할수록 운은 나에게 온다.
    </div>
    <div class="box">
        나에게 정직하다.<br> 정직은 다른 사람보다 나에게 큰 의미를 부여해야 한다. 자신이 정직하지 않으면 진정으로 원하는 일을 열정적으로 밀고 나갈 수 없다. 마음에서 우러나오는 일을 해야 정직해지며 삶을 더 즐길 줄 알게 된다. 다름 사람에게도 정직해야 하지만 그 무엇보다 나 자신한테 정직해야 한다.
    </div>
</div>

#sample2 .text-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    direction: rtl;
}
#sample2 .text-box .box {
    width: 32%;
    line-height: 1.4;
}
@media (max-width:800px){
    #sample2 .text-box .box {
        width: 100%;
        margin-bottom: 2%;
    }
}

document.querySelectorAll("#sample2 .sampleBtn a").forEach(btn => {
    btn.addEventListener("click", (e)=> {
        e.preventDefault();
        const text = btn.innerText;
        document.querySelector("#sample2 .text-box").setAttribute("style", text);
    })
});

호환성(Compatibility)

						6	7	8	9	10	11
text-align	○	○	○	○	○	○	○	○	○	○	○	○	○	○
left	○	○	○	○	○	○	○	○	○	○	○	○	○	○
right	○	○	○	○	○	○	○	○	○	○	○	○	○	○
center	○	○	○	○	○	○	○	○	○	○	○	○	○	○
justify	○	○	○	○	○	○	○	○	○	○	○	○	○	○
justify-all	❌	❌	❌	❌	❌	❌	❌	❌	❌	❌	❌	❌	❌	❌
start	○	○	○	○	○	❌	❌	❌	❌	❌	❌	○	○	○
end	○	○	○	○	○	❌	❌	❌	❌	❌	❌	○	○	○
match-parent	○	○	○	○	○	❌	❌	❌	❌	❌	❌	○	○	○