【CSS】 글자 세로 정렬하기 | vertical-align

Vertical-Align

[프로퍼티값]
• baseline ^★default 요소를 줄의 baseline에 수직 정렬
• top 요소를 줄의 top 라인에 수직 정렬
• bottom 요소를 줄의 bottom 라인에 수직 정렬
• text-top 요소를 줄의 text-top 라인에 수직 정렬
• text-bottom 요소를 줄의 text-bottom 라인에 수직 정렬
• super 윗 첨자: 요소를 줄의 super 라인에 수직 정렬
• sub 아래 첨자: 요소를 줄의 sub 라인에 수직 정렬
• middle 요소를 줄의 middle 라인에 수직 정렬
• length unit 요소를 줄의 baseline부터 특정 값만큼 위로 올리거나(양수) 밑으로 내림(음수)
(%, em, rem, px, pt, in 등등)
• inherit 부모 요소에 설정된 값을 상속 받아 사용함
• initial 상속과 상관없이, 설정된 초기값을 사용함

[특성]
•자동 상속 여부: 받음
•애니메이션 여부: 가능

[ CSS 목차 보기 ]

이번 포스트에서는 vertical-align을 이용하여 줄 안에서 글자(또는 요소)들의 세로 위치를 조절하는 방법에 대해서 다룹니다. 이를 통해서 줄의 개념과 줄에서 글자들이 차지하는 공간에 대해서 알아봅니다. 참고로 “줄 안”에서의 정렬이 아니라 “block 요소 안”에서 수직 정렬을 하고자 한다면, vertical-align을 사용할 수 없고 다른 방법을 사용해야 합니다. 관련 내용은 [참고1. 글자 세로 가운데 정렬하는 방법] 포스트에서 자세히 다루고 있습니다.

[1] 줄의 개념

vertical-align은 “줄 안”에서 요소의 정렬을 제어하는 프로퍼티이기 때문에, 줄의 개념을 정확히 이해할 필요가 있습니다. 요소는 display 방식에 따라 크게 block, inline, 또는 inline-block으로 나눌 수 있습니다. 이들 중 어떤 타입에 해당하든지 간에 글자를 넣을 수 있다면 줄이 존재합니다. inline 요소는 그 크기를 조절할 수 없기 때문에 줄과 같은 개념으로 이해하면 되는 반면, block과 inline-block은 그 크기들을 설정할 수 있기 때문에 줄의 개념과 조금 분리할 필요가 있습니다. 말이 어려울 수 있으니, 아래 예제를 통해 찬찬히 알아봅시다.

[1.1] inline 요소 안의 줄

예제 목표

이번 포스트 전반에 걸쳐 inline box라는 용어를 자주 사용합니다. 설명의 편의상 inline 요소의 테두리선에 해당하는 네모를 “inline box”로 정의하고 사용하겠습니다. 이번 예제에서는 inline box의 컨셉을 이해합니다. inline box는 줄과 같은 개념인데, 더 자세히 말하자면 줄의 크기 중에서도 “표시된 크기“에 해당합니다. 이는 줄이 차지하는 “실제 크기”와 다른 개념인데, 예제 [2.1]에서 더 자세히 다루겠습니다. inline 요소들의 크기 속성(width/ height)을 지정할 수 없는 이유가 바로 inline 요소들은 줄과 같은 개념으로 디자인 되었기 때문입니다. inline 요소들의 크기는 글자들이 입력된 줄에 따라 커지게 됩니다.

전체 코드

먼저 전체 코드와 결과는 아래와 같습니다.

결과 설명

결과에 대한 설명은 아래 카드를 넘기면서 단계적으로 볼 수 있습니다.

• 구현 목표
  • 먼저 HTML 파트를 작성해보겠습니다.
• <div class=”wrapper”>
  • 예제 코드를 둘러쌀 래퍼를 먼저 만듭니다. 래퍼의 필요성과 설정방법은 [참고2. 래퍼의 개념과 설정방법] 포스트에서 자세히 다루고 있습니다.
• <span class=”outer”>hello world</span>
  • inline 요소인 span를 생성하고, 안에 hello world라는 글자를 넣습니다.
• 구현 결과
  • 아직 CSS를 설정하지 않았으므로, 특별한 효과 없이 hello world 글자만 출력됩니다.

• 구현 목표
  • CSS 파트를 작성합니다.
• .wrapper의 CSS
  • 래퍼에 들어갈 기본 프로퍼티들을 설정합니다. 기본적인 래퍼 프로퍼티들에 대한 내용은 [참고2. 래퍼의 개념과 기본설정] 포스트에서 다루고 있습니다.
• .wrapper .outer의 CSS
  • font-size: 30px; 글자 크기를 30px로 지정합니다.
  • border: 1px solid coral; span.outer 요소의 테두리선을 1px 두께의 coral색 실선으로 지정하여 시각화합니다. span의 기본적인 display 속성이 inline이기 때문에, 테두리선이 바로 inline box에 해당합니다.
