티스토리 뷰
box-sizing
box-sizing : 요소의 크기 계산 기준을 지정
- content-box : 요소의 내용(content)으로 크기 계산 (기본값)
- border-box 요소의 내용 + padding + border로 크기 계산
코드펜 예제
See the Pen box-sizing by 김선미 (@tjsalsun) on CodePen.
TIL
key point
box-sizing 기본값은 content-box이다
컨텐츠 포함해서 계산하기때문에 일일이 계산 하기보다는 border-box를 이용하기
느낀점
box-sizing 사용은 유용해서 과제시나 프로젝트시 잘 사용할거 같다
오늘의 학습 만족도
⭐⭐⭐⭐⭐
'CSS' 카테고리의 다른 글
| display (0) | 2023.01.23 |
|---|---|
| overflow (0) | 2023.01.23 |
| border-radius (0) | 2023.01.23 |
| border (테두리 선) (0) | 2023.01.23 |
| padding (내부 여백) (0) | 2023.01.23 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 스코프
- 국비지원교육
- 국비지원
- component
- 개발자취업부트캠프
- 개발자치업부트캠프
- 컴포넌트
- 리액트
- 북스터디
- 패스트캠퍼스
- Root_Component
- 내일배움카드
- vim 편집기
- 가상클래스
- 메가바이트스쿨
- MegabyteShool
- MegabyteSchool
- Git
- CSS
- GitHub
- shell command
- export
- html
- javascript
- git flow
- react
- 그룹스터디
- JSX
- til
- 그룹스터디_북스터디
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 |
글 보관함