이 시리즈는 필자가 웹프로그래밍을 겪으면서 생각처럼 잘안되고 짜증나는 css를 효율적이게 쓰기위해서 만든 시리즈이다.
여기에 들어온 여러분들도 이 쓰레기 같은 css의 고통을 같이 덜수 있기를 바란다.
참고:
css지옥에서 탈출하자(1) - 인라인 요소(inline element)와 블록 요소(block element)는 다르다.
css지옥에서 탈출하자(2) - display와 인라인(inline), 블록(block) 그리고 div를 display를 이용해서 옆으로 나열
css지옥에서 탈출하자(3) - display와 flex, 세로로 뭔가 배치하고 싶다면 flexbox를 쓰자, (추가로 div를 flex로 나열, 비율에 맞게 div 세로로 배치)
css지옥에서 탈출하자(5) - 엘리먼트를 드래그 앤 드랍(drag and drop)으로 자유롭게 옮긴다고?
css지옥에서 탈출하자(6) - css로 삼각형을 그려보자
css지옥에서 탈출하자(7) - display inline-block 나열시 공백 제거하기
css지옥에서 탈출하자(8) - div에 transition을 줘서 부드럽게 애니메이션 효과로 움직이기
css지옥에서 탈출하자(9) - 스크롤바가 없는 스크롤을 만든다?
css지옥에서 탈출하자(10) - 현재 내가 얼마나 스크롤(scroll)했는지 부여주고 싶을 때, 진행도(progressed) 표시
css를 사용하면서 table을 관리하는건 정말 짜증나는 일이다.
왜냐하면 table은 block도 아니가 inline도 아니가 table-cell이라는 독자적인 display를 가지기 때문이다.
누가 만들었는지는 몰라도 정말 짜증난다.
이 포스팅을 올리는 이유는 기획단계에서 다음과 같은 작업을 해야했기 때문이다.
큰 공간은 모든 여백을 다 차지하고 문자열은 줄바꿈 안되고 ...을 처리한다.
작은 공간은 항상 가장 작은 공간을 차지하지만 줄바꿈이 일어나지는 않는다.
문제는 이 요구사항을 모두 수용하기가 생각보다 까다롭다는 점이다.
그래서 몇가지 타협을 봐야했다.
1.먼저 table-layout을 fixed로 걸어서 가로 크기를 고정시킨다.(세로도 고정되는데 공간 부족하면 세로는 늘어날 수 있다.)
2.큰 공간의 td 엘리먼트에 white-space를 nowrap으로 걸어서 줄바꿈이 일어나지 않게 한다.
3.큰 공간의 td 엘리먼트에 overflow를 hidden으로 걸어서 값이 넘치면 무시하도록 한다.
4.큰 공간의 td 엘리먼트에 text-overflow에 ellipsis를 글어서 넘어가는 값을 ...처리하도록하자.
5.작은 공간의 td 엘리먼트에서 영어는 상관없는데 한글의 경우 한글자 단위로 줄바꿈이 일어난다. 이를 무시하려면 word-break keep-all을 걸어준다.
문제는 영어와 한글의 처리가 다르다. 정확히 말하면 CJK(한중일)과 none-CJK의 처리가 다르다는 것이다.
그래서 각각 적용했을 때 어떤느낌이 될지 아래의 예시로 표현하려한다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="outer">
<table>
<thead>
<tr>
<th style="width: 70%;">
이름
</th>
<th>
나이
</th>
<th>
성별
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="white-space: nowrap;">
태정태세문단세예선연중인명선광인효현숙경영정순헌철고순
</td>
<td>
1200
</td>
<td>
신
</td>
</tr>
<tr>
<td>
태정태세문단세예선연중인명선광인효현숙경영정순헌철고순
</td>
<td>
1200
</td>
<td>
신
</td>
</tr>
<tr>
<td style=" white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
태정태세문단세예선연중인명선광인효현숙경영정순헌철고순
</td>
<td>
1200
</td>
<td>
신
</td>
</tr>
<tr>
<td>
abcdefghijklmnopqrstuvwxyz
</td>
<td>
1200
</td>
<td>
신
</td>
</tr>
<tr>
<td style="word-break: break-all;">
abcdefghijklmnopqrstuvwxyz
</td>
<td>
1200
</td>
<td style="word-break: keep-all;">
신발
</td>
</tr>
<tr>
<td style="overflow:hidden; text-overflow:ellipsis;">
abcdefghijklmnopqrstuvwxyz
</td>
<td>
1200
</td>
<td>
신발끈
</td>
</tr>
<tr>
<td>
Classic 클리셰
</td>
<td>
1200
</td>
<td>
신
</td>
</tr>
<tr>
<td>
클리셰 Classic
</td>
<td>
1200
</td>
<td>
신
</td>
</tr>
</tbody>
</table>
</div>
<style>
#outer {
width: 100%;
height: 400px;
}
table {
width: 100%;
height: 100%;
table-layout: fixed;
}
th {
background-color: blue;
}
td {
background-color: red;
}
</style>
</body>
</html>
'Usage > WEB-HTML-CSS' 카테고리의 다른 글
| css지옥에서 탈출하자(15) - html svg에서 text(글자) 가운데 정렬하기(수직, 수평 중앙정렬) (0) | 2019.08.01 |
|---|---|
| css지옥에서 탈출하자(14) - 특정 element를 우클릭했을시 새탭과 새창 고르는 창(context menu)뜨게하기 (0) | 2019.05.28 |
| css지옥에서 탈출하자(12) - 반응형과 미디어 쿼리 완전 기초 (0) | 2019.04.18 |
| css지옥에서 탈출하자(11) - css로 원을 그려보자. 원속의 원 만들기(과녁처럼) (0) | 2019.02.27 |
| css지옥에서 탈출하자(10) - 현재 내가 얼마나 스크롤(scroll)했는지 부여주고 싶을 때, 진행도(progressed) 표시 (1) | 2019.02.19 |