• 구현 결과
  • span 요소는 inline 요소이기 때문에, span의 크기 속성(width, height)을 설정할 수 없습니다. inline box의 크기를 설정할 수 없다는 것은 그 크기가 자동적으로 결정된다는 말일텐데, 어떤 것을 기준으로 결정될까요? 이것이 inline box를 이해하는 것에 핵심입니다. inline box의 크기는 “줄의 (표시되는) 크기”에 맞춰서 정해집니다. 글자 크기(font-size)가 정해지고 글자가 입력되면, 그 글자체(font-family)의 디자인대로 줄 안에 글자가 입력되어집니다. 그 글자들의 최외각을 감싸는 영역이 “줄이 표시되는 부분”이고, 이 부분이 바로 inline box에 해당합니다. 참고로, 다시 언급하지만, “표시되는 크기”라고 표현한 이유는 줄이 차지하는 “실제 크기”와 다르기 때문입니다. 이에 관한 설명은 [2.1] 에서 자세히 설명되어 있으니, 조금만 참고 찬찬히 읽어주시기 바랍니다.
  • 　이를 염두하여 예제 결과를 보시면, span.outer 요소의 테두리선(coral색 선)은 글자들을 최외각을 둘러싸고 있습니다. 이 최외각 영역은 줄의 표시된 크기에 해당하므로, inline box는 줄의 표시된 크기에 해당함을 알 수 있습니다.

[1.2] block 요소 안의 줄

예제 목표

inline box와 같은 방식으로, block 요소의 테두리선에 해당하는 네모를 block box라고 정의하고 사용하겠습니다. 이번 예제에서는 block box의 개념에 대해서 알아보고, block box의 크기는 줄의 크기와 서로 다르다는 것을 알아보겠습니다. block box는 크기 속성을 설정할 수 있기 때문에, 안에 글자들이 들어가더라도 글자들 외 공간도 존재하게 됩니다. 다시 말해서, “block box 크기” = “줄 크기” + “줄 외 공간”으로 표시할 수 있습니다. 간단한 개념이지만, inline box와는 다른 메커니즘이기 때문에 정확히 인지하셔야, 나중에 더 복잡한 개념으로 넘어 갔을 때 헷갈리지 않게 됩니다.

전체 코드

먼저 전체 코드와 결과는 아래와 같습니다.

결과 설명

결과에 대한 설명은 아래 카드를 넘기면서 단계적으로 볼 수 있습니다.

• 구현 목표
  • HTML 파트를 작성합니다.
• <div class=”wrapper”>
  • 예제를 둘러쌀 래퍼를 생성합니다. 래퍼의 기본 개념과 설정은 [참고2. 래퍼의 기본 개념과 설정방법] 포스트에서 자세히 다루고 있습니다.
• <div class=”outer”>
  • block 요소인 div.outer를 생성합니다. 그리고 이 안에 글자를 넣었을 때, 줄이 어떻게 생성되는지를 관찰할 예정입니다.
• <span class=”inner”>
  • span 요소를 만들고, “hello world”를 넣어줍니다. span 요소를 생성할 필요없이 hello world 글자를 div.outer에 바로 넣어도 결과에는 상관이 없습니다. 하지만 이 예제의 목표는 줄의 크기를 확인하는 것에 있기 때문에, 글자들을 span으로 둘러싸서 줄을 시각화시켜 주겠습니다. 앞에서 설명한 것처럼 inline box(=span의 테두리선)는 줄의 크기를 표시하기 때문에, block 요소(div.outer)와 그 내부에 위치한 줄의 크기를 비교할 수 있게 됩니다.
• 구현 결과
  • 아직 CSS를 설정하지 않았으므로, 특별한 효과없이 hello world만 출력됩니다.

• 구현 목표
  • CSS 파트를 작성합니다.
• .wrapper의 CSS
  • 래퍼의 기본 프로퍼티를 작성합니다. 자세한 내용은 [참고2. 래퍼의 기본 개념과 설정방법] 포스트에 적혀있습니다.
  • display: flex; 자식요소(div.outer)들을 정렬하기 위해 flex 설정을 해줍니다.
  • justify-content: center; 자식요소(div.outer)들을 가로 가운데 정렬을 해줍니다. 가운데 정렬을 한 특별한 이유가 있는 것은 아니고, div.outer를 그냥 보기 좋게 하기 위해서 가운데 정렬을 하였습니다. 출력 결과를 보시면, div.outer (검은 색선)이 가운데로 정렬되었음을 확인할 수 있습니다.
• .wrapper .outer의 CSS
  • width: 300px; block 요소인 div.outer의 너비를 300px로 지정해줍니다.
  • height: 80px; block 요소인 div.outer의 높이를 80px로 지정해줍니다.
  • border: 1px solid black; div.outer 요소의 테두리선을 1px 두께의 검정색 실선으로 지정하여 block box를 시각화해 줍니다. 이렇게 함으로써 block 요소의 크기를 볼 수 있습니다.
• .wrapper .inner의 CSS
  • font-size: 30px; 글자 크기를 30px로 지정해줍니다.
  • border: 1px solid coral; span.inner 요소의 테두리선을 1px 두께의 coral색 실선으로 설정함으로써 inline box를 시각화해 줍니다. 앞에서 설명드린 것처럼, inline box는 줄을 표시하기 때문에 줄의 크기를 확인할 수 있습니다.
