06강-글꼴, 텍스트, 리스트, 테이블

글꼴 설계 개념

• 글꼴은 가독성, 브랜드, 성능의 균형으로 설계
• 잘 읽히는지, 사이트 분위기에 맞는지, 빠르게 표시되는지 함께 고려
• 예쁜 글꼴 선택보다 읽기 편한 구조와 로딩 효율이 더 중요
• 글꼴 자체보다 폴백, 줄간격, 렌더링 방식까지 함께 설계

글꼴 관련 주요 속성

• font-family: 글꼴 종류 지정
• font-size: 글자 크기 지정
• font-style: 기울임 여부 지정
• font-variant: 작은 대문자 등 변형 지정
• font-weight: 굵기 지정
• font: 여러 속성을 한 번에 지정하는 단축 속성
• @font-face: 사용자 글꼴 지정

글꼴 설정 실무 핵심

• 단일 글꼴 지정이 아니라 폴백 글꼴까지 함께 설계
• font 단축 속성을 중심으로 사용
• line-height와 함께 조합해 가독성 확보
• 웹폰트 사용 시 로딩 전략과 포맷까지 고려

font-family 개념

의미

• 글꼴의 종류를 지정하는 속성

예

• "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif

특징

• 앞에서부터 순서대로 적용 시도
• 사용자의 환경에 폰트가 없으면 다음 폰트로 대체
• 마지막에는 일반 계열 글꼴 지정 권장

폴백 글꼴 설계

의미

• 지정한 폰트가 없을 때를 대비해 여러 글꼴을 순서대로 적는 방식

활용

• 웹폰트 로딩 실패 대비
• 운영체제별 폰트 차이 대응
• 한글과 영문 혼용 환경 대응

효과

• 폰트 미지원 상황에서도 안정적인 표시 가능
• 레이아웃 붕괴 가능성 감소
• 사용자 환경 차이에 유연하게 대응

system-ui 개념

의미

• 현재 사용자의 운영체제 기본 인터페이스 폰트를 자동 적용하는 값

특징

• 별도 웹폰트 다운로드 없이 빠르게 표시
• OS 환경과 자연스럽게 어울림
• 성능 측면에서 유리

가변 폰트 개념

의미

• 하나의 폰트 파일 안에 여러 굵기와 스타일 정보를 포함한 폰트

특징

• 파일 수 감소
• 굵기 조절 범위가 넓음
• 세밀한 표현 가능

장점

• 성능에 유리
• 다양한 두께를 자연스럽게 표현 가능
• 디자인 일관성 유지에 도움

웹폰트 사용 방식

대표 방법

• Google Fonts 같은 서비스 사용
• 직접 @font-face로 불러오기

font-size 개념

의미

• 글자 크기를 지정하는 속성

대표 단위

• 키워드 단위
• 절대 단위
• px
• em
• rem

키워드 크기 단위

예

• small
• medium
• large

특징

• 이해는 쉬움
• 세밀한 제어 어려움

절대 크기 단위

예

• cm
• mm
• in
• pt

특징

• 인쇄용에 가까움
• 웹 화면 설계에는 부적합

px 단위 개념

의미

• 고정된 픽셀 단위로 글자 크기 지정

특징

• 직관적
• 계산 쉬움
• 크기 고정에 유리

주의

• 사용자 설정 반영에 불리할 수 있음
• 접근성 측면에서 제한적

em 단위 개념

의미

• 부모 요소의 글자 크기를 기준으로 하는 상대 단위

특징

• 비율 기반 설계 가능
• 여백이나 내부 비례 조절에 유리
• 중첩되면 계산이 복잡해질 수 있음

활용

• 부모 크기에 따라 함께 커져야 하는 요소
• 버튼 내부 간격
• 문단 내 세부 조정

rem 단위 개념

의미

• 최상위 html 요소의 글자 크기를 기준으로 하는 상대 단위

특징

• 전체 문서 기준으로 일관성 유지 가능
• 계산 구조가 단순

활용

• 본문 글자 크기
• 공통 여백 설계
• 전체 타이포그래피 시스템 구성

rem 기준 설정 방식

방식 1

• html { font-size: 16px; }
• 1rem = 16px 기준 사용

방식 2

• html { font-size: 62.5%; }
• 1rem = 10px처럼 계산하기 쉽게 사용

예

• 1.6rem → 16px
• 1.4rem → 14px
• 2rem → 20px

clamp 함수 활용

의미

• 최소값, 권장값, 최대값을 함께 지정하여 반응형 크기 조절

형식

• clamp(최소값, 권장값, 최대값)

예

