CSS / display 속성으로 표 만들기 - table, table-row, table-cell
display 속성값 중 표와 관련된 값들
display 속성값으로 table, table-row, table-cell 등을 사용해서 요소를 표(table)처럼 표현할 수 있습니다. 표처럼 보이기 위해 사용할 수 있는 속성값들은 다음과 같습니다.
- table : <table> 요소처럼 표현합니다.
- table-caption : <caption> 요소처럼 표현합니다.
- table-column-group : <colgroup> 요소처럼 표현합니다.
- table-header-group : <thead> 요소처럼 표현합니다.
- table-footer-group : <tfoot> 요소처럼 표현합니다.
- table-row-group : <tbody> 요소처럼 표현합니다.
- table-cell : <td> 요소처럼 표현합니다.
- table-column : <col> 요소처럼 표현합니다.
- table-row : <tr> 요소처럼 표현합니다.
위의 속성값으로 표처럼 표현되도록 만든 후에는, 표를 꾸미는 것과 같은 방법으로 해당 요소를 꾸밀 수 있습니다. 주의할 점은, IE의 경우 8 이상에서 지원한다는 것입니다.
예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS Reference | display: table</title>
<style>
div {
border: 1px solid #bcbcbc;
}
.jb-table {
display: table;
width: 100%;
}
.jb-table-row {
display: table-row;
}
.jb-table-cell {
display: table-cell;
padding: 0px 20px;
height: 150px;
}
.jb-top {
vertical-align: top;
}
.jb-middle {
vertical-align: middle;
}
.jb-bottom {
vertical-align: bottom;
}
</style>
</head>
<body>
<div class="jb-table">
<div class="jb-table-row">
<div class="jb-table-cell">
<p>Lorem</p>
</div>
<div class="jb-table-cell">
<p>Ipsum</p>
</div>
<div class="jb-table-cell">
<p>Dolor</p>
</div>
</div>
<div class="jb-table-row">
<div class="jb-table-cell jb-top">
<p>Lorem</p>
</div>
<div class="jb-table-cell jb-middle">
<p>Ipsum</p>
</div>
<div class="jb-table-cell jb-bottom">
<p>Dolor</p>
</div>
</div>
</div>
</body>
</html>
CSS / font-size / 글자 크기 정하는 속성
개요 font-size는 글자 크기를 정하는 속성입니다. 기본값 : medium 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 font-size: medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit medium : 웹브라우저에서 정한 기본 글자크기입니다. xx-small, x-small, small, large, x-large, xx-large : medium에 ...
CSS / box-shadow / 박스에 그림자 효과 만드는 속성
개요 box-shadow는 선택한 요소에 그림자 효과를 만들어주는 속성이다. 기본값 : none 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 글자에 그림자 효과를 주고 싶다면 text-shadow를 사용한다. 문법 box-shadow: none | x-position y-position blur spread color | inset | initial | inherit none : 그림자 효과를 없앤다. x-position : 가로 위치이다. 양수면 오른쪽에, 음수면 왼쪽에 그림자가 만들어진다. (필수) y-position ...
테두리 만드는 속성 테두리는 border 속성으로 만듭니다. table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다. 기본 모양 아무런 꾸밈을 하지 않았다면 기본 모양은 테두리가 없는 것입니다. th 요소는 보통 굵은 글씨에 가운데 정렬이 기본 모양입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...
CSS / 선택자(Selector) / 가상 요소와 가상 클래스 순서
가상 요소(Pseudo-elements)를 이용하면 특정 요소 앞에 문자열이나 이미지를 넣을 수 있습니다. HTML을 변경하지 않고 요소를 추가할 수 있는 유용한 선택자입니다. 다음은 가상 요소를 이용하여 Hello라는 문자열을 추가한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> h1:before ...
개요 font-family는 글꼴을 설정하는 속성이다. 기본값 : 웹브라우저의 기본 글꼴 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 font-family: font | initial | inherit font : family-name 또는 generic-family initial : 기본값으로 설정 inherit : 부모 요소의 속성값을 상속받음 font family-name은 글꼴 이름이다. 글꼴 이름에 띄어쓰기가 있으면 작은 따옴표 또는 큰 따옴표로 감싼다. generic-family는 글꼴 유형이다. 글꼴 유형은 다음과 ...
CSS / z-index / 요소의 수직 위치 정하는 속성
z-index position 속성을 이용하면 요소를 겹치게 놓을 수 있습니다. 이때 요소들의 수직 위치를 z-index 속성으로 정합니다. 값은 정수이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록 아래로 내려갑니다. 예제 1 세 개의 div 요소를 겹치게 배치했습니다. 코드 상 나중에 입력한 것일 수록 위로 올라옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { width: 100px; height: 100px; position: absolute; } div.x { background-color: #2196F3; top: ...
CSS / Grid / grid-column-gap, grid-row-gap, grid-gap
그리드 아이템 사이의 간격을 정하는 속성은 grid-row-gap, grid-column-gap, grid-gap입니다. grid-column-gap은 열 사이의 간격, grid-row-gap은 행 사이의 간격, grid-gap은 행과 열의 간격을 동시에 정할 수 있는 축약형입니다. 아래는 아이템 사이에 간격이 없는 간단한 그리드입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...
CSS / empty-cells / 표에서 빈 셀의 테두리 표시 여부를 정하는 속성
개요 empty-cells은 표(table)에서 빈 셀의 테두리를 표시할지 말지는 정하는 속성입니다. 기본값 : show 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 empty-cells: show | hide | initial | inherit show : 빈 셀의 테두리를 보여줍니다. hide : 빈 셀의 테두리를 숨깁니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> ...
CSS / list-style-position / 목록의 마커 위치 정하는 속성
개요 list-style-position으로 ul, ol 등의 목록의 마커(marker)의 위치를 정합니다. 기본값 : outside 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 list-style-position: inside | outside | initial | inherit inside : 문단 안쪽에 놓습니다. outside : 문단 바깥쪽에 놓습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
CSS / 표(table) 꾸미기 / 틀 고정(행 또는 열 고정) 만들기
엑셀에 틀 고정이라는 기능이 있다. 틀 고정을 사용하면 상하 또는 좌우로 스크롤해도 항상 보이는 행 또는 열을 만들 수 있다. CSS로도 같은 효과를 낼 수 있다. 이를 구현하기 위해 사용하는 속성은 display: sticky이다. 예를 들어 다음과 같은 표가 있다고 하자. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...