HTML&CSS 시작하기

3. 텍스트 · 상속

CSS Text

웹페이지의 인상을 결정하는 3대 요소 중 하나는 '텍스트'입니다. 이 글에서는 한글 웹폰트의 표준이 되었다고 해도 과언이 아닌 글꼴인 프리텐다드(Pretendard) 적용 방법부터, 글자를 다루는 핵심 속성인 font-weight, font-size, text-align, line-height(행간), letter-spacing(자간)까지 순서대로 정리합니다.

한글 웹폰트 프리텐다드 적용하기

프리텐다드 GitHub에 접속합니다.
가변 글꼴 항목의 CSS 코드와, "어디서든 동일한 환경을 가지고자 한다면"에 있는 font-family 구성을 복사해 body에 적용합니다.

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

body {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

@import가 CDN에서 폰트를 불러오고, font-family가 사용할 글꼴을 지정합니다. 뒤에 길게 나열된 글꼴들은 프리텐다드 로딩에 실패했을 때 순서대로 대신 쓸 예비 글꼴 목록입니다. body에 한 번만 적용하면 페이지의 모든 텍스트에 적용되는데, 그 이유는 다음 편에서 다룰 CSS 상속 때문입니다.

font-weight - 폰트의 두께(중량)

100단위로 두께를 표시할 수 있으며, 노토 산스와 프리텐다드의 경우 아래와 같습니다.

Thin 100 / ExtraLight 200 / Light 300
Regular 400 / Medium 500 / SemiBold 600
Bold 700 / ExtraBold 800 / Black 900

값으로 숫자(700) 외에 키워드(bold)도 쓸 수 있습니다. 피그마의 웨이트 이름(Medium, SemiBold...)과 숫자가 일대일로 대응하므로, 시안에서 Medium을 봤다면 코드에서는 font-weight: 500입니다.

축약 입력: fw + Tab

font-size - 폰트 크기

단위는 px, em, rem 등을 사용합니다. 지금 단계에서는 피그마 시안의 px 값을 그대로 옮기면 됩니다.

축약 입력: fz + Tab

px, em, rem 차이

px만 알아도 시작할 수 있지만, 남의 코드를 읽는 순간부터 em과 rem을 만나게 됩니다. 세 단위의 기준점이 각각 무엇인지만 정확히 알면 헷갈릴 일이 없습니다.

px — 절대 단위

font-size: 16px은 어디에 쓰든 항상 16px입니다. 주변 상황의 영향을 받지 않아 직관적이고, 피그마 시안의 숫자를 그대로 옮길 수 있어 입문 단계에 적합합니다.

em — 부모의 font-size 기준 상대 단위

1em = 부모 요소의 font-size입니다. 부모가 20px이면 자식의 font-size: 1.5em은 20 × 1.5 = 30px이 됩니다.

div {
    font-size: 20px;
}
div p {
    font-size: 1.5em;   /* 20px × 1.5 = 30px */
}

em의 함정은 중첩되면 곱해진다는 점입니다. 부모를 기준으로 삼기 때문에, 같은 1.2em이라도 얼마나 깊이 중첩됐느냐에 따라 실제 크기가 달라집니다.

li {
    font-size: 1.2em;
}

<ul>
    <li>1단계: 16px × 1.2 = 19.2px
        <ul>
            <li>2단계: 19.2px × 1.2 = 23.04px
                <ul>
                    <li>3단계: 23.04px × 1.2 = 27.6px (계속 커짐)</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

같은 코드인데 목록이 중첩될수록 글자가 눈덩이처럼 커집니다. em으로 전체 크기를 관리하려다 예상 밖의 크기를 만나는 이유가 대부분 이 복리 계산 때문입니다.

rem — html(루트)의 font-size 기준 상대 단위

rem은 root em의 약자로, 기준이 부모가 아니라 문서의 뿌리인 html 요소 하나뿐입니다. html의 font-size 기본값은 16px이므로, 별도 설정이 없다면 1rem = 16px입니다.

h1 {
    font-size: 2rem;      /* 16px × 2 = 32px */
}
p {
    font-size: 1rem;      /* 16px */
}
small {
    font-size: 0.875rem;  /* 14px */
}

기준이 하나로 고정돼 있어 아무리 깊이 중첩돼도 크기가 변하지 않습니다. em의 복리 문제가 없는 것입니다. 계산법도 단순합니다. 원하는 px ÷ 16 = rem. 피그마 시안이 24px이면 24 ÷ 16 = 1.5rem입니다.

그런데 왜 굳이 rem을 쓰나

px로 다 되는데 실무에서 rem이 표준처럼 쓰이는 이유는 두 가지입니다.

첫째, 접근성입니다. 시력이 불편한 사용자는 브라우저 설정에서 기본 글꼴 크기를 16px보다 크게 키워둡니다. rem으로 작성된 사이트는 이 설정을 따라 글자가 함께 커지지만, px로 고정된 사이트는 사용자가 아무리 설정을 바꿔도 크기가 px로 고정됩니다.

둘째, 전체 스케일 조절입니다. 모든 크기가 html 하나를 기준으로 삼기 때문에, html의 font-size만 바꾸면 사이트 전체 글자가 비율대로 커지고 작아집니다. 반응형에서 모바일 글자 크기를 일괄 조절할 때 주로 사용합니다.

html { font-size: 16px; }   /* 1rem = 16px */

@media (max-width: 768px) {
    html { font-size: 14px; }   /* 모바일에서 1rem = 14px, 전체가 축소됨 */
}

정리 — 언제 무엇을 쓰나

입문·연습 단계: px. 시안 값을 그대로 옮기며 감각을 익힙니다.
실무 본문·제목: rem. 접근성과 유지보수의 표준입니다.
컴포넌트 내부의 상대 크기(버튼 글자에 비례하는 아이콘 등): em. 부모 따라 커지는 성질을 의도적으로 이용할 때만 씁니다.

지금 단계에서는 px은 고정, em은 부모, rem은 html만 기억해 두면 됩니다.

text-align - 글씨 정렬

left(왼쪽), center(가운데), right(오른쪽) 값으로 텍스트를 정렬합니다. 블록 요소 안에서 텍스트가 정렬되는 것이므로, 요소 자체를 옮기는 것이 아니라 글줄의 정렬 기준을 바꾸는 속성입니다.

축약 입력: ta + Tab

line-height - 행간

행이 있는 문장인데 line-height(행간)가 설정되지 않으면 읽기 불편할 수 있습니다. 한 줄 한 줄 너무 붙어 있어서 가독성이 떨어집니다. 줄바꿈이 있는 문장인 경우 적절한 행간을 설정하는 것이 좋습니다.

배수를 사용하는 경우

line-height: normal — 기본값
line-height: 150% (= line-height: 1.5) — font-size의 1.5배

font-size에 따라 다르지만 일반적으로 130%~160% 범위 안에서 사용하면 적절합니다.

px를 사용하는 경우

글씨는 행의 크기 안에서 가운데로 정렬됩니다. 이 점을 이용해서 텍스트를 수직 가운데 정렬할 때 line-height를 쓰기도 합니다. 높이 70px인 버튼에 line-height: 70px을 주면 글자가 정확히 세로 중앙에 옵니다.

피그마 시안에서 행간 계산하기

피그마는 행간을 px로 보여주지만(예: line height 24px), CSS에서는 배수로 계산해 사용합니다. 계산식은 line-height ÷ font-size입니다. 시안이 size 16px, line height 24px라면 24/16 = 1.5이므로 150%로 설정합니다.

축약 입력: lh + Tab

letter-spacing - 자간

letter-spacing은 자간(글자 간격)을 조정하는 속성입니다.
값을 증가시키면 자간이 넓어지고, 값을 감소시키면 좁아집니다.

letter-spacing: -3px;   /* 좁게 */
letter-spacing: 10px;   /* 넓게 */

한글은 자간을 살짝 좁혔을 때 읽기 좋은 경우가 많아, 피그마 시안에도 -0.38px 같은 음수 값이 자주 등장합니다. 시안의 letter 값을 그대로 옮기면 됩니다.

축약 입력: ls + Tab

시안 확인 - 텍스트 레이어를 코드로 옮길 때

피그마에서 텍스트 레이어를 선택하면 Typography 패널에 font, weight, size, line height, letter 값이 보입니다. 코드로 옮길 때의 원칙입니다.

텍스트 레이어에서 확인되는 너비와 높이로는 설정하지 않습니다. 텍스트의 크기는 글자 속성이 만드는 결과이지, width/height로 고정할 값이 아닙니다.
기본값(기재 안 해도 되는 값)은 생략합니다. font-weight: 400, font-size: 16px은 브라우저 기본값이라 쓸 필요가 없습니다.
행간은 위의 계산식으로 배수 변환해 옮깁니다.

#CSS텍스트 #프리텐다드 #Pretendard #웹폰트적용 #fontweight #fontsize #em #rem #emrem차이 #lineheight #행간 #letterspacing #자간 #웹퍼블리싱 #CSS기초 #코딩독학

CSS 텍스트 속성 정리 - 프리텐다드 웹폰트 적용, font-weight, line-height, letter-spacing

CSS Text

한글 웹폰트 프리텐다드 적용하기

font-weight - 폰트의 두께(중량)

font-size - 폰트 크기

px, em, rem 차이

text-align - 글씨 정렬

line-height - 행간

letter-spacing - 자간

시안 확인 - 텍스트 레이어를 코드로 옮길 때