• 구현 결과
  • 결과에서 확인해야 할 요점은 block box(div.outer, 검정색 네모)의 크기와 inline box(span.inner, coral색 네모)의 크기를 비교하는 것입니다. block box는 block 요소의 크기를 나타내고, inline box는 줄의 크기를 나타냅니다. 결과를 보시면, block 요소의 크기는 줄의 크기 외에도 여백이 존재함을 알 수 있습니다. 따라서 “block 요소 크기” = “줄 크기” + “줄 외 공간”으로 생각할 수 있습니다.
  • 　여기서 미리 한 가지 집고 넘어갈 부분은 vertical-align 프로퍼티가 할 수 있는 영역은 “줄 안”에서의 정렬이라는 것입니다. 무슨 말인가 하면, 예를 들어 줄 안에 있는 “hello world” 글자 중에 “w”만을 수직방향으로 올리거나 내릴 수 있습니다. 만약 block 요소(검정색 네모) 내에서 줄 전체(coral색 네모)를 세로 가운데로 정렬하고자 한다면, 이는 vertical-align으로 구현 할 수가 없고 다른 방법을 사용해야 합니다. 이는 이번 주제의 범위를 넘어서고 다룰 양 또한 많기 때문에 [참고1. 글자 세로 가운데 정렬하는 방법] 포스트에서 다루겠습니다.

[2] 8가지 정렬 선

8가지 선 + line-height

아래 그림 Figure 1처럼 vertical-align이 취할 수 있는 프로퍼티 값은 대표적으로 top, text-top, super, middle, baseline, sub, text-bottom, bottom을 가질 수 있습니다. 이러한 설정값에 따라 글자들은 top, text-top, super, middle, baseline, sub, text-bottom, bottom 정렬선에 위치하게 됩니다.
　[ inline box와 정렬선의 관계 ] 줄의 상/하단은 text-top과 text-bottom 정렬선에 해당합니다. Figure 1을 보면 글자들을 감싸는 최외각 선이 text-top과 text-bottom 정렬선에 해당하는 것을 볼 수 있습니다. 글자체와 글자크기가 결정되어 출력되면, 글자들의 상단과 하단에 맞는 text-top과 text-bottom 정렬선이 생성되고, 그 안에 super, middle, baseline, sub 정렬선들이 위치하게 됩니다. 앞에서 inline box는 줄의 표시된 크기와 같다고 했는데, 좀 더 자세히 말하자면 inline box의 상/하단은 text-top과 text-bottom 정렬선과 일치합니다. 참고로 inline 요소의 padding을 적용하게 되면, text-top과 text-bottom 정렬선 위아래로 여백을 넣을 수 있습니다.
　[ line-height와 정렬선의 관계 ] top과 bottom 정렬선은 다른 정렬선들과는 다르게 조금 특별합니다. i) 먼저 top과 bottom 정렬선의 위치는 line-height 프로퍼티를 이용하여 그 위치를 변경할 수 있습니다. Figure 1에서는 top과 bottom 정렬선을 inline-box 바깥쪽으로만 표시하였지만, line-height를 이용하여 심지어 inline-box의 안쪽으로도 위치시킬 수 있습니다. ii) top과 bottom 정렬선의 폭은 줄이 실제적으로 차지하는 공간에 해당합니다. 자세한 내용은 아래 예제들과 함께 설명드리겠습니다.
　[ inline box와 line-height의 관계 ] line-height는 글자 대비하여 위 아래로 크기가 조절되기 때문에, 줄은 line-height의 가운데에 위치하게 됩니다. (물론 가운데 정렬의 위치에 변화를 줄 수 있습니다. 아래 예제에서 다룰 예정입니다.) 이 특성을 잘 이용하면, 간단한 방법으로도 줄을 부모 요소의 수직 가운데로 정렬 시킬 수 있는데, 자세한 내용은 [참고1. 글자 세로 가운데 정렬하는 방법] 포스트에 다루겠습니다.

Ég 문자 사용 – 줄의 표시된 높이 확인

block 요소 안에서 “줄의 크기”를 확인하기 위해, 앞 예제 [1.2]에서 사용 했던 방법은 글자를 inline 요소(span 요소)로 둘러 싸서 inline box를 생성하였습니다. inline box = 줄의 (표시된) 크기를 기억해주세요. 하지만 경우에 따라서는 span 요소 없이, block 요소 안에 글자가 바로 들어가야 할 때도 있습니다. 이런 경우에는 inline box 방법으로 줄의 높이를 확인할 수 없습니다. 이럴 때 사용할 수 있는 유용한 방법은 상강문자 Latin capital letter E (É)와 하강문자 g를 사용하는 것입니다.

무슨 말인가를 알아보기 위해, 앞 예제 [1.1]의 코드를 그대로 가져와서 “hello world”를 출력해 보겠습니다. 아래 결과에서 “hello world” 글자의 상단/하단과 inline box 사이에 빈 공간이 있음을 확인해 주시기 바랍니다. 글자가 inline box에 바로 붙지 않고, 왜 이런 여백을 만들었을까요?

