기본 콘텐츠로 건너뛰기

방송대 방통대 HTML5웹프로그래밍 6강 - CSS 글꼴·텍스트·리스트·테이블 - 요약 노트 시험족보 예상문제 - 올에이클래스

HTML5웹프로그래밍 6강 - CSS 글꼴·텍스트·리스트·테이블

HTML5웹프로그래밍 6강 - CSS 글꼴·텍스트·리스트·테이블

가독성·브랜드·성능의 균형을 고려한 웹 글꼴 설계와 다양한 텍스트 속성을 학습한다. 이어서 리스트 마커를 꾸미는 방법과 데이터 테이블의 레이아웃·가독성·반응형 처리 방법을 실무 관점에서 정리한다.

1. 웹 글꼴 설계의 세 가지 기준

가독성

웹의 글꼴은 먼저 잘 읽히는가를 기준으로 선택해야 한다. 제목에는 개성이 있는 글꼴을 사용할 수 있지만, 긴 본문에는 지나치게 얇거나 화려한 장식 글꼴을 피하고 눈에 편한 고딕 계열의 산세리프 글꼴을 사용하는 것이 일반적이다.

브랜드

글꼴은 회사나 학교, 서비스가 전달하려는 분위기와 정체성을 표현한다. 브랜드 이미지를 유지하기 위해 서버나 CDN에서 특정 웹 폰트를 불러와 사용할 수 있다. 다만 디자인만 보고 선택하지 말고 본문 가독성과 다른 기기에서의 표시도 함께 확인해야 한다.

성능

웹 폰트는 기본 시스템 폰트보다 개성 있지만 파일을 내려받아야 하므로 초기 표시가 늦어질 수 있다. 필요한 문자와 굵기만 포함한 서브셋 폰트를 사용하거나 시스템 폰트를 폴백으로 섞으면 품질과 성능을 함께 확보할 수 있다.

폰트는 가독성·브랜드·성능의 균형으로 설계한다. 멋진 글꼴 하나를 선택하는 것이 아니라 실제 읽기 환경과 다운로드 비용까지 고려해야 한다.

2. font-family와 폴백

글꼴 목록

font-family는 사용할 글꼴을 지정한다. 사용자의 기기에 첫 번째 글꼴이 없을 수 있으므로 대체 글꼴을 쉼표로 나열하는 폴백(fallback)을 구성한다. 마지막에는 sans-serif나 serif 같은 일반 글꼴명을 넣어 어떤 환경에서도 표시되도록 한다.

body {
  font-family: "Pretendard", "Noto Sans KR",
    -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
}

한글과 영문이 섞인 환경에서는 한글을 지원하는 글꼴을 먼저, 영문 글꼴을 그다음에 둔다. 브랜드 웹 폰트, 시스템 폰트, 일반 글꼴명 순으로 구성하면 브랜드 표현과 안정성을 함께 확보할 수 있다.

system-ui

system-ui는 브라우저가 사용자의 운영체제를 판단하여 해당 기기의 대표 시스템 글꼴을 적용하게 한다. 별도의 폰트 파일 다운로드 없이 각 운영체제에 자연스럽게 어울리는 글꼴을 사용할 수 있어 성능이 중요할 때 유용하다.

가변 폰트

가변 폰트(variable font)는 얇은 굵기부터 두꺼운 굵기까지 여러 정보를 하나의 파일에 담는다. 굵기마다 Light, Regular, Bold 파일을 따로 받던 정적 폰트보다 다운로드 수를 줄일 수 있으며 미세한 굵기·장평·기울기 조절도 가능하다. 구글 폰트는 CDN 링크 방식으로 활용할 수 있어 캐싱과 속도 측면에서 유리하다.

3. font-size와 반응형 글자 크기

글자 크기 단위

font-size는 글자 크기를 지정한다. cm, mm, in, pt는 인쇄용 절대 단위이므로 화면용 글꼴에 적합하지 않다. px는 고정 크기여서 브라우저 설정에 따른 확대를 충분히 반영하지 못할 수 있으므로 본문 글자 크기에는 상대 단위를 권장한다.