• clamp(2rem, 5vw, 4rem)

효과

• 모바일에서 지나치게 작아지는 것 방지
• 큰 화면에서 지나치게 커지는 것 방지
• 제목 크기를 자연스럽게 반응형으로 조절 가능

글자 크기 단위 선택 기준

본문

• rem 사용 권장

제목

• clamp() 활용 권장

여백

• 글자 크기에 비례해야 하면 em, rem 사용

테두리

• 굵기가 고정되어야 하면 px 사용

font-style 개념

의미

• 글자의 기울임 여부 지정

대표 값

• normal
• italic
• oblique

특징

• 강조 표현에 활용
• 지나친 사용은 가독성 저하 가능

font-variant 개념

의미

• 영문자를 작은 대문자 형태 등으로 변형

대표 값

• small-caps

특징

• 한글에는 거의 영향 없음
• 영문 장식 표현에 사용
• 본문보다 메타 정보나 라벨에 제한적으로 활용

font-weight 개념

의미

• 글자의 굵기를 지정

대표 값

• normal
• bold
• 100 ~ 900

기준

• 400: 기본 굵기
• 700: 굵은 글씨

숫자 폭 정렬 기법

의미

• 숫자의 가로 폭을 동일하게 맞춰 정렬하는 방식

대표 속성

• font-variant-numeric: tabular-nums;

활용

• 가격표
• 통계 수치
• 표 데이터
• 세로 정렬이 중요한 숫자 정보

효과

• 숫자 열 정렬이 깔끔해짐
• 표 가독성 향상

font 단축 속성 개념

의미

• 여러 글꼴 속성을 한 줄로 묶어 지정하는 방식

구성

• 스타일
• 변형
• 굵기
• 크기
• 줄간격
• 글꼴 종류

형식

• font: style variant weight size/line-height family;

주의

• font-size와 font-family는 반드시 포함
• line-height는 크기 뒤에 /로 작성
• 생략한 값은 기본값으로 초기화될 수 있음

@font-face 개념

의미

• 사용자 환경에 없는 글꼴을 서버에서 불러와 사용할 수 있게 하는 규칙

필수 항목

• font-family
• src

추가 항목

• font-weight
• font-style
• font-display

활용

• 브랜드 전용 폰트 적용
• 특정 제목용 웹폰트 적용
• 시스템 글꼴로 대체하기 어려운 경우 사용

font-display 설정

대표 값

• swap

의미

• 웹폰트 로딩 전에는 시스템 폰트로 먼저 표시
• 로딩 완료 후 웹폰트로 교체

효과

• 텍스트가 안 보이는 시간 감소
• 사용자 체감 속도 개선

웹폰트 포맷 종류

대표 포맷

• woff2
• woff
• ttf
• otf

특징

• woff2: 최신 웹 표준 중심, 압축 효율 우수
• woff: 구형 브라우저 대응
• ttf, otf: 일반 폰트 파일

텍스트 속성 분류

• 간격 관련 속성
• 정렬 관련 속성
• 장식 관련 속성
• 변형 관련 속성
• 줄바꿈과 말줄임 관련 속성

letter-spacing 개념

의미

• 글자 사이 간격 조절

활용

• 제목 자간 확대
• 본문 자간 미세 조정
• 브랜드 로고 텍스트 조절

word-spacing 개념

의미

• 단어 사이 간격 조절

활용

• 영문 문장 가독성 보정
• 제목 표현 조절
• 강조형 텍스트 조정

특징

• 한글보다 영문에서 더 체감이 큼

line-height 개념

의미

• 줄 간격 지정

특징

• 가독성에 매우 중요
• 단위 없는 숫자 사용 권장
• 현재 글자 크기에 대한 배수로 계산됨

대표 기준

• 영문: 1.4 ~ 1.7
• 한글: 1.5 ~ 1.6

한글 본문 가독성 조합

대표 조합

• font-size: 1.6rem
• line-height: 1.6
• letter-spacing: -0.02em
• word-break: keep-all
• text-align: left

효과

• 읽기 편한 크기 확보
• 줄 간격 안정화
• 한글 자간 미세 보정
• 단어 중간 잘림 방지
• 자연스러운 읽기 흐름 유지

text-indent 개념

의미

• 문단 첫 줄 들여쓰기 지정

활용

• 책 본문 스타일
• 문단 구분 강조
• 긴 설명문 구조화

특징

• 보통 em 단위와 함께 많이 사용

텍스트 숨기기 기법

의미

• 화면에는 보이지 않지만 텍스트 자체는 유지하는 방식

대표 방식

