CSS / 표(table) 꾸미기 / 크기 정하기
표와 셀의 기본 크기
표와 셀의 크기는 정해져있지 않습니다. 내용이 짧으면 작게, 내용이 길면 크게 표와 셀이 만들어집니다. 의도하지 않은 결과가 나오지 않게 하려면 크기를 정하는 게 좋습니다.
크기를 직접 정할 때 사용하는 속성은 width 속성과 height 속성입니다. 다음은 크기를 파악하기 위해 테두리만 추가한 간단한 표입니다. 여기에 스타일을 추가해서 크기를 변경해보도록 하겠습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
table, th, td {
border: 1px solid #bcbcbc;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th class="jb-th-1">Lorem</th>
<th>Ipsum</th>
<th>Dolor</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem</td>
<td>Ipsum</td>
<td>Dolor</td>
</tr>
<tr>
<td>Lorem</td>
<td>Ipsum</td>
<td>Dolor</td>
</tr>
</tbody>
</table>
</body>
</html>
표의 가로 크기
표 전체의 가로 크기를 정하고 싶다면 table 요소의 가로 크기를 width 속성으로 정합니다.
<style>
table, th, td {
border: 1px solid #bcbcbc;
}
table {
width: 600px;
}
</style>
가로로 꽉 찬 표를 만들고 싶다면 크기의 값을 100%로 합니다.
<style>
table, th, td {
border: 1px solid #bcbcbc;
}
table {
width: 100%;
}
</style>
표의 세로 크기
표 전체의 세로 크기를 정하고 싶다면 table 요소의 세로 크기를 height 속성으로 정합니다.
<style>
table, th, td {
border: 1px solid #bcbcbc;
}
table {
width: 100%;
height: 200px;
}
</style>
셀의 가로 크기
셀의 가로 크기를 정하고 싶다면 th 또는 td 요소의 가로 크기를 width 속성으로 정합니다. 가로 크기를 정하면 같은 열에 있는 모든 셀의 가로 크기가 같이 바뀝니다.
<style>
table, th, td {
border: 1px solid #bcbcbc;
}
.jb-th-1 {
width: 400px;
}
</style>
셀의 세로 크기
셀의 세로 크기를 정하고 싶다면 th 또는 td 요소의 세로 크기를 height 속성으로 정합니다. 세로 크기를 정하면 같은 행에 있는 모든 셀의 세로 크기가 같이 바뀝니다.
<style>
table, th, td {
border: 1px solid #bcbcbc;
}
.jb-th-1 {
width: 400px;
height: 100px;
}
</style>
안쪽 여백으로 셀의 크기 정하기
padding 속성으로 셀의 크기를 변경할 수 있습니다.
<style>
table, th, td {
border: 1px solid #bcbcbc;
}
.jb-th-1 {
padding: 20px 30px;
}
</style>
표와 셀의 크기를 같이 정하는 경우
셀의 가로 크기 합에 상관 없이 표의 가로 크기로 표가 만들어집니다. 셀의 세로 크기의 합이 표의 세로 크기보다 크면 셀의 세로 크기의 합으로 표가 만들어집니다.
<style>
table, th, td {
border: 1px solid #bcbcbc;
}
table {
width: 600px;
height: 200px;
}
th {
width: 300px;
height: 200px;
}
</style>
위 표의 크기는 600x264입니다.
CSS / content / 요소 앞 또는 뒤에 텍스트, 이미지 등 콘텐트 추가하기
content content 속성은 선택한 요소의 앞이나 뒤에 텍스트, 이미지 등을 추가한다. 예를 들어 p 요소 앞에 콘텐트를 넣으려면 다음과 같이 하고 p:before { content: xxx; } 뒤에 넣으려면 다음과 같이 한다. p:after { content: xxx; } 텍스트 추가하기 p 요소 앞에 Hello World를 추가한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
CSS / backface-visibility / 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성
backface-visibility backface-visibility는 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 backface-visibility: visible | hidden | initial | inherit visible : 보이게 합니다. 기본값입니다. hidden : 보이지 않게 합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 체크박스에 체크하면 박스가 180도 회전합니다. 첫 번째 박스는 앞면이 보이고, 두 번째 박스는 ...
개요 color로 텍스트의 색을 정합니다. 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 color: color | initial | inherit color : 색을 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...
유튜브 영상을 블로그나 홈페이지에 넣을 때 보통 iframe을 사용한다. 코드는 유튜브 영상 공유에서 를 클릭하여 구할 수 있다. 아래와 같은 코드인데, 고정폭이다. 즉 웹브라우저의 가로폭이 커지든 작아지든 가로폭이 일정하다. <iframe width="560" height="315" src="https://www.youtube.com/embed/ybhXVSAdIRE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 이를 반응형으로 만들고 싶다면 아래처럼 한다. 16:9 크기의 div로 감싸고, iframe에 style을 추가하여 ...
text-align 문단 정렬 방식을 정하는 속성은 text-align입니다. 속성의 값은 다음과 같습니다. left : 왼쪽 정렬 right : 오른쪽 정렬 center : 가운데 정렬 justify : 양쪽 정렬 initial : 기본값으로 설정 inherit : 부모 요소의 속성값을 상속 받음 예제 첫 번째 문단은 왼쪽 정렬입니다. 두 번째 문단은 오른쪽 정렬입니다. 세 번째 문단은 가운데 정렬입니다. 네 번째 문단은 양쪽 정렬입니다. 양쪽 모두를 가지런하게 ...
CSS / word-break / 줄바꿈을 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성
개요 word-break는 줄바꿈을 할 때 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성이다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3 문법 word-break: normal | break-all | keep-all | initial | inherit; normal : CJK 문자는 글자 기준으로, CJK 이외의 문자는 단어 기준으로 줄바꿈한다. break-all : 글자 기준으로 줄바꿈한다. keep-all : 단어 ...
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 / Flex / IE에서 flex-basis 오류 해결하는 방법
Flex를 이용하여 다단 배열을 만들려고 합니다. 내용에 상관없이 같은 폭을 가진 다단 배열을 만든다면 flex-basis를 사용하는 게 편합니다. 아래는 Flex를 이용한 간단한 2단 배열입니다. box-sizing의 값을 border-box로 설정하고, flex-basis의 값을 50%로 하면 간단히 만들어집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...
CSS / padding - 안쪽 여백, margin - 바깥 여백
여백에는 안쪽 여백과 바깥 여백이 있다. 안쪽 여백은 padding 속성으로, 바깥 여백은 margin 속성으로 정한다. 여백을 정하면 요소의 크기가 바뀔 수 있다. 어떤 기준으로 크기를 정할 지는 box-sizing 속성으로 정한다. 속성값 부여하기 padding과 margin 속성에 값을 부여하는 방법은 다음과 같다. padding: xx yy zz ww; margin: xx yy zz ww; xx는 위, yy는 오른쪽, zz는 아래, ww는 ...
높이가 같은 박스 만들기 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; font-family: Consolas, monospace; ...