특히 한국어를 사용하는 우리에게는 이러한 여백의 존재 이유가 쉽게 납득이 안 될 수 있습니다. 하지만 다른 나라 언어들을 보시면 왜 이렇게 디자인 되었는지를 이해할 수 있는데, 예를 들어 영어 알파벳들을 보시면 (hello world와 같은) 일반 문자 외에도 하강 문자(descenter, g, y와 같은 문자)와 상강 문자(ascenter, É)가 존재합니다. 하강 문자들은 일반 문자들보다 아래로 꼬리가 길게 내려가는 반면, 상강 문자들은 일반 문자들보다 위로 올라갑니다. 아래에 “hello Ég”를 출력해보겠습니다. 상강 문자 É의 윗 꼭지(‘)가 일반 문자(hello world)보다 위에 위치하여 inline box에 접하고 있음을 볼 수 있고, 하강 문자 g의 아래 꼬리는 일반 문자보다 밑으로 내려가서 inline box에 접함을 볼 수 있습니다. 이러한 이유로 상강문자와 하강문자들이 존재하는 언어에서는 일반 문자들 위아래로 여백을 줄 수 밖에 없습니다.

혹시 이런 경험을 하신적이 있으신가요? 한국어와 영어의 글자 크기를 같게 했는데, 한국어가 더 크게 보이는 현상?! 아래 출력 결과를 확인해 보시면, 한국어 글자체가 어떻게 디자인 되었는지 확인할 수 있습니다. 한국어 글자체는 “맑은 고딕”으로 작성하였습니다. 한국어에는 상강문자와 하강문자가 없기 때문에, 따로 빈공간을 크게 두지 않고 글자체를 디자인 하였습니다. 이러한 이유로 한국어가 영어보다 크게 보이는 것입니다.

마지막으로 글자가 어떻게 정렬선에 위치하는가는 “글자체”에 달렸습니다. 즉, 글자체가 애초에 어떻게 디자인되었는지에 따라 결정됩니다. 같은 글씨체로 설정하였더라도, 해당 글자체가 없다면 다른 글자체로 표시되게 되고, 이런 경우에는 글자체 여백이 달라질 수 있습니다. 예를 들어, 영어 글자체를 arial로 작성하였는데, 컴퓨터와 안드로이드 폰에서 여백이 다르게 표시될 수도 있습니다. 왜냐하면, 안드로이드 운영체제에서는 (현시점에서는) arial 글자체가 없기 때문에 다른 글자체로 출력되고, 글자들의 정렬이 다르게 되어 있을 수 있습니다. 만약 여백이 생각한 것과 다르게 나온다면, 첫 번째로 생각해볼 것이 padding: 0으로 설정되어 있는지 알아보고, 그것도 아니라면 다른 글자체로 출력된 가능성이 큽니다.

[2.1] line-height

예제 목표

이번 예제에서는 다음과 같은 line-height의 개념을 이해합니다. line-height는 (Figure 1) top 선과 bottom 선의 위치를 변경할 때 사용합니다. 글자가 입력되면, 글자체가 디자인된 대로 inline box 안의 정렬선(text-top, super, middle, baseline, sub, text-bottom)들의 위치가 결정됩니다. 다시 말해서, 우리가 따로 이 정렬선들의 위치를 변경할 수는 없습니다. 이와는 대조적으로 top과 bottom 정렬선은 line-height 프로퍼티를 이용하여 변경할 수 있습니다. 재미있는 점은 이 두 선을 inline box 안쪽으로도 위치시킬 수 있다는 것입니다. 이런 경우 어떤 일이 벌어질까요? “표시되는 글자(=inline box)”보다 “줄의 실제 크기(=line-height)”가 더 작기 때문에, 글자들이 다른 요소들과 겹쳐서 표시 될 수 있습니다. 처음 접하면 헷갈릴 수 있는 개념인데, “보여지는 것”과 “실제로 차지하는 공간”은 다르다는 것을 이해하는게 중요합니다. 지금은 무슨 말인지 헷갈릴 수 있는데, 아래에서 예제들과 다룰 예정이니 지금은 그냥 넘어가셔도 됩니다.

전체 코드

먼저 전체코드의 결과를 보겠습니다. 아래 코드처럼 작성하고, .outer의 CSS 파트에서 line-height의 값을 변경하면서 top과 bottom 선의 위치가 어떻게 바뀌는지 확인해보겠습니다.

결과 설명

결과에 대한 설명은 아래 카드를 넘기면서 단계적으로 볼 수 있습니다.

• 구현 목표
  • line-height: 2로 설정하였을 때, top과 bottom 정렬선이 text-top과 text-bottom 정렬선보다 약 2배 밖에 위치하는지 확인해 보겠습니다.
  • 　앞에서 line-height는 “줄이 실제로 차지하는 공간”이고, inline box는 “줄이 표시되는 크기”라고 설명드렸는데, 이 말이 무슨 뜻인지 확인합니다.
• <div class=”wrapper”></div>
  • 먼저 코드 아래 부분에 위치한 HTML 파트를 보겠습니다. 항상 먼저 래퍼를 만들고, 그 안에 원하는 HTML 요소들을 넣습니다. 래퍼를 사용하면 요소를 정렬하는 면에서 관리가 편리해집니다.
  • 　아래 CSS 설명에서 다시 언급하겠지만, div의 display 프로퍼티를 inline-block으로 바꿔줌으로써, 테두리(즉, inline-block box)의 크기를 내부에 들어 있는 요소들의 크기에 맞게 축소시킬 수 있습니다. 이번 예제에서는 줄의 실제 차지하는 크기를 확인하기 위해 inline-block box를 이용하겠습니다.
