방송대 HTML5웹프로그래밍 6강: CSS 가독성과 반응형 표 설계

글자가 모두 보인다고 읽기 좋은 페이지는 아닙니다. 폰트가 늦게 나타나고, 제목이 한 단어만 다음 줄로 밀리며, 긴 주소가 상자를 뚫고, 모바일에서 시간표가 잘린다면 각각 다른 CSS 판단이 필요합니다. 이 글은 하나의 학습 일정 페이지에서 이런 증상을 찾아 원인을 분리하고, 글꼴·텍스트·리스트·테이블 속성을 알맞게 조합해 고치는 과정을 다룹니다.

화면은 멀쩡한데 왜 읽기 어려운가

직접 구성한 사례를 가정해 봅시다. 온라인 스터디 안내 페이지에 제목, 게시일, 준비물 목록, 긴 접속 주소, 주간 일정표가 있습니다. 데스크톱에서는 그럭저럭 보이지만 작은 화면에서 제목이 어색하게 끊기고, 본문 줄은 빽빽하며, URL은 카드 밖으로 나갑니다. 목록의 별표는 항목마다 위치가 흔들리고, 일정표의 마지막 열은 화면 밖에 숨습니다.

이때 “글자 CSS가 문제”라고 한꺼번에 고치면 원인을 놓칩니다. 가독성 문제는 다음 네 층으로 분해해야 합니다.

관찰한 증상	먼저 확인할 층	대표 속성
글꼴이 없거나 크기 계층이 불안정하다	글꼴 자원과 크기 체계	`font-family`, `font-size`, `font-weight`, `@font-face`
문단이 빽빽하고 정렬이 어색하다	행과 글자 사이 관계	`line-height`, `letter-spacing`, `text-align`
긴 단어나 문장이 상자를 벗어난다	공백·줄바꿈·넘침 규칙	`white-space`, `word-break`, `overflow-wrap`, `text-overflow`
목록과 표의 정보 관계가 흐려진다	구조를 보존하는 표현	`::marker`, `border-collapse`, `table-layout`, `overflow-x`

진단 원칙: 먼저 정보가 읽히지 않는 원인을 ‘폰트 자원, 글자 리듬, 줄바꿈, 구조 표현’ 중 어디에 속하는지 정합니다. 그다음 해당 층의 속성을 조합해야 한 문제를 고치면서 다른 문제를 만들지 않습니다.

첫 번째 수리: 폰트보다 먼저 읽기 계층을 세운다

폰트 설계는 가독성, 브랜드, 성능의 균형입니다. 본문은 오래 읽어도 형태를 구별하기 쉬워야 하고, 브랜드용 웹 폰트를 쓰더라도 파일이 없거나 로딩 중인 상황을 대비해야 합니다. font-family에는 선호 글꼴부터 대체 글꼴까지 쉼표로 나열하고 마지막에 sans-serif나 serif 같은 일반 계열을 둡니다.

