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
표와 셀의 기본 크기 표와 셀의 크기는 정해져있지 않습니다. 내용이 짧으면 작게, 내용이 길면 크게 표와 셀이 만들어집니다. 의도하지 않은 결과가 나오지 않게 하려면 크기를 정하는 게 좋습니다. 크기를 직접 정할 때 사용하는 속성은 width 속성과 height 속성입니다. 다음은 크기를 파악하기 위해 테두리만 추가한 간단한 표입니다. 여기에 스타일을 추가해서 크기를 변경해보도록 하겠습니다. <!doctype html> <html lang="ko"> ...
CSS / 애니메이션 / transition / transition-timing-function - transition 진행 속도 조절하는 속성
transition-timing-function transition-timing-function으로 transition의 진행 속도를 조절할 수 있습니다. IE는 버전 10부터 지원합니다. 문법 transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps( n, start|end ) | cubic-bezier( n, n, n, n ) | initial | inherit; 기본값은 ease입니다. ease : cubic-bezier( 0.25, 0.1, 0.25, 1 )과 같습니다. linear : cubic-bezier( 0, ...
CSS / 선택자(Selector) / 아이디 선택자, 클래스 선택자
아이디 선택자 아이디 선택자(ID Selector)는 특정 값을 id 속성(attribute)의 값으로 갖는 요소(element)를 선택합니다. 속성값 앞에 #을 붙여 아이디임을 나타냅니다. 예를 들어 #abc { color: red; } 는 id 속성값으로 abc를 갖는 요소를 빨간색으로 만듭니다. 클래스 선택자 클래스 선택자 클래스 선택자(Class Selector)는 특정 값을 class 속성(attribute)의 값으로 갖는 요소(element)를 선택합니다. 속성값 앞에 .을 붙여 클래스임을 나타냅니다. 예를 들어 .abc 는 ...
CSS / IE8 이하에서 border-radius, box-shadow 적용시키는 방법
CSS3에서 많은 속성이 추가되었습니다. 그 중에서 개인적으로 가장 많이 사용하는 것이 border-radius입니다. 테두리를 둥글게 만들거나 이미지를 원으로 만들 때 이미지 편집 프로그램을 사용할 필요가 없기 때문입니다. 하지만 문제가 있습니다. IE8 이하에서는 적용되지 않는다는 것이죠. 이 문제를 해결해주는 것이 PIE입니다. 간단한 코드 한 줄로 IE8 이하에서도 border-radius를 적용시킬 수 있습니다. PIE 다운로드 다음 링크에서 PIE를 다운로드 받습니다. http://css3pie.com/download/ 업로드 압축을 풀면 ...
표와 관련된 정렬 표와 관련된 정렬에는 표 정렬, 셀 안의 내용 가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본 모양은 표 : 왼쪽 정렬 제목 셀(th) 안의 내용 가로 정렬 : 가운데 정렬 내용 셀(td) 안의 내용 세로 정렬 : 왼쪽 정렬 셀 안의 내용 세로 정렬 : 가운데 정렬 입니다. <!doctype html> <html lang="ko"> <head> ...
HTML에 CSS를 적용시키는 방법은 세가지가 있습니다. 각 방법은 장단점이 있으니 상황에 맞게 적절한 방법을 택합니다. Inline Style Sheet HTML 태그의 style 속성에 CSS 코드를 넣는 방법입니다. Internal Style Sheet HTML 문서 안의 <style>과 </style> 안에 CSS 코드를 넣는 방법입니다. Linking Style Sheet 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법입니다. Inline Style Sheet Inline Style Sheet는 HTML 태그의 ...
CSS / 선택자(Selector) / :nth-child(), :nth-last-child()
:nth-child(), :nth-last-child() :nth-child()와 :nth-last-child()는 특정 순서에 있는 요소를 선택할 때 사용하는 선택자입니다. :nth-child()는 앞에서부터 세고, :nth-last-child()는 뒤에서부터 셉니다. 인터넷 익스플로러는 IE 9 이상에서 사용할 수 있습니다. :nth-child() :nth-child()는 형제 요소 중에서 특정 순서에 있는 요소를 선택할 때 사용합니다. 문법 :nth-child( an+b ) a와 b는 정수입니다. 0과 음수도 가능합니다. n에는 음이 아닌 정수, 즉 0, 1, 2, 3, …이 차례대로 ...
구글에서 많은 웹폰트를 제공하고 있습니다. 어떻게 사용하는지, IE를 지원하는 방법은 무엇인지 알아보겠습니다. 글꼴 선택하고 코드 얻기 구글 웹폰트에 접속합니다. 한글 웹폰트가 필요하다면 Languages를 Korean으로 설정합니다. + 버튼을 클릭하여 글꼴을 선택합니다. 여러 개를 선택해도 됩니다. 아래에 있는 검은 색 바를 클릭합니다. 구글 웹폰트를 사용할 수 있는 코드가 있는데, 기본 스타일 외에 다른 스타일을 선택하거나 한글을 사용하려면 ...
CSS / 애니메이션 / transition / transition-delay - transition 시작을 연기하는 속성
transition-delay transition-delay로 transition이 시작하는 시간을 연기할 수 있습니다. IE는 버전 10부터 지원합니다. 문법 transition-duration: time| initial | inherit 기본값은 0s입니다. 시간 단위는 초(s) 또는 1/1000초(ms)를 사용합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 체크박스에 체크하면 1초에 걸쳐 박스가 커집니다. 첫 번째 박스는 0.5초 대기 후 커집니다. 즉, 박스가 커지는데 1.5초가 걸립니다. 두 번째 박스는 1초 대기 후 커집니다. ...
CSS / font-variant / 소문자를 작은 대문자로 바꾸는 속성
개요 font-variant는 소문자를 작은 대문자, 즉 소문자 크기의 대문자로 바꾸는 속성입니다. 따라서 한글에서는 의미 없는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 font-variant: normal | small-caps | initial | inherit normal : 소문자를 작은 대문자로 바꾸지 않습니다. small-caps : 소문자를 작은 대문자로 바꿉니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype ...