CSS 강좌 / 넘치는 콘텐츠와 긴 문자열 처리하기
콘텐츠가 상자보다 많을 때 overflow는 밖으로 보이게 둘지, 가릴지, 스크롤하게 할지를 정합니다. 긴 문자열은 줄바꿈 규칙을 먼저 확인하고, 읽어야 할 내용은 무작정 숨기지 않아야 합니다. 한 줄 말줄임표는 너비 제한·줄바꿈 금지·넘침 숨김 조건을 함께 갖춰야 표시됩니다.
같은 내용으로 overflow 네 값 비교하기
| 값 | 넘친 부분 | 사용자가 스크롤하는 방식 |
|---|---|---|
| visible | 상자 밖에도 보임 | 해당 박스 자체에 스크롤을 만들지 않음 |
| hidden | 경계 밖을 가림 | 기본 스크롤바나 일반적인 사용자 스크롤을 제공하지 않음 |
| auto | 경계 안에 표시 | 넘침이 있을 때 필요한 스크롤 제공 |
| scroll | 경계 안에 표시 | 넘침 여부와 관계없이 스크롤 컨테이너를 만듦 |
scrollbar의 실제 모양과 항상 보이는지는 운영체제·브라우저의 오버레이 스크롤바 설정에 따라 다릅니다. scroll을 지정했다고 모든 환경에서 막대가 계속 보이는 것은 아닙니다. hidden도 스크립트나 포커스 이동 등으로 스크롤될 수 있어 “내용 자체가 없어졌다”는 뜻은 아닙니다. 아예 스크롤을 금지하는 clip은 별도 값이며 hidden과 같다고 생각하지 마세요. MDN의 overflow 설명에 세부 동작이 설명되어 있습니다.
일반 본문을 고정 높이와 hidden으로 처리하면 문장 추가·번역·글자 확대 때 정보가 사라질 수 있습니다. 높이를 내용에 맡기는 것을 먼저 검토하고, 별도 패널처럼 크기 제한이 필요한 경우에 auto를 사용하세요. 전체 예제는 같은 문장 네 개를 같은 96px 상자에 넣어 값만 비교합니다. visible 부분 뒤에는 넘친 글자가 다음 설명을 가리지 않도록 실습용 여유 공간을 두었습니다.
긴 URL은 필요한 곳에서 줄바꿈하기
.url { overflow-wrap: anywhere; }
공백이 없는 URL·식별 코드·긴 단어는 줄바꿈할 지점이 부족해 상자를 밀어낼 수 있습니다. overflow-wrap: anywhere는 필요한 경우 문자열 중간에도 줄바꿈 기회를 줍니다. 글자 자체를 삭제하거나 문자열 값에 줄바꿈 문자를 넣는 것은 아닙니다. 표시만 바뀌므로 원래 문자열을 유지할 수 있습니다.
word-break: break-all을 모든 본문에 적용하면 정상적인 단어도 잘게 나뉘어 읽기 어려워질 수 있습니다. 먼저 긴 값이 들어가는 영역에만 줄바꿈 규칙을 적용하세요. Flexbox·Grid에서 자식이 줄어들지 않는 문제는 자동 최소 크기도 관련되며, 해당 배치를 배우는 단계에서 min-width: 0을 함께 확인합니다. 문자열 처리만으로 모든 배치 넘침이 해결되는 것은 아닙니다. MDN의 overflow-wrap 설명를 참고하세요.
말줄임표가 보이려면 네 조건이 필요합니다
.title {
width: 100%;
max-width: 320px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
| 조건 | 이유 | 빠졌을 때 관찰할 점 |
|---|---|---|
| 실제로 제한된 너비 | 내용이 넘치는 상황이 필요 | 상자가 내용에 맞춰 커지면 말줄임이 필요 없음 |
| white-space: nowrap | 한 줄에 유지 | 여러 줄로 줄바꿈되어 비교 조건이 달라짐 |
| overflow: hidden | 상자 밖을 가림 | 넘친 글자가 밖으로 보일 수 있음 |
| text-overflow: ellipsis | 잘린 끝을 말줄임표로 표시 | 가리기만 하면 끝이 그냥 잘림 |
text-overflow 자체가 상자의 크기나 줄바꿈을 정해 주지는 않습니다. 여러 줄 말줄임도 이 한 줄 예제와는 별도 방법입니다. 전체 예제는 아래 문단에 온전한 제목을 함께 표시하므로 잘린 내용을 다시 읽을 수 있습니다. 중요한 안내나 오류 메시지처럼 원문이 꼭 필요한 내용은 다른 곳에서 확인할 방법 없이 가리지 마세요. title 속성의 마우스 툴팁만을 유일한 원문 제공 방법으로 삼지 않는 것이 좋습니다. MDN의 text-overflow 설명를 참고하세요.
스크롤 영역의 키보드 접근 확인하기
<div class="panel auto" tabindex="0" role="region" aria-label="안내문 스크롤 영역"> <p>안내문 내용</p> </div>
브라우저에 따라 스크롤 영역이 자동으로 키보드 포커스를 받기도 하고 받지 못하기도 합니다. 접근이 필요한 패널에 tabindex="0"을 지정하면 일반적인 Tab 순서로 이동할 수 있습니다. role="region"과 내용을 설명하는 이름은 보조 기술 이용자가 어느 영역에 들어왔는지 이해하는 데 도움이 됩니다. 모든 상자를 무조건 포커스 대상이나 영역으로 만들 필요는 없습니다.
예제는 실제 스크롤이 필요한 auto·scroll 패널에만 키보드 접근과 이름을 지정하고, 포커스 윤곽선을 표시합니다. Tab으로 들어간 뒤 방향키나 Page Down으로 마지막 문단까지 이동할 수 있는지 확인하세요. 좁은 화면에서는 패널 내부 스크롤과 페이지 스크롤이 구분되는지도 확인합니다.
전체 예제로 넘침과 말줄임 재현하기
아래 코드를 overflow.html에 UTF-8로 저장해 엽니다. 같은 내용의 네 패널, 긴 URL, 원문을 보존한 말줄임 제목을 모두 포함했습니다. example.com 주소는 줄바꿈을 관찰하는 문자열이며 실제 자료 링크가 아닙니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>넘치는 콘텐츠 비교</title>
<style>
* { box-sizing: border-box; }
body { margin: 16px; color: #333; font: 16px/1.6 sans-serif; }
.panel { width: 100%; max-width: 320px; height: 96px; padding: 12px;
border: 2px solid #777; background: #eef6fa; }
.panel p { margin: 0 0 8px; }
.visible { overflow: visible; }
.visible-stage { padding-bottom: 240px; }
.hidden { overflow: hidden; }
.auto { overflow: auto; }
.scroll { overflow: scroll; }
.panel:focus-visible { outline: 3px solid #e58c1f; outline-offset: 3px; }
.url { max-width: 320px; padding: 12px; border: 1px solid #777; overflow-wrap: anywhere; }
.title { width: 100%; max-width: 320px; padding: 12px; border: 1px solid #777;
overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.original { max-width: 320px; }
</style>
</head>
<body>
<h1>넘침과 말줄임 비교</h1>
<section class="visible-stage"><h2>visible</h2><div class="panel visible"><p>정원 안내문은 끝까지 읽어야 합니다. 같은 문장을 여러 번 넣어 넘치는 상황을 비교합니다.</p><p>정원 안내문은 끝까지 읽어야 합니다. 같은 문장을 여러 번 넣어 넘치는 상황을 비교합니다.</p><p>정원 안내문은 끝까지 읽어야 합니다. 같은 문장을 여러 번 넣어 넘치는 상황을 비교합니다.</p><p>정원 안내문은 끝까지 읽어야 합니다. 같은 문장을 여러 번 넣어 넘치는 상황을 비교합니다.</p></div></section>
<section class="hidden-stage"><h2>hidden</h2><div class="panel hidden"><p>정원 안내문은 끝까지 읽어야 합니다. 같은 문장을 여러 번 넣어 넘치는 상황을 비교합니다.</p><p>정원 안내문은 끝까지 읽어야 합니다. 같은 문장을 여러 번 넣어 넘치는 상황을 비교합니다.</p><p>정원 안내문은 끝까지 읽어야 합니다. 같은 문장을 여러 번 넣어 넘치는 상황을 비교합니다.</p><p>정원 안내문은 끝까지 읽어야 합니다. 같은 문장을 여러 번 넣어 넘치는 상황을 비교합니다.</p></div></section>
<section class="auto-stage"><h2>auto</h2><div class="panel auto" tabindex="0" role="region" aria-label="auto 넘침 비교"><p>정원 안내문은 끝까지 읽어야 합니다. 같은 문장을 여러 번 넣어 넘치는 상황을 비교합니다.</p><p>정원 안내문은 끝까지 읽어야 합니다. 같은 문장을 여러 번 넣어 넘치는 상황을 비교합니다.</p><p>정원 안내문은 끝까지 읽어야 합니다. 같은 문장을 여러 번 넣어 넘치는 상황을 비교합니다.</p><p>정원 안내문은 끝까지 읽어야 합니다. 같은 문장을 여러 번 넣어 넘치는 상황을 비교합니다.</p></div></section>
<section class="scroll-stage"><h2>scroll</h2><div class="panel scroll" tabindex="0" role="region" aria-label="scroll 넘침 비교"><p>정원 안내문은 끝까지 읽어야 합니다. 같은 문장을 여러 번 넣어 넘치는 상황을 비교합니다.</p><p>정원 안내문은 끝까지 읽어야 합니다. 같은 문장을 여러 번 넣어 넘치는 상황을 비교합니다.</p><p>정원 안내문은 끝까지 읽어야 합니다. 같은 문장을 여러 번 넣어 넘치는 상황을 비교합니다.</p><p>정원 안내문은 끝까지 읽어야 합니다. 같은 문장을 여러 번 넣어 넘치는 상황을 비교합니다.</p></div></section>
<h2>긴 URL 줄바꿈</h2><p class="url">https://example.com/abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<h2>한 줄 말줄임</h2><p class="title">작은 정원에서 하루 동안 배우는 식물 관리와 방문 준비 안내</p>
<p class="original">전체 제목: 작은 정원에서 하루 동안 배우는 식물 관리와 방문 준비 안내</p>
</body>
</html>
- 네 패널의 마지막 문단을 비교합니다. visible에서는 경계 밖에 보이고 hidden에서는 가려지며 auto·scroll에서는 내부로 이동해 읽을 수 있어야 합니다.
- auto 패널의 문단을 하나만 남깁니다. 내용이 충분히 짧아지면 스크롤할 여지가 사라지는지 확인하고 네 문단으로 복원합니다. 막대가 보이는지만으로 넘침 여부를 판단하지 마세요.
- Tab으로 auto 패널에 이동해 방향키로 아래쪽 내용을 확인합니다. 포커스 윤곽선이 보이는지 확인한 뒤 Shift+Tab으로 앞 대상으로 이동합니다.
- URL의 overflow-wrap 선언을 끄고 창을 좁힙니다. 긴 문자열이 가로로 넘치는지 확인한 뒤 anywhere를 복원합니다.
- 제목의 text-overflow만 clip으로 바꾸어 말줄임표 없이 잘리는 결과를 비교합니다. 다음에는 nowrap을 normal로 바꾸어 줄바꿈되는 결과를 확인하고 원래 값으로 되돌립니다.
페이지 전체가 가로로 밀리면 가장 넓은 요소와 부모의 최소 너비·padding을 확인하세요. 읽어야 할 내용이 사라지면 고정 높이와 hidden부터 확인합니다. 스크롤이나 말줄임을 추가하기 전에 원문을 보존할 방법과 실제 조작 가능성을 함께 판단해야 합니다.
웹페이지에 출력하는 문자열의 길이는 서버단에서 조절하는 게 보통입니다. 하지만, 어떤 경우에는 그게 불가능할 수 있습니다. 이미 전송 받은 문자열을 잘라야 하는 상황이 생길 수 있습니다. CSS를 이용하여 문자열의 일부만 보여주는 방법을 소개해드립니다.
표의 자동·고정 레이아웃, 30:70 열 너비, 긴 문자열의 영향을 같은 데이터로 비교합니다. 모바일 가로 스크롤과 키보드 이동을 확인하고 말줄임 원문을 보존하는 방법을 설명합니다.
CSS 사용자 지정 속성을 :root와 특정 구성 요소에 선언하고 var()로 색과 간격을 재사용하는 방법을 설명합니다. 상속 범위, 값이 없을 때의 대체값, 유효하지 않은 값의 처리도 예제로 확인합니다.
테두리와 윤곽선의 차이, 둥근 모서리, 그림자의 이동·흐림·퍼짐을 설명합니다. 원·타원과 부모 영역에서 그림자가 잘리는 상황을 실제 예제로 비교합니다.
CSS / Tutorial / 유튜브 동영상을 반응형으로 삽입하는 방법
유튜브 영상을 블로그나 홈페이지에 넣을 때 보통 iframe을 사용합니다. 코드는 유튜브 영상 공유에서 를 클릭하여 구할 수 있습니다. 아래와 같은 코드인데, 고정폭입니다. 즉 웹브라우저의 가로폭이 커지든 작아지든 가로폭이 일정합니다. 이를 반응형으로 만들고 싶다면 아래처럼 합니다.
글의 완급 조절, 내용 전환 등을 위해 구분선을 사용하는 경우가 많습니다. 선은 여러 가지 방식으로 만들 수 있는데, 보기 좋게 꾸미는 것은 CSS로 합니다. 아래는 div 태그에 모양을 입혀서 구분선을 만드는 몇 가지 예제입니다.
CSS 강좌 / 문단과 목록의 간격, 정렬, 목록 표시 설정하기
문단 안의 줄 간격, 문단 사이 여백, 첫 줄 들여쓰기를 구분합니다. 긴 목록을 이용해 outside·inside 표시 위치와 항목 간격을 비교하고 정렬 문제를 확인할 수 있습니다.
CSS / Tutorial / 세로 가운데 정렬하는 방법
CSS에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다. 요소의 가로 가운데 정렬은 margin 속성을 이용합니다. 세로 정렬을 가운데로 하려면 어떻게 해야 할까요? 네 가지 방법을 소개합니다.
CSS 강좌 / ::before와 ::after로 가상 요소 꾸미기
::before와 ::after로 HTML을 늘리지 않고 장식용 점과 선을 추가합니다. content·display·currentColor의 역할, 실제 적용 전후 화면, 전체 코드와 가상 요소가 안 보일 때의 점검 방법을 설명합니다.
CSS로 삼각형을 만들 수 있다면 마름모는 쉽게 만들 수 있습니다. 삼각형을 두 개 붙이면 마름모가 되기 때문입니다. 마름모는 네 변의 길이가 같은 사각형이므로, 이등변삼각형 두 개를 붙이며 됩니다.