body {
  font-family: "Study Sans", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

.schedule-title {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
}

첫 글꼴을 사용할 수 없으면 다음 후보로 이동하고, 끝까지 찾지 못하면 브라우저가 일반 계열에서 선택합니다. system-ui는 사용 중인 운영체제의 기본 사용자 인터페이스 글꼴을 활용하는 선택입니다. 이 폴백 사슬 덕분에 특정 웹 폰트가 없어도 텍스트 자체는 계속 표시됩니다.

rem, em, px를 ‘크다·작다’가 아니라 기준점으로 구분하기

rem은 루트 요소의 글자 크기를 기준으로 하므로 페이지 전체의 크기 체계를 예측하기 쉽습니다. em은 해당 요소에서 계산된 글자 크기를 기준으로 하므로 버튼 안 여백처럼 글자와 함께 비례해야 하는 값에 유용하지만, 글자 크기에 중첩 적용하면 계산이 누적될 수 있습니다. px은 1px 테두리처럼 얇은 고정 표현에 알맞습니다. 본문 글자 크기는 사용자의 기본 글꼴 설정과 함께 확장하기 쉬운 rem 체계를 우선 고려합니다.

예를 들어 루트 크기를 16px로 가정하면 1rem은 16px, 0.875rem은 14px입니다. 반면 부모가 1.25rem이고 자식이 1.2em이면 자식은 16 × 1.25 × 1.2 = 24px로 계산됩니다. 이 중간 계산을 생략하면 중첩된 em이 예상보다 커지는 이유를 찾기 어렵습니다.

clamp로 제목의 하한과 상한을 함께 둔다

clamp(최솟값, 선호값, 최댓값)은 화면에 따라 크기가 변하되 범위를 벗어나지 않게 합니다. 앞 코드의 clamp(2rem, 5vw, 4rem)을 루트 16px 기준으로 계산해 봅시다.

뷰포트 너비	`5vw` 계산	최종 글자 크기	판정
500px	500 × 0.05 = 25px	32px	선호값이 최솟값 2rem보다 작아 하한 적용
800px	800 × 0.05 = 40px	40px	32~64px 범위 안이므로 선호값 적용
1600px	1600 × 0.05 = 80px	64px	선호값이 최댓값 4rem보다 커 상한 적용

vw만 쓰면 매우 작은 화면에서는 지나치게 작고 큰 화면에서는 지나치게 커질 수 있습니다. clamp()는 그 변화의 안전 구간을 함께 선언한다는 점이 핵심입니다.

두 번째 수리: 글꼴 파일과 font 단축 속성의 부작용을 통제한다

굵기와 모양은 폰트가 가진 범위 안에서 고른다

font-style은 normal, italic, oblique 같은 기울기 형태를, font-weight는 normal, bold 또는 100~900의 굵기를 지정합니다. 일반적으로 400은 normal, 700은 bold에 대응하지만 실제 표현은 폰트 파일이 제공하는 굵기에 좌우됩니다. 지원하지 않는 굵기를 요청하면 브라우저가 비슷한 굵기를 선택하거나 합성할 수 있으므로 필요한 굵기 자원만 계획적으로 준비합니다.

font-variant: small-caps는 영문 소문자를 작은 대문자 형태로 표시합니다. 폰트 지원에 따라 품질이 달라지는 특수한 표현이므로 일반 본문의 계층을 만드는 수단으로 쓰지 않습니다. 숫자 열의 자릿수를 세로로 비교해야 한다면 font-variant-numeric: tabular-nums로 숫자 폭을 일정하게 만드는 편이 목적에 맞습니다.

font 단축 속성은 생략한 값까지 초기화한다

font 단축 속성은 스타일·변형·두께, 필수인 크기와 서체, 선택적인 줄 간격을 한 줄에 씁니다. 크기 뒤의 슬래시는 줄 간격을 뜻합니다.

.schedule-meta {
  font: italic 500 0.875rem/1.5 "Study Sans", system-ui, sans-serif;
}

이 선언은 기울임, 굵기 500, 크기 0.875rem, 줄 간격 1.5, 폰트 목록을 동시에 설정합니다. 단축 속성에서 생략한 하위 속성은 이전 값을 그대로 두는 것이 아니라 초기값으로 돌아갑니다. 따라서 기존에 설정한 font-variant를 유지할 생각으로 뒤에서 font를 쓰면 뜻밖에 사라질 수 있습니다.

@font-face에는 이름, 자원, 범위, 로딩 전략이 필요하다

서버에 둔 웹 폰트는 @font-face로 등록한 뒤 일반 font-family에서 사용합니다. 다음은 학습을 위해 만든 가변 폰트 예입니다.

@font-face {
  font-family: "Study Sans";
  src: url("/fonts/study-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

font-family는 CSS 안에서 부를 별칭, src는 파일 위치와 형식, font-weight는 이 파일이 제공하는 굵기 범위입니다. font-display: swap은 웹 폰트를 기다리는 동안 대체 글꼴로 먼저 내용을 보여 주고 준비되면 교체하도록 합니다. WOFF2는 웹용 압축 형식이며, 필요한 경우 WOFF를 대체 후보로 둘 수 있습니다. 정적 폰트는 굵기별 파일이 나뉠 수 있고 가변 폰트는 한 파일에 연속적인 굵기 범위를 담을 수 있으므로 선언도 실제 파일의 성격에 맞춰야 합니다.

오개념 교정: 웹 폰트를 선언했다고 브랜드 글꼴이 언제나 보장되는 것은 아닙니다. 경로 오류, 네트워크 지연, 지원 형식 차이가 있어도 읽을 수 있도록 폴백과 줄 간격까지 하나의 글꼴 시스템으로 설계해야 합니다.

세 번째 수리: 문단의 리듬과 강조를 역할별로 나눈다

line-height는 줄 사이 높이를 정합니다. 단위 없는 1.6은 각 자식 요소가 자신의 글자 크기에 1.6을 곱해 줄 높이를 계산하므로 상속과 크기 변화에 유연합니다. 반면 백분율이나 고정 길이로 계산된 줄 높이를 상속하면 자식의 글자 크기가 달라졌을 때 빽빽해질 수 있습니다.

letter-spacing은 글자 사이, word-spacing은 단어 사이 간격입니다. 작은 음수 자간은 폰트에 따라 한글이 단정해 보일 수 있지만, 값이 과하면 글자가 겹치고 가독성이 떨어집니다. 특정 수치를 만능값처럼 복사하지 말고 실제 글꼴·크기·굵기와 함께 확인해야 합니다.

.study-description {
  line-height: 1.6;
  letter-spacing: -0.02em;
  word-break: keep-all;
  text-align: left;
}

정렬은 글자의 방향과 대상 요소를 함께 본다

text-align은 인라인 내용의 가로 정렬을 정합니다. 제목은 가운데, 본문은 왼쪽, 수치 열은 오른쪽처럼 정보 유형에 따라 선택합니다. justify는 양쪽 가장자리를 맞추지만 단어 사이가 불규칙하게 벌어질 수 있습니다. text-align-last는 양쪽 정렬 문단의 마지막 줄처럼 마지막 줄만 별도로 정할 때 사용합니다.

vertical-align은 블록 박스 전체를 세로 중앙에 놓는 속성이 아닙니다. 인라인 요소와 테이블 셀에서 기준선, 위, 가운데, 아래의 높낮이를 맞춥니다. 글자 옆 작은 아이콘을 맞출 때는 유효하지만, 고정 높이 div 안의 내용을 가운데 배치하려는 문제에는 다른 레이아웃 방식이 필요합니다.

장식은 정보 의미를 지우지 않는 범위에서 쓴다

text-decoration은 선의 종류, 스타일, 색상, 두께를 단축해 지정합니다. 물결 밑줄로 입력 오류를 나타내거나 line-through로 이전 가격을 표시할 수 있습니다. 링크 밑줄을 제거한다면 색상·굵기·상호작용 상태 등 링크임을 구별할 다른 단서가 필요합니다. text-transform은 원문을 바꾸지 않고 영문의 표시 형태를 uppercase, lowercase, capitalize로 바꿉니다. capitalize는 각 단어의 첫 글자를 대문자 모양으로 만듭니다.

text-shadow는 가로 이동, 세로 이동, 번짐 반경, 색상 순서로 그림자를 만듭니다. 여러 그림자를 쉼표로 겹칠 수도 있습니다. 배경 이미지 위 흰 글자의 분리를 돕는 작은 그림자와 장식적인 네온 효과는 목적이 다르며, 과도한 그림자는 오히려 글자 윤곽을 흐리고 렌더링 부담을 키웁니다.

.hero-caption {
  color: white;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

.spelling-error {
  text-decoration: underline wavy red 1px;
  text-underline-offset: 3px;
}

text-indent는 첫 줄 들여쓰기를 만들지만, 화면 밖으로 큰 음수 값을 주어 텍스트를 숨기는 오래된 기법은 구조를 이해하기 어렵게 합니다. 정보성 로고 이미지라면 의미에 맞는 img와 alt를 쓰고, 문단 구분은 들여쓰기와 문단 간격 중 문서의 읽기 방식에 맞는 한 체계로 유지합니다.

네 번째 수리: 줄바꿈 문제를 세 질문으로 푼다

줄바꿈 속성은 이름이 비슷하지만 질문이 다릅니다. white-space는 소스의 공백과 줄바꿈을 어떻게 처리할지, word-break는 단어 중간을 어디까지 끊을지, overflow-wrap은 너무 긴 단어가 박스를 넘을 때 최후로 끊을지를 결정합니다. text-overflow는 넘친 뒤 잘림을 어떻게 알릴지를 다룹니다.

질문	선택	결과
사용자가 입력한 줄바꿈을 보존할까?	`white-space: pre-wrap`	연속 공백·줄바꿈을 보존하면서 상자 끝에서는 자동 줄바꿈한다.
버튼 문구를 한 줄로 유지할까?	`white-space: nowrap`	자동 줄바꿈을 막으므로 넘침 처리와 너비를 함께 검토한다.
한글 단어를 중간에서 자르지 않을까?	`word-break: keep-all`	공백을 중심으로 줄을 바꾸어 단어 형태를 지킨다.
긴 영문·URL만 최후에 끊을까?	`overflow-wrap: break-word`	정상 줄바꿈 기회를 우선하고 그래도 넘치면 긴 단어를 나눈다.
남은 한 줄 내용을 말줄임표로 알릴까?	`text-overflow: ellipsis`	제한 너비, `nowrap`, 숨김 처리를 함께 갖춘다.

break-all과 overflow-wrap의 차이

word-break: break-all은 상자 끝에서 단어를 적극적으로 잘라 줄의 빈 공간을 줄입니다. 폭이 매우 좁은 UI에는 도움이 될 수 있지만 일반 본문에서는 영단어가 여러 조각으로 잘려 읽기 흐름이 나빠집니다. overflow-wrap: break-word는 먼저 단어를 다음 줄로 옮겨 보고, 그래도 상자보다 긴 경우에 끊습니다. 본문·댓글처럼 읽기가 우선인 곳에서는 후자가 더 자연스럽습니다.

.post-body {
  word-break: keep-all;
  overflow-wrap: break-word;
}

.one-line-title {
  max-width: 18rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

말줄임표는 text-overflow: ellipsis 하나만으로 생기지 않습니다. 넘칠 수 있는 너비가 정해져야 하고, 한 줄을 유지하며, 넘친 부분을 숨겨야 합니다. 또한 생략된 내용은 화면에서 보이지 않으므로 핵심 정보를 말줄임표에만 의존하지 않는지 확인합니다.

짧은 제목은 줄 길이를 균형 있게 만든다

text-wrap: balance는 짧은 제목이나 캡션에서 각 줄의 길이가 비슷해지도록 줄바꿈 지점을 조정합니다. 긴 본문 전체에 적용하는 속성이 아니라, 두세 줄 제목의 한 단어가 외롭게 남는 문제를 다루는 도구입니다. 작성자가 br로 화면별 줄바꿈을 고정하는 대신 브라우저가 주어진 폭 안에서 균형을 찾게 합니다.

다섯 번째 수리: 목록은 의미를 보존한 채 마커만 바꾼다

list-style-type은 불릿이나 번호 모양, list-style-position은 마커를 콘텐츠 박스 안팎 어디에 둘지, list-style-image는 이미지 마커를 정합니다. 세 속성은 list-style로 단축할 수 있습니다. 내비게이션처럼 기본 마커가 필요 없을 때도 HTML 목록 구조는 유지하고 CSS에서 list-style: none과 기본 여백을 조정합니다.

커스텀 마커에는 두 방식이 있습니다. ::marker는 실제 마커 박스만 선택하므로 문자·색상·크기처럼 단순한 변경에 적합합니다. ::before는 가짜 내용을 만들고 위치를 직접 잡아야 하지만 간격, 위치, 이미지 아이콘을 더 정교하게 조절할 수 있습니다.

.materials li::marker {
  content: "✓ ";
  color: seagreen;
  font-size: 1.1em;
}

.navigation {
  list-style: none;
  margin: 0;
  padding: 0;
}

실패 원인: 별표를 각 li의 텍스트에 직접 입력하면 마커와 콘텐츠의 역할이 섞이고 정렬도 항목마다 달라집니다. 단순 마커면 ::marker, 마커 바깥의 독립적인 배치가 필요하면 ::before를 선택합니다.

여섯 번째 수리: 표는 정보 관계를 유지하며 폭을 통제한다

테이블은 행과 열의 교차 관계를 가진 데이터를 표시하는 구조이지 페이지 레이아웃 도구가 아닙니다. border-collapse: collapse는 인접한 셀 테두리를 하나로 합치고, separate는 셀마다 테두리를 분리합니다. border-spacing과 빈 셀의 배경·테두리를 다루는 empty-cells는 분리 모델에서 작동합니다. caption-side는 caption을 위나 아래에 표시합니다.

.study-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.study-table th,
.study-table td {
  border: 1px solid #ddd;
  padding: 0.75rem;
  text-align: center;
  vertical-align: middle;
}

.study-table tbody tr:nth-child(even) {
  background-color: #f7f7f7;
}

table-layout: auto는 셀 내용을 살펴 열 너비를 결정하므로 긴 내용이 열을 넓힐 수 있습니다. fixed는 표 너비와 지정한 열 너비를 기준으로 배치하므로 결과가 예측하기 쉽지만, 긴 내용의 넘침을 별도로 처리해야 합니다. 번호 10%, 주제 65%, 시간 25%처럼 비율이 중요하면 colgroup과 col에서 열 폭을 지정할 수 있습니다.

<table class="study-table">
  <caption>이번 주 학습 일정</caption>
  <colgroup>
    <col class="col-number">
    <col class="col-topic">
    <col class="col-time">
  </colgroup>
  <thead>
    <tr><th>번호</th><th>주제</th><th>시간</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>글꼴과 줄바꿈</td><td>40분</td></tr>
    <tr><td>2</td><td>리스트와 테이블</td><td>35분</td></tr>
  </tbody>
</table>

HTML 예시의 열 클래스에는 별도 CSS로 각각 10%, 65%, 25%를 지정할 수 있습니다. caption은 표가 무엇을 나타내는지 설명하고, thead와 tbody는 머리글 행과 데이터 행의 관계를 나눕니다. 행 배경을 번갈아 표시하는 :nth-child(even)은 가로로 값을 따라 읽는 데 도움을 줍니다.

좁은 화면에서는 스크롤과 카드형 전환 중 하나를 고른다

모바일 표의 핵심 질문은 “열끼리 비교하는 관계를 그대로 보존해야 하는가?”입니다. 여러 행의 같은 열을 비교해야 한다면 표를 래퍼로 감싸고 가로 스크롤을 허용하는 방식이 단순하며 정보 관계도 유지됩니다. 이 포스팅의 실제 표도 공통 래퍼를 사용합니다.

<div class="table-wrapper">
  <table>
    <!-- caption, thead, tbody -->
  </table>
</div>

.table-wrapper {
  overflow-x: auto;
}

.table-wrapper table {
  min-width: 42rem;
}

각 행이 하나의 독립 프로필처럼 읽혀도 된다면 작은 화면에서 셀을 블록으로 쌓아 카드처럼 표현할 수 있습니다. 이 방식은 머리글을 시각적으로 숨기고 각 셀에 data-label을 두어 ::before로 이름표를 표시합니다. 그러나 같은 열의 값을 빠르게 비교하는 표라면 카드형 전환이 오히려 관계를 약하게 하므로, 장식 취향이 아니라 데이터 읽기 과제로 결정해야 합니다.

판단 조건	가로 스크롤	카드형 전환
열 사이 비교가 핵심	적합	열 비교가 어려워질 수 있음
한 행이 독립된 기록	가능	적합할 수 있음
구현 부담	래퍼와 넘침 제어 중심	머리글 대체 표시와 셀 재배치 필요
주의점	스크롤 가능함을 인지하게 해야 함	`data-label`과 원래 머리글의 불일치 방지

수리 기록으로 다시 점검하는 순서

처음의 학습 일정 페이지를 다시 봅시다. 첫째, 본문에는 폴백을 가진 폰트 목록과 단위 없는 줄 높이를 적용했습니다. 둘째, 제목에는 clamp()와 text-wrap: balance를 적용해 작은 화면의 하한과 어색한 고립 단어를 함께 다뤘습니다. 셋째, 한글 본문은 단어를 지키되 긴 URL만 최후에 끊도록 keep-all과 overflow-wrap을 조합했습니다. 넷째, 준비물의 별표는 텍스트에서 제거하고 ::marker로 옮겼습니다. 마지막으로 일정표는 열 비교가 중요하므로 카드로 해체하지 않고 가로 스크롤을 선택했습니다.

같은 문제를 다른 페이지에서 만났을 때는 다음 순서로 재현할 수 있습니다.

HTML 의미 구조가 올바른지 먼저 확인합니다. CSS로 목록이나 표처럼 보이게 한 것과 실제 목록·표는 다릅니다.
글꼴 파일이 없어도 읽히는 폴백과 크기 기준이 있는지 확인합니다.
줄 높이·자간·정렬 중 무엇이 읽기 리듬을 방해하는지 한 속성씩 분리합니다.
일반 문장, 긴 단어, 한 줄 UI 중 어떤 내용이 넘치는지 판별합니다.
말줄임으로 숨기기 전에 줄바꿈으로 내용을 보존할 수 있는지 봅니다.
반응형 표는 열 비교와 행 독립성 중 어느 읽기 과제가 중요한지 결정합니다.

경계 사례: 레이아웃을 지키려고 텍스트를 공격적으로 자르면 읽기가 손상되고, 내용을 모두 보존하려다 긴 주소 하나가 화면을 밀어낼 수도 있습니다. CSS 선택은 ‘무엇을 보존해야 하는가’를 먼저 정한 뒤 이루어져야 합니다.

핵심 개념 정리

폰트 시스템은 특정 글꼴 하나가 아니라 폴백, 상대 크기, 줄 높이, 실제 제공 굵기의 조합입니다.
clamp()는 화면에 따른 변화와 최소·최대 안전 범위를 함께 선언합니다.
줄바꿈은 공백 보존, 단어 분할, 긴 문자열의 최후 처리, 넘침 표시라는 서로 다른 질문으로 나눕니다.
목록 마커를 꾸며도 ul·ol·li의 의미 구조는 보존합니다.
테이블의 auto와 fixed, 가로 스크롤과 카드형 전환은 데이터의 비교 방식을 기준으로 선택합니다.

최종 사고 순서: 읽기 문제를 만나면 먼저 정보 구조, 다음으로 글자 계층과 리듬, 그다음 줄바꿈과 넘침, 마지막으로 작은 화면의 관계 보존을 확인합니다. 속성 이름부터 찾지 않고 보존할 정보와 실패 증상을 먼저 특정하면, 같은 CSS가 다른 콘텐츠에서 왜 다른 결과를 내는지도 설명할 수 있습니다.

참고 자료와 작성 기준

이 글은 해당 차시 강의자료 58쪽 전체를 확인한 뒤 표지·목차·단원 구분·정리·다음 강의 예고를 본문과 구분하고, 학습자가 CSS 증상에서 원인과 해결 속성을 찾도록 재구성한 비공식 학습자료입니다. 강의자료의 범위 안에서 직접 구성한 학습 일정 페이지, 상대 단위와 clamp() 계산, 줄바꿈 진단표, 반응형 표 판단 절차와 선택지별 해설을 새로 구성했습니다.

작성·편집: 올에이클래스 학습연구팀
주요 근거: 한국방송통신대학교 HTML5웹프로그래밍 6강 「CSS: 글꼴, 텍스트, 리스트, 테이블」 강의자료 :codex-file-citation{path="K1. 컴퓨터과학과/1. 재검토필요/2-1 HTML5웹프로그래밍/1. 강의록/HTML5웹프로그래밍_06_강의록.pdf" purpose="source"}
보충 자료: 외부 자료를 사용하지 않았으며, 강의자료의 설명 범위 안에서 예제와 진단 절차를 재구성했습니다.
편집 원칙: 올에이클래스 편집 정책
최종 내용 검토: 2026-09-05

방송대 HTML5웹프로그래밍 6강: CSS 가독성과 반응형 표 설계