em은 부모 요소의 글자 크기에 비례하여 중첩될수록 계산이 복잡해질 수 있다. 컴포넌트 내부 여백처럼 현재 글자 크기와 함께 변해야 하는 미세 조정에 제한적으로 사용한다. rem은 최상위 html 요소의 글자 크기에 비례하므로 예측하기 쉽고 접근성에도 유리하다. 일반적으로 1rem=16px이다.

html { font-size: 16px; }
body { font-size: 1rem; }
.small { font-size: 0.875rem; }

계산을 쉽게 하려고 html { font-size: 62.5%; }로 설정하여 1rem=10px에 대응시키고 본문을 1.6rem으로 작성하는 방법도 있다.

clamp와 vw

clamp(최소값, 권장값, 최대값)는 화면 크기에 따라 자연스럽게 변하지만 지정 범위를 벗어나지 않는 반응형 크기를 만든다.

font-size: clamp(2rem, 5vw, 4rem);

vw는 뷰포트 너비의 1%를 뜻한다. vw만 단독으로 사용하면 작은 화면에서는 너무 작고 큰 화면에서는 지나치게 커질 수 있지만 clamp()의 권장값으로 사용하면 최소·최대 크기로 위험을 제어할 수 있다.

용도추천 단위이유
본문rem접근성과 예측 가능한 크기
제목clamp()모바일부터 큰 화면까지 자연스럽게 변화
여백em, rem글자 크기에 맞춰 비례 조정
고정 UIpx1px 테두리처럼 변하면 안 되는 값

4. 글자 스타일·변형·굵기와 숫자 정렬

font-style과 font-variant

font-style은 normal, italic, oblique 값으로 기울임을 지정한다. 실무에서는 기울임에 주로 italic을 사용한다. font-variant: small-caps는 영문 소문자를 작은 대문자로 표현하지만 글꼴 지원에 따라 품질 차이가 있어 특수한 경우에만 사용한다.

font-weight

font-weight는 normal, bold 또는 100부터 900까지의 숫자로 굵기를 지정한다. 숫자값을 사용하면 의도가 명확하며 400은 일반 굵기, 700은 굵은 글자에 대응한다. 본문은 보통 400~500, 제목은 600~700 정도를 사용한다.

폰트 파일이 실제로 지원하지 않는 굵기를 지정하면 브라우저가 가짜 굵기로 렌더링할 수 있다. 웹 폰트를 굵기별로 내려받으면 용량이 증가하므로 실제 사용하는 굵기만 로드한다.

tabular-nums

font-variant-numeric: tabular-nums는 모든 숫자의 폭을 같게 만들어 금액과 수치가 세로로 가지런히 정렬되게 한다. 게시판, 금융 정보와 대시보드처럼 숫자를 열 단위로 비교하는 UI에 유용하다.

CSS 속성을 지정해도 선택한 글꼴이 해당 기능과 굵기를 지원해야 기대한 품질로 표시된다. 글꼴 파일이 제공하는 기능을 함께 확인해야 한다.

5. font 단축 속성과 웹 폰트

font 단축 속성

font는 여러 font-* 속성을 한 줄에 작성하는 단축 속성이다.

font: [스타일] [변형] [두께] 크기[/줄간격] 서체;

스타일·변형·두께는 생략할 수 있고 서로의 순서도 비교적 자유롭지만 글자 크기와 서체는 필수이며 위치도 고정된다. 줄 간격은 글자 크기 바로 뒤에 슬래시로 작성한다.

font: italic bold 20px/1.6 "Pretendard", sans-serif;

단축 속성에서 생략한 세부 속성은 기존 값을 유지하는 것이 아니라 기본값 normal로 초기화된다. 따라서 기존 스타일과 함께 사용할 때 예상하지 못한 초기화가 발생하지 않는지 확인해야 한다.