• text-indent: -9999px;

활용

• 배경 이미지 중심 UI
• 스크린리더용 텍스트 유지
• 과거 로고 텍스트 숨김 처리

주의

• 현재는 표준적인 접근성 방식 우선 권장
• 과도한 트릭 사용 지양

text-align 개념

대표 값

• left
• center
• right
• justify

의미

• 텍스트의 가로 정렬 지정

활용

• 본문: left 또는 justify
• 제목: center
• 숫자: right

text-align-last 개념

의미

• 양쪽 정렬 시 마지막 줄의 정렬 방식 지정

활용

• 문단 마지막 줄만 왼쪽 정렬
• 전체 문단 균형 보정

특징

• justify와 함께 사용할 때 의미가 큼

vertical-align 개념

의미

• 인라인 요소나 테이블 셀의 세로 정렬 지정

대표 값

• baseline
• middle
• top
• bottom

주의

• 블록 요소 내부 전체 수직 정렬용은 아님
• 인라인 요소, 인라인 블록, 테이블 셀에서 주로 사용

활용

• 아이콘과 텍스트 높이 맞춤
• 이미지와 글자 기준선 보정
• 표 셀 내부 정렬

text-wrap balance 개념

의미

• 짧은 제목에서 줄 길이를 균형 있게 맞추는 방식

효과

• 제목 줄바꿈이 더 자연스러워짐
• 줄 길이 차이를 줄여 시각적으로 안정적

주의

• 한글에서는 단어 중간 줄바꿈이 어색할 수 있음
• word-break: keep-all과 함께 고려 가능

text-decoration 개념

의미

• 글자에 선 장식을 적용하는 속성

구성 요소

• 선 종류
• 선 모양
• 색상
• 두께

활용

• 링크 밑줄
• 오타 표시
• 강조 밑줄
• 취소선

text-decoration 개별 속성

• text-decoration-line
• text-decoration-style
• text-decoration-color
• text-decoration-thickness

특징

• 개별 조정 가능
• 단축 속성과 함께 이해 필요

오타 표시 스타일

대표 형태

• 밑줄
• 물결선
• 빨간색 강조

활용

• 입력 오류 표시
• 경고 텍스트 표시
• 검토 필요 문장 강조

형광펜 강조 스타일

의미

• 두꺼운 밑줄을 글자와 겹치게 배치해 형광펜처럼 표현하는 방식

활용

• 핵심 문장 강조
• 학습용 하이라이트
• 제목 일부 강조

주의

• 지나치게 두꺼우면 글자 가독성 저하 가능

text-underline-offset 개념

의미

• 밑줄과 글자 사이의 거리 조절

효과

• 기본 밑줄보다 더 보기 좋은 간격 조정 가능
• 링크나 강조 밑줄의 완성도 향상

링크 밑줄 처리 방식

실무 방식

• 기본 밑줄 제거
• 색상, 굵기, hover 상태로 링크임을 표현

효과

• 초기 화면이 깔끔해짐
• 마우스 올렸을 때만 명확히 강조 가능

주의

• 링크라는 사실이 사라지지 않도록 색상이나 상태 표현 필요

취소선 활용 방식

의미

• 글자 중간을 가로지르는 선 표시

활용

• 할인 전 가격
• 완료 처리 항목
• 삭제 예정 정보 표시

대표 속성

• line-through

text-transform 개념

의미

• 영문 텍스트의 대소문자 변환

대표 값

• uppercase
• lowercase
• capitalize

특징

• 한글에는 변화 없음
• 영문 혼합 환경에서 의미 있음

활용

• 제목 강조
• 소문자 통일
• 이름 첫 글자 대문자 처리

text-shadow 개념

의미

• 글자에 그림자를 적용하는 속성

구성

• x축 이동
• y축 이동
• 번짐 정도
• 색상

활용

• 이미지 위 텍스트 가독성 향상
• 강조 텍스트 표현
• 네온사인 스타일 효과

주의

• 렌더링 비용이 있음
• 포인트 요소 중심으로 제한적 사용 권장

이미지 위 텍스트 가독성 확보

방법

• 밝은 글자에 어두운 그림자 추가
• 배경이 복잡한 경우 텍스트 외곽을 부드럽게 보강

효과

• 텍스트 구분이 쉬워짐
• 히어로 영역 제목에 자주 사용

네온 효과 표현 방식

방식

• 여러 개의 그림자를 겹쳐 사용
• 밝은 중심광과 퍼지는 색광 함께 표현

활용

• 이벤트 배너
• 포인트 텍스트
• 장식성 강조 제목

white-space 개념