• <span class=”outer”>Ég<span>
  • span 요소를 생성하고, 그 안에 “Ég” 글자를 넣습니다. span은 inline box를 만들기 위해 넣었고, inline box는 줄의 (표시된) 크기를 시각화합니다.
• .wrapper의 CSS
  • max-width와 margin과 같은 래퍼의 기본 프로퍼티를 작성합니다. 관련된 자세한 내용은 [참고2. 래퍼의 기본 개념과 설정방법] 포스트에서 다루고 있습니다.
  • display: inline-block; 기본으로 설정된 block 속성을 inline-block 속성으로 바꿔줍니다. block과는 다르게 inline-block은 너비(width)가 내용물에 맞게 축소되어지기 때문에, 내용물의 크기(줄의 실제 크기)를 확인할 때 사용할 수 있습니다.
  • border: 1px dotted blue; 테두리선을 1px 두께의 파란색 점선으로 표시함으로써 내용물의 크기를 시각화합니다.
• .outer의 CSS
  • font-family: “New Times Roman”; 글자체를 New Times Roman으로 설정합니다.
  • font-size: 100px; 글자의 크기를 100px로 설정합니다.
  • border: 1px solid black; 테두리선을 두께가 1px인 검정색 실선으로 설정합니다. 줄의 크기를 표시하는 inline box를 시각화합니다.
  • line-height: 2; line-height를 2로 설정합니다. 단위 없이 숫자만 입력하면, 글자 크기의 배수에 해당합니다.
• 구현 결과
  • 외각에 있는 inline-block box(파란색 점선)와 내부에 있는 inline box(검정색 실선)를 비교해 주시기 바랍니다. 앞 예제들과 동일하게 inline box는 글자가 속해 있는 줄을 표시하고 있습니다. 만약 줄의 크기가 inline box와 같다면, inline-block box 또한 inline box와 동일한 크기를 가져야 합니다. 하지만 line-height: 2로 설정하여 줄을 2배크게 만들었기 때문에, inline-block box는 2배 만큼 커진 줄에 맞게 크기가 설정됩니다.
  • 　따라서 line-height는 줄이 차지하는 실제 공간을 설정하고, inline box는 줄이 표시되는 공간을 나타냅니다.

• 구현 목표
  • line-height: 0.5을 입력했을 때, top과 bottom 정렬선이 text-top과 text-bottom 정렬선보다 약 절반 안에 위치하는지 확인해 보겠습니다.
• .outer의 CSS
  • line-height 외의 코드는 앞 카드의 코드와 동일합니다.
  • line-height: 0.5; line-height를 0.5로 설정하여, top과 bottom선을 글자 대비 0.5배 안 쪽으로 넣어 보겠습니다. 다시 말해서 inline box 안에 위치하게 됩니다.
• 구현 결과
  • 이번에도 마찬가지로 외각의 inline-block box(파란색 점선)와 inline box(검정색 실선)를 비교해 주시기 바랍니다. 재미있게도 inline-block box가 inline box 안에 위치하였습니다. line-height: 0.5로 설정하여 줄의 실제 크기를 글자 대비 0.5로 작게 만들었고, 이로 인해 inline-block box는 작아진 줄의 실제 크기를 둘러싸게 된 것입니다.
  • 　그렇다면, 만약에 span.outer 요소 다음에 다른 요소가 존재한다면, 그 요소는 inline box 다음에 위치하는 것이 아니라 현재 결과에서 보여지는 inline-block box 다음에 위치하게 될 것입니다. 즉, 줄과 겹쳐지는 현상이 발생할 것입니다. 이는 다음 카드에서 예제와 함께 설명드리겠습니다.

• 구현 목표
  • line-height: 0.5을 입력하였을 때, 뒤 따라 오는 요소는 줄과 겹쳐지는 것을 확인합니다.
• <div class=”next”><div>
  • 먼저 코드 아래 쪽에 위치한 HTML 파트를 보겠습니다. span.outer 요소 다음에 새로운 요소 div를 추가합니다. 이 div 요소가 앞 줄에 겹쳐서 표시되는 것을 보일 예정입니다.
• .next의 CSS
  • width: 100px; 너비를 100px로 설정합니다.
  • height: 100px; 높이를 100px로 설정합니다.
  • background-color: coral; 배경 색깔을 coral 색으로 설정하여 요소 크기를 시각화합니다.
• 구현 결과
  • 편의상 div.next를 coral box라 부르겠습니다. coral box가 줄과 겹쳐져 있음을 확인해 주시기 바랍니다. 다시 반복해서 설명드리지만, inline box는 글자가 표시되는 줄을 나타내는 개념이고 이것은 실제적인 줄의 크기가 아닙니다. 줄의 실제 크기는 line-height로 설정된 top과 bottom 정렬선이 해당합니다. 여기서는 line-height: 0.5로 설정하였기 때문에, inline box보다 약 0.5배 안쪽에 줄이 실제로 존재합니다. 따라서 다음에 따라 오는 coral box는 표시된 줄보다 안 쪽에 위치하게 되는 것입니다.
  • 　inline-block box (파란색 점선)는 내용물의 크기에 맞게 축소되기 때문에, 줄이 실제로 시작하는 0.5 배 안쪽에서부터 coral box까지 포함하는 영역에 표시됩니다.

