CSS / 표(table) 꾸미기 / 틀 고정(행 또는 열 고정) 만들기
엑셀에 틀 고정이라는 기능이 있다. 틀 고정을 사용하면 상하 또는 좌우로 스크롤해도 항상 보이는 행 또는 열을 만들 수 있다. CSS로도 같은 효과를 낼 수 있다. 이를 구현하기 위해 사용하는 속성은 display: sticky이다.
예를 들어 다음과 같은 표가 있다고 하자.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
table#jb-table th, table#jb-table td { padding: 20px 80px; border: 1px solid #444444; }
table#jb-table th { background-color: #eeeeee; }
table#jb-table tbody tr td:first-child { background-color: #eeeeee; }
</style>
</head>
<body>
<h1>Sticky</h1>
<table id="jb-table">
<thead>
<tr>
<th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>F</th><th>G</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>F</th><th>G</th>
</tr>
</tfoot>
</table>
</body>
</html>
웹브라우저 창 크기가 충분히 크면 모든 내용을 볼 수 있으나...
그렇지 않은 경우 상하좌우 스크롤이 생긴다.
내용을 보기 위해 스크롤 하다보면 무엇에 대한 값인지 알 수가 없다.
제1행을 고정하고 싶다면 다음 코드를 CSS에 추가한다.
table#jb-table thead { position: sticky; top: 0; }
상하 스크롤을 해도 제1행은 항상 보인다.
제1열을 고정하고 싶다면 다음 코드를 CSS에 추가한다.
table#jb-table th:first-child,
table#jb-table td:first-child { position: sticky; left: 0; }
좌우 스크롤을 해도 제1행은 항상 보인다.
제1행과 제1열을 고정하기 위해, 위에 사용했던 코드를 다 넣으면...
table#jb-table thead { position: sticky; top: 0; }
table#jb-table th:first-child,
table#jb-table td:first-child { position: sticky; left: 0; }
제1행 제1열의 셀이 가려지게 된다.
이를 해결하는 방법은 z-index를 추가하는 것이다.
table#jb-table thead { position: sticky; top: 0; z-index: 1; }
table#jb-table th:first-child,
table#jb-table td:first-child { position: sticky; left: 0; }
이제 상하좌우 스크롤을 해도 제1행과 제1열은 항상 보인다.
마지막 행도 고정하고 싶다면 다음과 같이 한다.
table#jb-table thead { position: sticky; top: 0; z-index: 1; }
table#jb-table th:first-child,
table#jb-table td:first-child { position: sticky; left: 0; }
table#jb-table tfoot { position: sticky; bottom: 0; }
제1열과 제2열을 고정하고 싶다면 다음과 같이 한다. 제2열의 left 값은 제1열의 크기에 맞게 적절히 정한다.
table#jb-table th:first-child,
table#jb-table td:first-child { position: sticky; left: 0; }
table#jb-table th:nth-child(2),
table#jb-table td:nth-child(2) { position: sticky; left: 183px; }
이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. 우선 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...
CSS / 선택자(Selector) / 가상 요소와 가상 클래스 순서
가상 요소(Pseudo-elements)를 이용하면 특정 요소 앞에 문자열이나 이미지를 넣을 수 있습니다. HTML을 변경하지 않고 요소를 추가할 수 있는 유용한 선택자입니다. 다음은 가상 요소를 이용하여 Hello라는 문자열을 추가한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> h1:before ...
columns columns는 다단으로 만드는 속성입니다. 단의 최소 가로 크기와 단의 최대 개수가 속성의 값입니다. 기본값은 auto로, 값을 입력하지 않으면 auto로 처리합니다. IE는 버전 10 이상을 지원합니다. 예제 1 문단을 3단으로 만듭니다. 단의 최소 가로 크기가 설정되지 않았으므로 균등한 크기로 단이 만들어집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb { columns : 3; } </style> </head> <body> <p class="jb">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ...
CSS / overflow / 내용이 요소의 크기를 벗어났을 때 처리 방법 정하는 속성
개요 overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 2 문법 overflow: visible | hidden | scroll | auto | initial | inherit visible : 박스를 넘어가도 보여줍니다. hidden : 박스를 넘어간 부분은 보이지 않습니다. scroll : 박스를 넘어가든 넘어가지 않든 스크롤바가 나옵니다. auto : 박스를 ...
CSS / IE8 이하에서 border-radius, box-shadow 적용시키는 방법
CSS3에서 많은 속성이 추가되었습니다. 그 중에서 개인적으로 가장 많이 사용하는 것이 border-radius입니다. 테두리를 둥글게 만들거나 이미지를 원으로 만들 때 이미지 편집 프로그램을 사용할 필요가 없기 때문입니다. 하지만 문제가 있습니다. IE8 이하에서는 적용되지 않는다는 것이죠. 이 문제를 해결해주는 것이 PIE입니다. 간단한 코드 한 줄로 IE8 이하에서도 border-radius를 적용시킬 수 있습니다. PIE 다운로드 다음 링크에서 PIE를 다운로드 받습니다. http://css3pie.com/download/ 업로드 압축을 풀면 ...
justify-content로 flex-direction으로 정한 방향으로의 정렬을 정합니다. 예를 들어 flex-direction의 값이 row라면 가로 방향의 정렬을 정합니다. 기본값은 flex-start로 시작점부터 아이템을 배치합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> * { ...
CSS / CSS로 문자열 자르기 - 한 줄인 경우, 여러 줄인 경우
웹페이지에 출력하는 문자열의 길이는 서버단에서 조절하는 게 보통입니다. 하지만, 어떤 경우에는 그게 불가능할 수 있습니다. 이미 전송 받은 문자열을 잘라야 하는 상황이 생길 수 있습니다. CSS를 이용하여 문자열의 일부만 보여주는 방법을 소개해드립니다. 한 줄인 경우 예제 문자열이 길면 다음처럼 화면 끝에서 줄바꿈되는 것이 기본 모양입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> p.a { font-family: sans-serif; font-size: 20px; } </style> </head> <body> <p class="a">Lorem ipsum dolor sit ...
개요 border는 다음의 속성을 포함하는 단축 속성으로, 테두리를 만든다. border-width border-style border-color 문법 border: border-width border-style border-color | initial | inherit border-width : 테두리의 두께를 정한다. 기본값은 medium이다. border-style : 테두리의 모양을 정한다. 기본값은 none이다. border-color : 테두리의 색을 정한다. 기본값은 선택한 요소의 색이다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속받는다. border-width에는 다음의 값을 넣을 수 있다. medium | thick ...
CSS / background-attachment / 배경 이미지의 스크롤 여부를 정하는 속성
개요 background-attachment로 배경 이미지의 스크롤 여부를 정합니다. 기본값 : scroll 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-attachment: scroll | fixed | local | initial | inherit scroll : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지는 스크롤되지 않습니다. fixed : 움직이지 않습니다. local : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지도 스크롤됩니다. initial : 기본값으로 ...
CSS / display 속성의 값을 inline 또는 inline-block으로 했을 때 여백 조정하는 방법
inline 또는 inline-block의 여백 display 속성값으로 inline 또는 inline-block으로 정하면 요소들이 가로로 배열됩니다. 이 때 요소와 요소 사이에 여백이 생깁니다. 예를 들어 다음과 같이 순서 없는 목록을 가로로 배열해보겠습니다.(여백을 파악하기 위해 테두리를 만들었습니다.) <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...