q1: HTML에서 Ellipsis 적용
a1:
HTML에서 Ellipsis 적용이란?
HTML에서 **ellipsis(말줄임표)**를 적용한다는 것은 텍스트가 지정된 영역을 초과할 때 ... 형식으로 생략하여 표시하는 것을 의미합니다.
이는 주로 CSS의 text-overflow 속성을 사용하여 구현합니다.
1. Ellipsis를 적용하기 위한 CSS
필수 조건
1. 텍스트가 한 줄로 표시되어야 함.
• white-space: nowrap; 설정.
2. 텍스트가 영역을 넘어가지 않도록 제한해야 함.
• overflow: hidden; 설정.
3. 말줄임표(…)를 표시.
• text-overflow: ellipsis; 설정.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ellipsis 적용</title>
<style>
.ellipsis {
width: 200px; /* 최대 너비 설정 */
white-space: nowrap; /* 텍스트를 한 줄로 제한 */
overflow: hidden; /* 넘친 내용 숨김 */
text-overflow: ellipsis; /* 말줄임표 추가 */
border: 1px solid #ccc; /* 시각적 확인용 */
}
</style>
</head>
<body>
<div class="ellipsis">
이 텍스트는 너무 길어서 화면에 표시되지 않을 경우 말줄임표로 표시됩니다.
</div>
</body>
</html>
2. 다중 줄 텍스트에서 Ellipsis 적용
한 줄이 아닌 여러 줄에서 말줄임표를 사용하려면 CSS의 -webkit-line-clamp 속성을 사용합니다.
이는 주로 CSS의 Flexbox 또는 block 컨텍스트와 함께 사용되며, display: -webkit-box; 설정이 필요합니다.
예제 코드 (다중 줄 말줄임)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-line Ellipsis</title>
<style>
.multi-ellipsis {
width: 300px; /* 최대 너비 설정 */
height: 60px; /* 최대 높이 설정 (3줄 기준) */
overflow: hidden; /* 넘친 내용 숨김 */
display: -webkit-box; /* Flexbox 컨텍스트 */
-webkit-line-clamp: 3; /* 최대 줄 수 설정 */
-webkit-box-orient: vertical; /* 텍스트 방향 설정 */
text-overflow: ellipsis; /* 말줄임표 추가 */
border: 1px solid #ccc; /* 시각적 확인용 */
}
</style>
</head>
<body>
<div class="multi-ellipsis">
이 텍스트는 여러 줄에 걸쳐 화면에 표시되지만, 설정된 최대 줄 수를 초과할 경우 말줄임표로 표시됩니다. 말줄임표는 사용자가 내용을 더 쉽게 이해할 수 있도록 만들어줍니다.
</div>
</body>
</html>
3. 주요 속성 요약
속성 설명
overflow: hidden; 넘치는 콘텐츠를 숨김.
white-space: nowrap; 텍스트를 한 줄로 제한.
text-overflow: ellipsis; 넘친 텍스트에 말줄임표(…)를 추가.
-webkit-line-clamp 다중 줄 제한을 설정 (주로 Webkit 기반 브라우저에서 사용 가능).
-webkit-box-orient Flexbox에서 텍스트 방향을 세로로 지정.
4. Ellipsis 적용 시 주의사항
1. 너비/높이 설정 필요:
• width 또는 max-width를 명시적으로 지정해야 정상적으로 동작.
• 다중 줄의 경우 height도 설정해야 함.
2. 브라우저 호환성:
• 한 줄 Ellipsis는 모든 주요 브라우저에서 지원.
• 다중 줄 Ellipsis는 **WebKit 기반 브라우저(Chrome, Edge, Safari 등)**에서 주로 지원.
3. 접근성 고려:
• 말줄임표가 적용된 경우, 전체 텍스트를 툴팁이나 “더보기” 버튼으로 제공하는 것이 바람직함.
툴팁을 통한 전체 텍스트 제공 예제
<div class="ellipsis" title="이 텍스트는 너무 길어서 화면에 표시되지 않을 경우 말줄임표로 표시됩니다.">
이 텍스트는 너무 길어서 화면에 표시되지 않을 경우 말줄임표로 표시됩니다.
</div>
5. 결론
Ellipsis는 긴 텍스트를 제한된 영역 내에서 깔끔하게 표시하기 위한 CSS 솔루션입니다.
• 한 줄 텍스트에는 text-overflow: ellipsis와 white-space: nowrap을 조합하여 사용.
• 다중 줄 텍스트에는 -webkit-line-clamp를 활용하여 유연하게 구현 가능합니다.
HTML에서 Ellipsis 적용 241121
2024. 11. 21. 06:34
반응형