[2.2] top

예제 목표

vertical-align: top;으로 설정하였을 때, 글자의 top 정렬선이 부모 요소의 top 정렬선에 위치함을 확인합니다.

전체 코드

먼저 전체코드와 결과를 보겠습니다.

결과 설명

결과에 대한 설명은 아래 카드를 넘기면서 단계적으로 볼 수 있습니다.

• 구현 목표
  • HTML 파트를 작성합니다.
• <div class=”wrapper”></div>
  • 항상 먼저 래퍼를 만들어 주고, 원하는 HTML 요소들을 안에 넣어 줍니다. 요소들을 정렬하는 면에서 관리가 편리해집니다.
• <span class = “outer”>Ég<span class = “inner1”>Ég</span><span class = “inner2”>Ég</span><span class = “inner3”>Ég</span></span>
  • span.outer 아래에 3 개의 span.inner1~3을 넣었습니다. 각각의 span은 모두 글자 “Ég”를 가지고 있습니다. 나중에 span.inner1~3 요소에 vertical-align: top을 적용하여, 글자들이 top 정렬선에 어떻게 위치하는지 확인해 볼 예정입니다.
• 구현 결과
  • 아직 CSS를 설정하지 않았기 때문에, ÉgÉgÉgÉg 글자만 출력됩니다.

• 구현 목표
  • 이번에는 CSS 파트를 작성해 보겠습니다.
• .wrapper의 CSS
  • 래퍼의 기본 프로퍼티를 작성합니다. 이렇게 설정하는 이유는 [참고2. 래퍼의 기본 개념과 설정방법] 포스트에서 다루고 있으므로 기본 프로퍼티에 대한 설명은 생략합니다.
  • dispaly: inline-block; .wrapper를 inline-block으로 설정해줍니다. 앞 예제들과 같이 inline-block box로 바꿔주는 이유는 내용물 크기에 맞게 div.wrapper를 축소시키고, 자식 요소들의 크기를 시각화하기 위해서입니다.
  • border: 1px dotted blue; 테두리선을 1px 두께의 파란색 점선으로 설정합니다.
• .outer의 CSS
  • font-family: “Times New Roman”; 글자체를 Times New Roman로 설정합니다.
  • font-size: 100px; 바깥 span의 글자 크기를 100px로 설정합니다.
  • border: 1px solid black; 테두리선을 1px 두께의 검정색 실선으로 설정합니다. span.outer의 테두리는 inline box이기 때문에, 내부의 줄을 표시합니다.
  • line-height: 200px; 줄의 높이를 200px로 설정합니다. 단위를 적지 않으면 글자 크기 대비하여 상대적으로 줄 높이가 결정된다면, 단위(px)를 넣어주게 되면 절대값으로 줄 높이를 설정할 수 있습니다. 위에서 글자 크기를 100px로 설정하였고 여기서 line-height가 200px로 설정하였기 때문에, 줄은 글자 크기의 2배가 됩니다.
• .inner1, .inner2, .inner3의 CSS
  • span.inner1, span.inner2와 span.inner3 요소들의 공통적인 스타일을 지정합니다.
  • line-height: 2; span.inner1~3 요소들의 “줄의 실제 높이”를 글자 크기의 2배로 지정합니다. 이렇게 지정함으로써 top 정렬선이 text-top 정렬선 보다 약 2배 위에 위치하게 됩니다.
  • vertical-align: top; span.inner1~3 요소들의 글자들을 부모요소(span.outer)의 top 정렬선에 위치시킵니다.
• .inner1의 CSS
  • font-size: 40px; span.inner1의 글자 크기를 40px로 지정합니다.
• .inner2의 CSS
  • font-size: 20px; span.inner1의 글자 크기를 20px로 지정합니다.
• .inner3의 CSS
  • font-size: 10px; span.inner1의 글자 크기를 10px로 지정합니다.
• 구현 결과
  • 첫 번째 Ég는 부모요소 span.outer에 해당하고, 2~4번째 Ég는 span.inner1~3에 해당합니다. 이해를 돕고자, 각각의 Ég들의 top 정렬선을 빨간 선으로 표시했습니다. span.inner1~3의 line-height를 2로 설정하였기 때문에 글자크기의 두 배 만큼 위에 top 정렬선이 생깁니다. 이를 염두에 두고 결과를 보면, span.inner1~3의 top 정렬선들이 부모요소 span.outer의 top 정렬선과 일치하고 있음을 알 수 있습니다. 따라서 vertical-align: top은 글자들의 top 정렬선을 부모요소의 top 정렬선에 일치시키는 것이라 할 수 있습니다.

[2.3] text-top

예제 목표

vertical-align: text-top;으로 설정하였을 때, 글자의 top 정렬선이 부모 요소의 text-top 정렬선에 위치함을 확인합니다.

전체 코드

먼저 전체코드와 결과를 보겠습니다.

결과 설명

결과에 대한 설명은 아래 카드를 넘기면서 단계적으로 볼 수 있습니다.

• 구현 목표
  • vertical-align: text-top로 설정했을 때, 글자들이 어떻게 정렬되는지 확인해 보겠습니다.