의미

• 공백, 줄바꿈, 자동 줄바꿈 처리 방식 제어

대표 값

• normal
• nowrap
• pre-wrap

normal 줄바꿈 방식

의미

• 연속 공백은 하나로 처리
• 자동 줄바꿈 허용

특징

• 일반적인 본문 기본값
• 가장 흔하게 사용되는 방식

nowrap 줄바꿈 방식

의미

• 줄바꿈 없이 한 줄 유지

활용

• 버튼 텍스트
• 한 줄 제목
• 말줄임표 처리와 함께 사용

주의

• 영역이 좁으면 넘침 처리 필요

pre-wrap 줄바꿈 방식

의미

• 사용자가 입력한 줄바꿈과 공백을 최대한 유지

활용

• 입력 내용 미리보기
• 사용자 작성 텍스트 표시
• 코드 유사 블록 출력

text-overflow 개념

대표 값

• clip
• ellipsis

의미

• 넘친 텍스트를 자를지 말줄임표로 처리할지 지정

활용

• 카드 설명
• 목록 제목
• 한 줄 요약 정보

한 줄 말줄임표 구성

필수 조합

• white-space: nowrap
• overflow: hidden
• text-overflow: ellipsis

특징

• 세 속성을 함께 써야 정상 동작
• 제목, 파일명, 링크 텍스트 등에 자주 사용

여러 줄 말줄임 처리

의미

• 두 줄 이상 보여준 뒤 말줄임표 처리하는 방식

활용

• 카드형 뉴스 목록
• 상품 설명
• 게시글 미리보기

특징

• 브라우저별 구현 차이 고려 필요

word-break 개념

대표 값

• normal
• break-all
• keep-all

의미

• 단어를 어디서 끊을지 지정

normal 단어 분리 방식

의미

• 기본 줄바꿈 규칙 사용

특징

• 일반적인 문단에서 기본값으로 사용

break-all 단어 분리 방식

의미

• 단어 중간이라도 강제로 끊음

활용

• 긴 URL
• 긴 영문 식별자
• 레이아웃 붕괴 방지

주의

• 가독성이 떨어질 수 있음

keep-all 단어 분리 방식

의미

• 한글 단어가 중간에서 끊기지 않도록 유지

활용

• 한글 본문
• 카드 설명
• 문단 가독성 유지

overflow-wrap 개념

의미

• 긴 단어가 영역을 넘칠 때만 자연스럽게 줄바꿈 허용

대표 값

• break-word

특징

• 무조건 끊는 것보다 가독성이 좋음
• 긴 영어 단어나 URL 처리에 유용

단어 줄바꿈 방식 비교

word-break: break-all

• 더 공격적으로 끊음
• 레이아웃 보호 우선

overflow-wrap: break-word

• 가능하면 단어 유지
• 꼭 필요할 때만 줄바꿈
• 가독성 우선

리스트 관련 주요 속성

• list-style-type
• list-style-position
• list-style-image
• list-style

의미

• 목록 기호의 모양과 위치를 제어
• 순서 목록과 비순서 목록 모두에 적용 가능

list-style-type 개념

의미

• 글머리 기호나 번호 형식 지정

예

• disc
• circle
• square
• decimal
• none

활용

• 기본 불릿 지정
• 숫자 목록 스타일 지정
• 기호 제거

list-style-position 개념

대표 값

• outside
• inside

의미

• 글머리 기호가 텍스트 바깥에 위치할지 안쪽에 위치할지 지정

효과

• 목록 정렬 방식 조정 가능
• 들여쓰기 느낌 변화

list-style-image 개념

의미

• 기본 기호 대신 이미지 사용

특징

• 세밀한 크기 조정 어려움
• 정교한 레이아웃에 불리

리스트 기본 기호 제거 방식

실무 방식

• list-style: none
• padding: 0
• margin: 0

활용

• 메뉴
• 탭 UI
• 커스텀 목록 디자인

효과

• 브라우저 기본 목록 스타일 제거
• 자유로운 재설계 가능

before 커스텀 불릿 방식

의미

• ::before 가상 요소로 원하는 기호를 직접 삽입하는 방식

활용

• 별표 불릿
• 체크 아이콘 불릿
• 브랜드 전용 기호 적용

장점

• 자유도가 높음
• 색상, 위치, 크기 조정 용이

marker 커스텀 불릿 방식

의미

• 리스트의 마커 영역만 직접 제어하는 가상 요소

활용

• 간단한 색상 변경
• 간단한 기호 변경
• 글머리 크기 조정

특징

• ::before보다 간단
• 다만 사용 가능한 속성은 제한적

