"css" 태그로 연결된 1개 게시물개의 게시물이 있습니다.

CSS로 line-spacing을 구현하는 방법

2024년 10월 31일 · 약 4분

Front End Engineer @ Line+

Introduction

CSS에서는 줄 간격을 조정하는데 line-height를 사용한다. 하지만 내가 경험했던 프로젝트에서 line-spacing을 지원해야하는 요구사항이 있었다. 이에 대해 CSS로 line-spacing을 구현하는 방법에 대해서 설명하고자 한다.

Line Spacing

Line Gap

Line Spacing (5px)

Line Height

Line Gap

Line Height (fontSize + 5px)

Cheat Sheet

여백이 위, 아래로 나눠서 적용되는 line-height와 달리, line-spacing은 줄 사이에만 여백을 적용한다. 이 때, line-height와의 차이는 줄의 처음과 끝의 여백이 들어가지 않는다는 점이다.

이를 이용해서 margin을 이용하여 line-spacing을 구현할 수 있다.

const lineHeight = 20; // origin line-height
const lineSpacing = 10;
const margin = - (lineSpacing / 2);

const LineSpacingText = () => {
  return (
    <p style={{
      marginTop: `${margin}px`,
      marginBottom: `${margin}px`,
      lineHeight: `${lineHeight + lineSpacing}px`,
    }}>
      Hello, World!
    </p>
  );
};

Playground

Select Spacing

Line Spacing 0px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.

Line Spacing (0px)

Line Height (0px + fontSize)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.

Line Height (0px + fontSize)

Introduction​

Line Spacing

Line Height

Cheat Sheet​

Playground​

Line Spacing 0px

Line Height (0px + fontSize)

Introduction

Cheat Sheet

Playground