텍스트 정렬 - 한 눈에 끝내는 HTML5/CSS3
한 눈에 끝내는 HTML5/CSS3
  • 텍스트 정렬
    learn
    Practice
    learn
    12 글자(Text) 관련 스타일
    텍스트 정렬

    워드나 한글 같은 문서 편집기에서 다음과 같은 모양의 아이콘들을 본 적 있을 겁니다. 바로 텍스트의 정렬과 관련된 기능들이죠.

    CSS에서도 이와 동일한 기능을 하는 프로퍼티가 존재합니다. 텍스트 정렬과 관련된 프로퍼티들에 대해서 배워봅시다.


    text-align


    text-align 프로퍼티는 텍스트를 편집할 때 꽤 자주 사용되는 텍스트 좌, 우, 중앙 정렬입니다. 텍스트의 가로 맞춤을 설정하는데 사용되죠. 값으로 leftcenterright를 사용할 수 있습니다.

    해당 정렬 기준은 '본인'이 기준입니다. 아래 두 결과물을 비교해 봅시다.

    아래와 같이 모두 부모 요소나 웹의 크기와 상관 없이 text-align이 적용된 해당 요소(#down > p, #up > p)를 기준으로 정렬된 것을 확인할 수 있습니다.

    하나 더 알아볼까요? justify라는 값은 좌우로 띄어쓰기를 늘려 붙입니다. 신문 기사나 잡지 등에서 볼 수 있는 형식이죠. 직접 실행하여 차이를 살펴봅시다.


    line-height


    line-height는 문장 사이의 간격을 조정하는 프로퍼티입니다. 아래와 같이 line-height가 적용이 된 p 태그와 아닌 p 태그를 비교해 봅시다.

    line-heightpx와 같이 단위가 존재하는 값 또는 단위가 없는 숫자 값으로 높이를 조정합니다.

    여기서 단위 없는 숫자 값은 해당 요소의 font-size를 기준 한 배수로 높이를 조정합니다. 이를 확인하기 위해 아래와 같이 p 태그에 18pxfont-size를 지정하여 .line-height_numb.line-height_px의 크기를 비교해 봅시다.

    font-size18px의 2배인 36px.line-height_numb에 적용된 것을 확인할 수 있습니다.
    개발자 도구의 Computed 탭에서도 line-height:236px로 적용된 것을 확인할 수 있죠.

    line-height는 대체 어떤 방식으로 지정 되는 걸까요? 아래와 같이 line-height가 2인, 즉 font-size의 2배인 한 p 태그가 있다고 가정해 봅시다.

    CSS에 대해 잘 모르는 분들이라면 line-height가 각 글자의 하단부 사이의 거리라고 생각하기 쉽습니다

    하지만 CSS에서 실제 line-height는 line 사이의 height가 아닌 말 그대로 line의 height를 뜻합니다.


    letter-spacing


    letter-spacing은 자간, 즉 각 글자 사이의 간격을 조정합니다. letter-spacing: 5px;을 추가하면 각 글자 사이 간격이 늘어나는 것을 확인할 수 있습니다.


    text-indent


    마지막 프로퍼티입니다. text-indent는 문단의 시작부에 들여쓰기를 지정합니다. 실습으로 직접 확인해 봅시다.

    Practice

    이론에서 살펴본 코드를 직접 작성하여 결과를 확인한 뒤, 구성 요소를 변경하며 어떤 변화가 일어나는지 확인해봅시다.

    learn
    Practice
    Q & A
    Q&A forum that anyone can ask and answer.
    Share your questions and answers with other students and grow together!

    Registered Questions(0)