@font-face

@font-face는 사용자 기기에 없는 특정 글꼴 파일을 서버에서 내려받아 사용할 수 있게 한다. 브랜드용 웹 폰트를 정의할 때 별칭, 파일 위치와 형식, 지원 굵기, 스타일, 로딩 전략을 지정한다.

@font-face {
  font-family: "MyWebFont";
  src: url("/font/mywebfont.woff2") format("woff2"),
       url("/font/mywebfont.woff") format("woff");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

font-display: swap은 웹 폰트가 내려받아지는 동안 시스템 폰트로 먼저 글자를 표시하고 완료 후 교체하여 텍스트가 보이지 않는 시간을 줄인다. 강의에서는 굵기별 파일을 사용하는 경우 각 굵기에 맞는 @font-face 정의를 구성해야 한다고 설명한다.

웹에서는 압축률이 높은 woff2를 우선하고, 이를 지원하지 않는 구형 브라우저용으로 woff를 폴백으로 둔다. ttf와 otf는 용량이 크므로 웹 전용 형식으로 변환하여 사용하는 것이 기본이다.

6. 줄 간격·자간·단어 간격·들여쓰기

line-height

line-height는 줄 간격을 지정하며 본문 가독성에 매우 중요하다. px나 퍼센트보다 단위 없는 배수를 사용하면 자식 요소의 글자 크기가 바뀌어도 현재 글자 크기에 맞춰 계산되어 상속과 확대에 유리하다.

영문 본문은 보통 1.4~1.5, 한글 본문은 1.5~1.6 범위가 읽기 편하다. 실제 글꼴의 형태에 따라 조정해야 한다.

letter-spacing과 word-spacing

letter-spacing은 글자 사이의 자간을 조절한다. 한글 글꼴은 자간이 넓게 느껴질 수 있어 -0.02em 정도로 조금 줄이면 보기 좋아지는 경우가 있다. 지나친 음수값은 글자가 겹쳐 가독성을 해친다.

word-spacing은 단어 사이 간격을 지정하지만 한국어 웹에서는 자주 사용하지 않는다. 같은 값도 글꼴에 따라 다르게 보이므로 화면을 확인하며 조절한다.

text-indent

text-indent는 문단의 첫 줄을 들여쓴다. 현대 웹에서는 첫 줄 들여쓰기보다 문단 사이 여백으로 구분하는 경우가 많다. 과거에는 text-indent: -9999px와 overflow: hidden으로 로고 텍스트를 화면 밖으로 밀어 숨겼지만, 현재는 의미와 접근성이 명확한 img 요소와 alt 속성을 사용하는 것이 표준적이다.

한글 본문의 대표적인 가독성 조합은 line-height: 1.5~1.6, letter-spacing: -0.02em, word-break: keep-all, 왼쪽 정렬이다.

7. 텍스트 정렬과 균형 잡힌 줄바꿈

text-align과 text-align-last

text-align은 인라인 콘텐츠의 가로 정렬을 지정하며 left, center, right, justify를 사용할 수 있다. 제목은 가운데, 본문은 왼쪽, 숫자는 오른쪽 정렬이 흔하다. 양쪽 정렬은 단어 간격이 불규칙하게 벌어져 읽기 어려울 수 있으므로 신문·책 스타일이 필요한 경우에 신중하게 사용한다.

text-align-last는 문단의 마지막 줄 정렬을 따로 지정한다. 본문을 justify로 맞추더라도 마지막 줄은 왼쪽으로 두는 구성이 자연스럽다.

vertical-align

vertical-align은 span, img 같은 인라인 요소와 테이블 셀에서 높낮이를 맞춘다. baseline, middle, top, bottom 값을 사용할 수 있다. 블록 요소 내부의 박스 전체를 수직 중앙 정렬하는 속성이 아니며, 한 줄 안에서 이미지와 글자의 기준선을 맞추는 데 사용한다.

text-wrap: balance

text-wrap: balance는 제목과 캡션처럼 짧은 텍스트가 여러 줄이 될 때 각 줄의 길이가 비슷해지도록 줄바꿈 위치를 조정한다. 직접 br을 넣어 특정 화면에만 맞추는 방식보다 반응형 환경에 자연스럽게 대응한다.

대부분의 브라우저는 성능을 위해 약 4~6줄 이하의 짧은 텍스트에 적용한다. 한글 제목에는 word-break: keep-all과 함께 사용하면 단어 중간이 끊기는 현상도 줄일 수 있다.

8. 텍스트 장식·대소문자·그림자

text-decoration

text-decoration은 밑줄, 윗줄, 취소선 등의 선 장식을 지정한다. 단축 문법은 종류 [스타일] [색상] [두께] 순으로 작성하며 선의 종류는 필수이다.

text-decoration: underline wavy red 1px;

세부 속성으로 text-decoration-line, -style, -color, -thickness를 사용할 수 있다. text-underline-offset은 글자와 밑줄 사이 거리를 조절한다. 링크, 할인 전 가격, 품절 상품, 완료된 할 일처럼 선 자체가 정보를 전달할 때 사용하며 읽기를 방해하지 않아야 한다.

text-transform

text-transform은 영문을 uppercase, lowercase, capitalize 형태로 표시한다. HTML 원본 문자열을 바꾸지 않고 화면의 모양만 바꾸며 한글에는 변화가 없다.

text-shadow

text-shadow는 x축 이동, y축 이동, 번짐, 색상 순으로 글자 그림자를 지정한다. 이미지 위의 텍스트를 배경과 분리하여 읽기 쉽게 하거나 네온 효과를 만들 수 있다. 여러 그림자는 쉼표로 겹칠 수 있다.

그림자는 렌더링 비용이 들기 때문에 본문 전체보다 제목과 버튼 같은 강조 요소에 제한적으로 사용한다. 장식보다 가독성 향상이 우선이다.

9. 공백·줄바꿈·넘침 처리

white-space

white-space는 HTML 소스에 있는 공백, 탭과 줄바꿈을 브라우저가 처리하는 방식을 정한다. normal은 연속 공백을 하나로 합치고 소스의 줄바꿈은 공백처럼 처리하면서 박스 끝에서 자동 줄바꿈한다.

nowrap은 박스 끝에서도 줄을 바꾸지 않아 버튼 텍스트나 한 줄 말줄임에 사용한다. pre-wrap은 사용자가 입력한 연속 공백과 줄바꿈을 유지하면서 박스 끝에서는 자동 줄바꿈하므로 게시판 본문, 댓글과 리뷰에 적합하다.

word-break

word-break는 박스 끝에서 단어 중간을 끊을지 정한다. normal은 기본 방식이며 한글은 글자 단위로 끊길 수 있다. break-all은 한글·영문 구분 없이 가능한 위치에서 즉시 잘라 폭이 좁은 UI나 긴 URL에 사용한다. keep-all은 한글 단어 중간 줄바꿈을 막고 공백에서만 줄을 바꾸어 가독성을 높인다.

overflow-wrap

기존의 word-wrap은 현재 overflow-wrap이라는 이름을 사용한다. break-word는 먼저 단어를 다음 줄로 옮겨 보존하고, 그래도 박스보다 길 때만 단어를 나누므로 게시글 본문과 댓글에 적합하다.

word-break: break-all은 빈 공간을 줄이지만 단어가 많이 잘릴 수 있고, overflow-wrap: break-word는 여백이 생기더라도 단어를 가능한 한 보존한다.

text-overflow

text-overflow는 글자가 박스 밖으로 넘칠 때 처리 방법을 정한다. clip은 잘라내고 ellipsis는 말줄임표로 뒤에 내용이 있음을 보여 준다. 한 줄 말줄임은 세 속성을 함께 사용한다.

.one-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

줄바꿈 속성은 언어와 콘텐츠 유형에 맞춰 선택한다. 한글 본문에는 keep-all과 overflow-wrap: break-word의 조합이 가독성과 레이아웃 보호에 유리하다.

10. 리스트 스타일과 커스텀 마커

list-style 계열

list-style-type은 글머리 기호 모양을 정한다. 순서 없는 목록은 disc, circle, square, none을, 순서 있는 목록은 decimal, decimal-leading-zero, lower-alpha, upper-roman 등을 사용할 수 있다.

list-style-position은 마커를 콘텐츠 박스 밖의 outside 또는 안쪽의 inside에 둔다. outside는 줄이 바뀌어도 텍스트 시작 위치가 유지되어 일반 목록에 적합하다.

list-style-image는 이미지 마커를 지정하지만 크기와 위치를 정밀하게 조절하기 어려워 거의 사용하지 않는다. list-style 단축 속성은 type, position, image 값을 순서와 관계없이 한 줄에 작성한다.

기본 스타일 초기화

내비게이션 메뉴를 만들 때는 브라우저의 기본 기호와 들여쓰기를 제거하고 새 스타일을 적용한다.

ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

::marker와 ::before

::marker는 목록 항목의 마커 박스만 선택한다. 문자, 색상과 크기를 간단히 바꿀 때 적합하지만 위치와 간격, 이미지 크기 같은 정교한 레이아웃 조절은 제한된다.

::before는 기본 마커를 제거한 뒤 가상 요소를 직접 배치하므로 위치·간격·이미지를 세밀하게 제어할 수 있다. 간단한 문자 마커는 ::marker, 복잡한 커스텀 아이콘은 ::before를 선택한다.

11. 테이블의 기본 CSS 속성

테이블의 용도

HTML 테이블은 행과 열로 이루어진 데이터를 표시하는 데 사용한다. 페이지의 전체 레이아웃을 만들기 위한 도구로 사용해서는 안 된다.

border-collapse

border-collapse는 인접한 셀의 테두리를 처리한다. 기본값 separate는 셀마다 테두리가 따로 있어 이중선처럼 보이고, collapse는 인접 테두리를 한 줄로 합친다. 깔끔한 데이터 표를 만들 때 가장 먼저 적용하는 실무 필수 속성이다.

table-layout

table-layout: auto는 셀 내용의 길이에 따라 열 너비가 달라져 결과를 예측하기 어렵다. fixed는 지정한 전체 폭을 기준으로 열 너비를 고정해 렌더링이 빠르고 레이아웃이 안정적이다.

width: 100%와 table-layout: fixed를 함께 사용하면 열을 균등하게 나눈다. 게시판처럼 번호·제목·날짜 열의 비율이 달라야 하면 colgroup과 col로 10%, 70%, 20%와 같이 너비를 지정한다.

기타 속성

border-spacing은 border-collapse: separate일 때만 셀 사이 간격을 조절한다. caption-side는 caption의 위치를 표 위쪽 top 또는 아래쪽 bottom으로 정한다.

empty-cells는 별도 테두리 방식에서 빈 셀의 배경과 테두리를 보이거나 숨긴다. 빈 셀을 숨기면 표에 구멍이 난 것처럼 보여 데이터 누락으로 오해할 수 있고 최근에는 테두리를 합치는 방식이 일반적이므로 사용을 피한다.

실무 테이블의 출발점은 border-collapse: collapse와 table-layout: fixed이다. 테이블은 레이아웃용이 아니라 구조화된 데이터 표시용이다.

12. 읽기 쉬운 데이터 테이블 만들기

기본 구조와 셀 스타일

표 제목은 caption, 열 제목은 thead와 th, 실제 데이터는 tbody와 td로 구분한다. CSS에서 표의 최대 너비, 고정 레이아웃, 테두리, 셀 여백과 정렬을 일관되게 지정한다.

.basic-table {
  width: 100%;
  max-width: 600px;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}
.basic-table th,
.basic-table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: center;
  vertical-align: middle;
}

