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>
<meta charset="utf-8">
<title>CSS</title>
<style>
body {
margin: 0px;
}
div {
margin: 20px;
padding: 20px;
border: 20px solid #dddddd;
width: 500px;
}
.cb {
box-sizing: content-box;
}
.bb {
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="cb">
<p>content-box</p>
</div>
<div class="bb">
<p>border-box</p>
</div>
</body>
</html>
둘 다 width 값을 500px로 정하였으나, box-sizing 속성값에 따라 크기기 달라집니다. 첫번째 박스는 콘텐트 영역이 500px이고 테두리를 포함한 크기는 580px입니다.
두번째 박스는 테두리를 포함한 크기가 500px이고, 콘텐트 영역의 크기는 420px입니다.
브라우저 지원
- Chrome : 10.0+ (4.0 -webkit-)
- Firefox : 29.0+ (2.0 -moz-)
- Internet Explorer : 8.0+
- Opera : 9.5+
- Safari : 5.1+ (3.2 -webkit-)
Related Posts
Box Model HTML 요소는 박스(box)로 이루어져 있습니다. 박스 위에 박스를 얹거나 박스들을 배열하여 문서를 만들어 나갑니다. 예를 들어 다음과 같이 코드를 작성했다면 <body> <header> <h1>Lorem</h1> </header> </body> body 박스 위에 header 박스가 있고, header 박스 위에 h1 박스가 있는 것입니다. 박스의 구성 하나의 박스는 바깥 여백 영역, 테두리 영역, 안쪽 여백 영역, ...
CSS / table-layout / 표(table) 크기 고정시키기
표(table)는 width 속성으로 가로 크기를 정할 수 있습니다. 다음은 가로 크기가 500px인 간단한 표입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { width: 500px; } td { padding: 10px; border: 1px solid #666666; } </style> </head> <body> <table> <tr> <td class="c1">HAHAHA</td> <td class="c2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</td> </tr> </table> </body> </html> 표 ...
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 ...
CSS / letter-spacing, word-spacing / 글자 사이 간격, 단어 사이 간격
letter-spacing, word-spacing 글자 사이의 간격은 letter-spacing으로, 단어 사이의 간격은 word-spacing으로 정합니다. 값이 커지면 간격이 커집니다. 값에는 음수를 넣을 수 있습니다. 음수를 값으로 하는 경우 글자가 겹칠 수 있습니다. 예제 값의 변화에 따른 간격의 변화를 보여주는 예제입니다. 글자 사이의 간격을 변화시키면 단어 사이의 간격도 변합니다. 단어 사이의 간격을 변화시켜도 글자 사이의 간격은 변하지 않습니다. <!doctype html> <html lang="ko"> <head> ...
CSS / font-weight / 글자 굵기 정하는 속성
개요 font-weight로 글자의 굵기를 정합니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 font-weight: normal | bold | bolder | lighter | number | initial | inherit normal : 보통 굵기입니다. 숫자 400과 같습니다. bold : 굵은 굵기입니다. 숫자 700과 같습니다. bolder : 상속된 값보다 굵은 굵기입니다. lighter : 상속된 값보다 얇은 굵기입니다. number : ...
CSS / content / 요소 앞 또는 뒤에 문자열 등 콘텐트 만들기
content 속성은 선택한 요소의 내용 앞이나 뒤에 콘텐트를 붙입니다. 예를 들어 p 요소 내용 앞에 콘텐트를 넣으려면 p:before { content: xxx; } 와 같이 하고, 뒤에 붙이려면 p:after { content: xxx; } 와 같이 합니다. content 속성을 이용하여 XXX라는 문자열을 넣으려면 다음과 같이 합니다. p:before { content: "XXX"; } 이미지를 넣고 싶다면 다음과 같이 합니다. p:before { content: ...
CSS / 애니메이션 / transition / transition-duration - transition이 끝날 때까지 걸리는 시간을 정하는 속성
transition-duration transition-duration로 transition이 끝날 때까지 걸리는 시간을 정합니다. IE는 버전 10부터 지원합니다. 문법 transition-duration: time| initial | inherit 기본값은 0s입니다. 시간 단위는 초(s) 또는 1/1000초(ms)를 사용합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 체크박스에 체크하면 박스가 커집니다. 첫 번째 박스는 다 커지는데 1초가 걸립니다. 두 번째 박스는 다 커지는데 0.4초가 걸립니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { font-family: Consolas, monospace; } .jb { box-sizing: ...
개요 font-family는 글꼴을 설정하는 속성입니다. 기본값 : 웹브라우저의 기본 글꼴 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 font-family: font | initial | inherit font : family-name 또는 generic-family initial : 기본값으로 설정 inherit : 부모 요소의 속성값을 상속받음 font family-name은 글꼴 이름입니다. 글꼴 이름에 띄어쓰기가 있으면 작은 따옴표 또는 큰 따옴표로 감쌉니다. generic-family는 글꼴 유형입니다. serif : 삐침 있는 ...
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> ...
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 ...