• .inner1, .inner2, .inner3의 CSS
  • 이 부분을 제외한 모든 코드는 [2.2] top의 예제와 동일하므로 설명을 생략하겠습니다.
  • vertical-align: text-top; span.inner1~3들의 글자들을 부모요소 span.outer의 text-top 정렬선에 맞춥니다.
• 구현 결과
  • 첫 번째 Ég는 부모요소 span.outer에 해당하고, 2~4번째 Ég는 span.inner1~3에 해당합니다. 이해를 돕고자, span.outer의 text-top 정렬선을 파란 선으로, span.inner1~3의 top 정렬선을 빨간 선으로 표시했습니다. span.inner1~3의 line-height를 2로 설정하였기 때문에 글자크기의 두 배 만큼 위에 top 정렬선이 생깁니다. 이를 염두에 두고 결과를 보면, span.inner1~3의 top 정렬선들이 부모요소 span.outer의 text-top 정렬선과 일치하고 있음을 알 수 있습니다. 따라서 vertical-align: text-top은 글자들의 top 정렬선을 부모요소의 text-top 정렬선에 일치시키는 것이라 할 수 있습니다.

[2.4] super

예제 목표

vertical-align: super;으로 설정하였을 때, 글자들이 어떻게 윗 첨자가 되는지 메커니즘을 이해합니다. 글자의 baseline 정렬선이 부모 요소의 super 정렬선에 위치합니다.

전체 코드

먼저 전체코드와 결과를 보겠습니다.

결과 설명

결과에 대한 설명은 아래 카드를 넘기면서 단계적으로 볼 수 있습니다.

• 구현 목표
  • vertical-align: super로 설정했을 때, 글자들이 어떻게 정렬되는지 확인해 보겠습니다.
• .inner1, .inner2, .inner3의 CSS
  • 이 부분을 제외한 모든 코드는 [2.2] top의 예제와 동일하므로 설명을 생략하겠습니다.
  • vertical-align: super; span.inner1~3들의 글자들을 부모요소 span.outer의 super 정렬선에 맞춥니다.
• 구현 결과
  • 첫 번째 Ég는 부모요소 span.outer에 해당하고, 2~4번째 Ég는 span.inner1~3에 해당합니다. 이해를 돕고자, span.outer의 super 정렬선을 파란 선으로, span.inner1~3의 baseline 정렬선을 빨간 선으로 표시했습니다. 이를 염두에 두고 결과를 보면, span.inner1~3의 baseline 정렬선들이 부모요소 span.outer의 super 정렬선과 일치하고 있음을 알 수 있습니다. 따라서 vertical-align: super는 글자들의 baseline 정렬선을 부모요소의 super 정렬선에 일치시키는 것이라 할 수 있습니다.

[2.5] middle

예제 목표

vertical-align: middle;으로 설정하였을 때, 글자의 super 정렬선이 부모 요소의 middle 정렬선에 위치함을 확인합니다.

전체 코드

먼저 전체코드와 결과를 보겠습니다.

결과 설명

결과에 대한 설명은 아래 카드를 넘기면서 단계적으로 볼 수 있습니다.

• 구현 목표
  • vertical-align: middle로 설정했을 때, 글자들이 어떻게 정렬되는지 확인해 보겠습니다.
• .inner1, .inner2, .inner3의 CSS
  • 이 부분을 제외한 모든 코드는 [2.2] top의 예제와 동일하므로 설명을 생략하겠습니다.
  • vertical-align: middle; span.inner1~3들의 글자들을 부모요소 span.outer의 middle정렬선에 맞춥니다.
• 구현 결과
  • 첫 번째 Ég는 부모요소 span.outer에 해당하고, 2~4번째 Ég는 span.inner1~3에 해당합니다. 이해를 돕고자, span.outer의 middle 정렬선을 파란 선으로, span.inner1~3의 super 정렬선을 빨간 선으로 표시했습니다. 이를 염두에 두고 결과를 보면, span.inner1~3의 super 정렬선들이 부모요소 span.outer의 middle 정렬선과 일치하고 있음을 알 수 있습니다. 따라서 vertical-align: middle는 글자들의 super 정렬선을 부모요소의 middle 정렬선에 일치시키는 것이라 할 수 있습니다.

[2.6] baseline

예제 목표

vertical-align: baseline;으로 설정하였을 때, 글자의 baselilne 정렬선이 부모 요소의 baseline 정렬선에 위치함을 확인합니다.

전체 코드

먼저 전체코드와 결과를 보겠습니다.

결과 설명

결과에 대한 설명은 아래 카드를 넘기면서 단계적으로 볼 수 있습니다.

• 구현 목표
  • vertical-align: baseline로 설정했을 때, 글자들이 어떻게 정렬되는지 확인해 보겠습니다.
• .inner1, .inner2, .inner3의 CSS
  • 이 부분을 제외한 모든 코드는 [2.2] top의 예제와 동일하므로 설명을 생략하겠습니다.
  • vertical-align: baseline; span.inner1~3들의 글자들을 부모요소 span.outer의 baseline정렬선에 맞춥니다.