caption-side: bottom으로 제목을 아래에 두거나 오른쪽 정렬과 여백을 추가할 수 있다. 헤더 셀에는 짙은 배경과 밝은 글자색을 적용해 데이터 셀과 시각적으로 구분한다.

줄무늬 행

tbody tr:nth-child(even) 선택자로 짝수 행에 옅은 배경을 적용하면 많은 데이터를 가로로 읽기 쉽다. 장식은 데이터의 의미와 대비를 해치지 않도록 단순하고 일관되게 적용한다.

13. 반응형 테이블

가로 스크롤 방식

모바일 화면보다 표의 너비가 클 때 표를 억지로 줄이면 열과 내용이 찌그러질 수 있다. 가장 쉽고 일반적인 방법은 표를 div로 감싸고 가로 스크롤을 제공하는 것이다.

.table-wrapper {
  overflow-x: auto;
  white-space: nowrap;
}

이 방식은 표의 행·열 구조와 내용을 그대로 유지하므로 데이터가 잘리면 안 되는 경우에 적합하다.

카드 목록 방식

좁은 화면에서 표의 성질을 버리고 각 행을 카드처럼 세로로 쌓는 방법도 있다. 화면에서는 원래 thead를 숨기고 각 td에 data-label 속성을 넣은 뒤 ::before로 ‘이름’, ‘직업’, ‘나이’ 같은 가짜 헤더를 표시한다.

