티스토리 뷰
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
- 국비지원교육
- 스코프
- Git
- vim 편집기
- 가상클래스
- 북스터디
- git flow
- 내일배움카드
- til
- html
- MegabyteShool
- javascript
- JSX
- 메가바이트스쿨
- component
- 리액트
- shell command
- Root_Component
- react
- 그룹스터디
- 개발자치업부트캠프
- 컴포넌트
- CSS
- export
- 그룹스터디_북스터디
- 개발자취업부트캠프
- 패스트캠퍼스
- MegabyteSchool
- GitHub
- 국비지원
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
글 보관함