CSS / border-spacing / 표(table)의 테두리와 셀(td)의 테두리 사이의 간격 정하는 속성
개요
border-spacing으로 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 정한다.
- 기본값 :
2px - 상속 : Yes
- 애니메이션 : No
- 버전 : CSS Level 2
border-spacing은 border-collapse의 값이 separate일 때만 적용된다.
문법
border-spacing: length | initial | inherit
length: 길이를 입력한다. 값이 한개면 모든 간격에 같은 값을 사용하고, 값이 두개면 첫번째 값은 좌우, 두번째 값은 상하의 간격으로 사용힌다.initial: 기본값으로 설정한다.inherit: 부모 요소의 속성값을 상속받는다.
예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
table {
width: 100%;
border: 1px solid #333333;
}
td {
padding: 10px;
border: 1px solid #333333;
}
.a {
border-spacing: 0px;
}
.b {
border-spacing: 5px;
}
.c {
border-spacing: 10px;
}
.d {
border-spacing: 5px 10px;
}
</style>
</head>
<body>
<h1>Border Spacing : Default</h1>
<table>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td>
</tr>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td>
</tr>
</table>
<h1>Border Spacing : 0px</h1>
<table class="a">
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td>
</tr>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td>
</tr>
</table>
<h1>Border Spacing : 5px</h1>
<table class="b">
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td>
</tr>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td>
</tr>
</table>
<h1>Border Spacing : 10px</h1>
<table class="c">
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td>
</tr>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td>
</tr>
</table>
<h1>Border Spacing : 5px 10px</h1>
<table class="d">
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td>
</tr>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td>
</tr>
</table>
</body>
</html>
그리드에서 열 개수는 grid-template-columns로 정합니다. 그 개수를 넘어가면 행이 바뀌죠. 그리고 높이는 행마다 다르게 정해집니다. 예를 들어 다음과 같은 HTML 문서가 있을 때, 첫번째 행의 높이와 다른 행의 높이는 다릅니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...
CSS / border-radius / 테두리 둥글게 만드는 속성
border-radius border-radius는 테두리를 둥글게 만드는 속성입니다. CSS3에서 정의되었으며, IE는 버전 9부터 지원합니다.(IE8에서 사용하는 방법) 8개의 속성 값을 넣어야 하지만, 값이 같다면 짧게 쓸 수 있습니다. 다음 상자의 테두리를 여러 가지 방식으로 둥글게 만들어보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { box-sizing: border-box; width: 200px; height: 200px; margin: 20px auto; background-color: orange; } </style> </head> <body> <div class="jb"></div> </body> </html> 문법 1 border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y 속성의 ...
order 속성으로 그리드 아이템의 순서를 변경할 수 있습니다. 시각적인 순서만 바뀔 뿐 문서 구조가 바뀌는 것은 아닙니다. order 속성의 기본값은 0입니다. 값이 같은 경우 입력된 순서대로 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...
CSS의 border-radius 속성으로 원을 만들 수 있다. 원 만들기 HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만든다. <div class="circle"></div> 적절히 크기를 정하여 정사각형을 만들고, 배경색을 넣는다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .circle { ...
CSS / box-sizing / 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성
개요 box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성이다. 기본값 : content-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 box-sizing: content-box | border-box | initial | inherit content-box : 콘텐트 영역을 기준으로 크기를 정한다. border-box : 테두리를 기준으로 크기를 정한다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속받는다. 예제 <!doctype html> <html lang="ko"> <head> ...
align-items로 교차축(cross axis) 아이템 정렬을 정합니다. 예를 들어 flex-direction의 값이 row인 경우 수직 정렬을 정합니다. 아래는 flex-direction: row일 때의 예제입니다. 기본값은 stretch로, 콘테이너의 높이에 맞게 늘립니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...
높이가 같은 박스 만들기 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; font-family: Consolas, monospace; ...
display: flex Flex로 요소를 배열하고 싶을 때 Container에 display: flex;를 추가한다. 아래와 같은 문서에... <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb-container { padding: 10px; ...
개요 flex-wrap은 아이템들의 가로 크기 합이 콘테이너의 가로 크기를 넘어갈 때 어떻게 처리할지를 정한다. 문법 flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit nowrap : 기본값으로, 넘기지 않는다. wrap : 넘긴다. wrap-reverse : 역순으로 넘긴다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속 받는다. 예제 - nowrap 기본값은 nowrap으로... <!doctype html> <html lang="ko"> <head> ...
CSS / background-clip / 배경을 어디에 넣을지 정하는 속성
개요 HTML 요소는 박스(box)로 이루어져 있습니다. 배경 이미지나 배경색을 그 박스 중 어디에 넣을 지 정하는 속성이 background-clip입니다. 기본값 : border-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 background-clip: border-box | padding-box | content-box | initial | inherit; border-box : 테두리 영역과 그 안쪽 영역을 채웁니다. padding-box : 안쪽 여백 영역과 그 안쪽 영역을 채웁니다. content-box : 내용 영역과 그 안쪽 영역을 채웁니다. initial : ...