카드 방식은 모바일에서 읽기 편하지만 열 단위 비교라는 표의 장점이 약해진다. 데이터 비교가 중요하면 가로 스크롤을, 한 레코드씩 읽는 것이 중요하면 카드 변환을 선택한다.

반응형 방식장점주의점
가로 스크롤원래 표 구조와 열 비교를 유지사용자가 좌우로 움직여야 함
카드 변환좁은 화면에서 한 레코드를 읽기 쉬움표의 열 비교 성질이 약해지고 CSS 구성이 복잡함

14. 핵심 개념 정리

  • 웹 폰트는 가독성, 브랜드 정체성, 다운로드 성능의 균형으로 선택한다.
  • font-family에는 웹 폰트, 시스템 폰트, 일반 글꼴명 순으로 폴백을 구성한다.
  • 본문 글자 크기는 rem, 반응형 제목은 clamp(), 고정된 얇은 선은 px가 적합하다.
  • font 단축 속성에서는 글자 크기와 서체가 필수이며 생략한 세부 속성은 기본값으로 초기화된다.
  • @font-face에는 woff2를 우선하고 font-display: swap으로 텍스트 표시 지연을 줄인다.
  • 한글 본문은 줄 간격 1.5~1.6, 자간 약 -0.02em, keep-all과 overflow-wrap: break-word 조합이 유용하다.
  • vertical-align은 인라인 요소와 테이블 셀의 한 줄 안 높낮이를 맞추며 블록 전체의 중앙 정렬 속성이 아니다.
  • 한 줄 말줄임은 nowrap, overflow: hidden, text-overflow: ellipsis를 함께 사용한다.
  • 목록의 간단한 마커 스타일은 ::marker, 정교한 위치와 아이콘은 ::before를 사용한다.
  • 데이터 표에는 border-collapse: collapse, table-layout: fixed를 적용하고 모바일에서는 가로 스크롤 또는 카드 변환을 선택한다.