테이블 사용 원칙

• 테이블은 데이터 표현용으로 사용
• 레이아웃 배치 용도로 사용하는 것은 지양
• 표 구조, 헤더, 본문, 캡션을 구분해 사용하는 것이 중요
• 가독성과 반응형 대응을 함께 고려해야 함

border-collapse 개념

대표 값

• separate
• collapse

의미

• 셀 테두리를 분리할지 합칠지 지정

특징

• separate: 기본값, 이중 테두리처럼 보일 수 있음
• collapse: 인접 셀 테두리를 하나로 합침

table-layout 개념

대표 값

• auto
• fixed

의미

• 열 너비 계산 방식 지정

특징

• auto: 내용 길이에 따라 너비 자동 조절
• fixed: 내용과 관계없이 지정된 규칙으로 계산

효과

• fixed는 렌더링 빠름
• 열 폭이 안정적
• 균등 분할 테이블 설계에 유리

고정 폭 테이블 구성

구성

• width: 100%
• table-layout: fixed
• border-collapse: collapse

효과

• 화면 폭에 맞게 균등 분할
• 셀 크기가 일정해 보임
• 게시판, 요약표 등에 유리

colgroup 열 너비 지정

의미

• 열 단위로 너비를 지정하는 요소

활용

• 번호 열 좁게
• 제목 열 넓게
• 날짜 열 중간 폭으로 조정

특징

• 열별 비율 설계 가능
• 표 전체 구조를 안정적으로 관리 가능

border-spacing 개념

의미

• 셀 사이 간격 조정

특징

• border-collapse: separate일 때 의미가 큼
• 실무에서는 collapse 사용이 많아 활용 빈도 낮음

caption-side 개념

대표 값

• top
• bottom

의미

• 표 제목 위치 지정

활용

• 표 제목 위 배치
• 표 설명 아래 배치

empty-cells 개념

의미

• 빈 셀을 표시할지 숨길지 지정

특징

• 활용 빈도 낮음
• 숨기면 표 구조가 어색해질 수 있음

기본 테이블 스타일 구성

대표 구성

• border-collapse: collapse
• table-layout: fixed
• 셀 테두리 지정
• padding 지정
• text-align 지정
• vertical-align 지정

효과

• 데이터 구분이 명확해짐
• 셀 내부 간격 확보
• 표 전체 가독성 향상

테이블 헤더 스타일링

활용

• 배경색 강조
• 글자색 반전
• 헤더 행 구분 강화

효과

• 제목 영역이 본문과 명확히 구분됨
• 데이터 해석이 쉬워짐

줄무늬 테이블 구성

방식

• nth-child(even) 또는 nth-child(odd) 사용

효과

• 짝수 줄 또는 홀수 줄 배경색 변경
• 시선 추적이 쉬워짐
• 표 가독성 향상

활용

• 행이 많은 데이터 표
• 통계표
• 게시판 목록

반응형 테이블 문제

• 모바일 화면은 좁고 테이블은 넓음
• 열 수가 많아지면 화면을 뚫고 나갈 수 있음
• 작은 화면에서 가독성 저하 발생

가로 스크롤 반응형 처리

방법

• 테이블을 감싸는 요소에 가로 스크롤 적용

대표 속성

• overflow-x: auto

장점

• 구현이 가장 쉬움
• 기존 표 구조 유지 가능
• 실무에서 가장 흔한 방법

카드형 반응형 재구성

방법

• 표 구조를 카드형 블록 구조로 재구성
• 각 데이터 앞에 항목명을 붙여 세로로 쌓기

활용

• 모바일 최적화가 매우 중요한 화면
• 복잡한 표를 작은 화면에서 재구성할 때 사용

특징

• 구현은 더 복잡
• 모바일 가독성은 더 좋을 수 있음

정리

• 글꼴은 가독성, 브랜드, 성능을 함께 고려해 설계
• font-family, font-size, font-weight, font 단축 속성이 핵심
• 폴백 글꼴과 line-height를 함께 고려하는 것이 중요
• 텍스트 관련 속성은 간격, 정렬, 장식, 줄바꿈 기준으로 나눠 이해하면 정리 쉬움
• 한글 본문은 line-height, letter-spacing, word-break: keep-all 조합이 중요
• 리스트는 기본 기호 제거 후 커스텀 마커로 재설계하는 경우가 많음
• 테이블은 데이터 표현용으로 사용하고 border-collapse: collapse를 기본으로 시작하는 경우가 많음
• 반응형 테이블은 가로 스크롤 방식이 가장 기본적이고 실무적