• 구현 결과
  • 첫 번째 Ég는 부모요소 span.outer에 해당하고, 2~4번째 Ég는 span.inner1~3에 해당합니다. 이해를 돕고자, span.outer와 span.inner1~3의 baseline 정렬선들을 모두 빨간 선으로 표시했습니다. 이를 염두에 두고 결과를 보면, span.inner1~3의 baseline 정렬선들이 부모요소 span.outer의 baseline 정렬선과 일치하고 있음을 알 수 있습니다. 따라서 vertical-align: baseline는 글자들의 baseline 정렬선을 부모요소의 baseline 정렬선에 일치시키는 것이라 할 수 있습니다.

[2.7] sub

예제 목표

vertical-align: sub;으로 설정하였을 때, 글자들이 어떻게 아래 첨자가 되는지 메커니즘을 이해합니다. 글자의 baseline 정렬선이 부모 요소의 sub 정렬선에 위치합니다.

전체 코드

먼저 전체코드와 결과를 보겠습니다.

결과 설명

결과에 대한 설명은 아래 카드를 넘기면서 단계적으로 볼 수 있습니다.

• 구현 목표
  • vertical-align: sub로 설정했을 때, 글자들이 어떻게 아래 첨자가 되는지 확인해 보겠습니다.
• .inner1, .inner2, .inner3의 CSS
  • 이 부분을 제외한 모든 코드는 [2.2] top의 예제와 동일하므로 설명을 생략하겠습니다.
  • vertical-align: sub; span.inner1~3들의 글자들을 부모요소 span.outer의 sub정렬선에 맞춥니다.
• 구현 결과
  • 첫 번째 Ég는 부모요소 span.outer에 해당하고, 2~4번째 Ég는 span.inner1~3에 해당합니다. 이해를 돕고자, span.outer의 sub 정렬선을 파란 선으로, span.inner1~3의 baseline 정렬선들을 빨간 선으로 표시했습니다. 이를 염두에 두고 결과를 보면, span.inner1~3의 baseline정렬선들이 부모요소 span.outer의 sub 정렬선과 일치하고 있음을 알 수 있습니다. 따라서 vertical-align: sub은 글자들의 baseline 정렬선을 부모요소의 sub 정렬선에 일치시키는 것이라 할 수 있습니다.

[2.8] text-bottom

예제 목표

vertical-align: text-bottom;으로 설정하였을 때, 글자의 bottom 정렬선이 부모 요소의 text-bottom 정렬선에 위치함을 확인합니다.

전체 코드

먼저 전체코드와 결과를 보겠습니다.

결과 설명

결과에 대한 설명은 아래 카드를 넘기면서 단계적으로 볼 수 있습니다.

• 구현 목표
  • vertical-align: text-bottom로 설정했을 때, 글자들이 어떻게 정렬되는지 확인합니다.
• .inner1, .inner2, .inner3의 CSS
  • 이 부분을 제외한 모든 코드는 [2.2] top의 예제와 동일하므로 설명을 생략하겠습니다.
  • vertical-align: text-bottom; span.inner1~3들의 글자들을 부모요소 span.outer의 text-bottom 정렬선에 맞춥니다.
• 구현 결과
  • 첫 번째 Ég는 부모요소 span.outer에 해당하고, 2~4번째 Ég는 span.inner1~3에 해당합니다. 이해를 돕고자, span.outer의 text-bottom 정렬선을 파란 선으로, span.inner1~3의 bottom 정렬선들을 빨간 선으로 표시했습니다. 이를 염두에 두고 결과를 보면, span.inner1~3의 bottom 정렬선들이 부모요소 span.outer의 text-bottom 정렬선과 일치하고 있음을 알 수 있습니다. 따라서 vertical-align: text-bottom은 글자들의 bottom 정렬선을 부모요소의 text-bottom 정렬선에 일치시키는 것이라 할 수 있습니다.

[2.9] bottom

예제 목표

vertical-align: botoom;으로 설정하였을 때, 글자의 bottom 정렬선이 부모 요소의 bottom 정렬선에 위치함을 확인합니다.

전체 코드

먼저 전체코드와 결과를 보겠습니다.

결과 설명

결과에 대한 설명은 아래 카드를 넘기면서 단계적으로 볼 수 있습니다.

• 구현 목표
  • vertical-align: bottom로 설정했을 때, 글자들이 어떻게 정렬되는지 확인합니다.
• .inner1, .inner2, .inner3의 CSS
  • 이 부분을 제외한 모든 코드는 [2.2] top의 예제와 동일하므로 설명을 생략하겠습니다.
  • vertical-align: bottom; span.inner1~3들의 글자들을 부모요소 span.outer의 bottom 정렬선에 맞춥니다.
• 구현 결과
  • 첫 번째 Ég는 부모요소 span.outer에 해당하고, 2~4번째 Ég는 span.inner1~3에 해당합니다. 이해를 돕고자, span.outer과 span.inner1~3의 bottom 정렬선들을 모두 빨간 선으로 표시했습니다. 이를 염두에 두고 결과를 보면 span.inner1~3의 bottom 정렬선들이 부모요소 span.outer의 bottom정렬선과 일치하고 있음을 알 수 있습니다. 따라서 vertical-align: bottom은 글자들의 bottom 정렬선을 부모요소의 bottom 정렬선에 일치시키는 것이라 할 수 있습니다.

참고

[1] 글자 세로 가운데 정렬하는 방법
[2] 래퍼의 개념과 설정방법