CSS 텍스트 설계의 목적은 화려한 효과가 아니라 읽기 쉬움과 안정적인 레이아웃이다. 상대 단위와 폴백으로 다양한 환경에 대응하고, 줄바꿈·리스트·테이블 속성은 콘텐츠의 구조와 사용 상황에 맞춰 선택해야 한다.

15. 예상문제 20선

1. 웹 폰트를 설계할 때 균형 있게 고려해야 할 세 요소는?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
웹 폰트는 읽기 편해야 하고 브랜드를 표현하면서도 다운로드 성능을 해치지 않아야 한다.

2. font-family 목록의 마지막에 sans-serif를 두는 이유는?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
일반 글꼴명은 앞서 지정한 글꼴을 사용할 수 없는 최악의 경우에도 적절한 계열로 표시하게 하는 폴백이다.

3. 가변 폰트의 특징으로 옳은 것은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
가변 폰트는 여러 정적 폰트 파일의 굵기·장평 정보를 하나의 파일에 압축하여 제공할 수 있다.

4. 본문 글자 크기에 가장 권장되는 단위는?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
rem은 최상위 글자 크기에 비례하여 접근성과 크기 예측에 유리하다.

5. clamp(2rem, 5vw, 4rem)에 대한 설명으로 옳은 것은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
clamp()는 권장값을 반응형으로 사용하면서 최소값과 최대값으로 범위를 제한한다.

6. font-weight: 700이 일반적으로 나타내는 것은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
숫자 굵기에서 400은 보통, 700은 bold에 대응한다.

7. 금액 열의 숫자 폭을 같게 하여 세로 정렬하려면?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
tabular-nums는 각 숫자를 등폭으로 표시하여 금융·대시보드 수치 비교를 쉽게 한다.

8. font 단축 속성에서 반드시 지정해야 하는 두 항목은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
font-size와 font-family는 단축 속성에서 필수이며 줄 간격은 크기 뒤에 슬래시로 쓴다.

9. 웹 폰트에서 font-display: swap의 효과는?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
사용자가 글자를 기다리지 않도록 폴백 글꼴로 먼저 보여 주고 웹 폰트 로드 후 교체한다.

10. 한글 본문의 line-height 권장 범위로 강의에서 제시한 것은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
한글은 영문보다 줄 간격을 조금 넓힌 1.5~1.6 정도가 일반적으로 읽기 편하다.

11. vertical-align이 주로 작동하는 대상은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
vertical-align은 한 줄 안의 이미지·텍스트 높낮이와 테이블 셀의 정렬에 사용하며 블록 전체 중앙 정렬용이 아니다.

12. 짧은 제목의 각 줄 길이를 비슷하게 조절하는 속성은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
balance는 제목과 캡션의 줄 길이가 균형을 이루도록 줄바꿈 지점을 조정한다.

13. white-space: nowrap의 동작은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
nowrap은 줄바꿈을 금지하며 한 줄 말줄임표 구성에 사용된다.

14. 한글 단어 중간의 줄바꿈을 막는 데 적합한 것은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
keep-all은 한글 단어 내부를 자르지 않고 공백을 기준으로 줄을 바꾼다.

15. 한 줄 말줄임표를 만들 때 필요한 속성 조합은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
한 줄 유지, 넘침 숨김, 말줄임표 표시의 세 조건을 함께 지정해야 한다.

16. 리스트의 마커 색상과 문자만 간단히 바꿀 때 가장 적합한 가상 요소는?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
::marker는 목록의 마커 박스를 직접 선택해 문자, 색상과 크기를 꾸민다.

17. 데이터 테이블에서 인접한 셀 테두리를 한 줄로 합치는 속성은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
collapse는 셀별 테두리를 합쳐 깔끔한 한 줄 테두리로 표시한다.

18. table-layout: fixed의 장점으로 옳은 것은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
fixed는 콘텐츠를 모두 읽어 너비를 재계산하지 않아 빠르고 열 배치도 예측하기 쉽다.

19. 모바일에서 넓은 표의 원래 행·열 구조를 유지하는 가장 간단한 방법은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
가로 스크롤은 데이터가 잘리지 않게 하면서 표의 열 비교 구조를 그대로 유지한다.

20. 좁은 화면에서 테이블 행을 카드로 바꿀 때 각 셀의 가짜 제목을 제공하는 구성은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
각 td의 data-label 값을 가상 요소로 출력하면 헤더를 숨긴 카드에서도 항목 이름을 알 수 있다.

댓글

댓글 쓰기