일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- vscode extension
- Code Splitting
- use-immer
- react immer
- likelion
- react
- styled-components 버전 문제
- javascript 비동기
- 최단거리알고리즘
- 1966 프린터큐
- reading 'useDebugValue'
- reading 'edgesOut'
- Styled Components
- carouselButton
- 단일링크드리스트
- js fetch
- java
- 테스크 큐
- react-native-snap-carousel
- fetch()
- Call Stack
- 브랜치 이름 변경 명령어
- styled-components 설치 오류
- styled-components extension
- styled-compoents
- styled components 설치 안됨
- React 공식문서
- git branch -m
- 네트워크 통신 요청
- Javascript
- Today
- Total
Keep Going
[CSS] box model 본문
[ opening ]
css가 표시하는 모든 것은 box이다.
그래서 box model이 작동하는 방식을 이해하는 것이 가장 기본이다.
[ Content & Sizing ]
extrinsic sizing이란, 우리가 일반적으로 알고 있는 width, height에 숫자 값을 주는 것이다.
instrinsic sizing이란, width: max-content; height: max-content; 으로 값을 주는 것이다.
box를
extrinsic sizing(외부 크기 조정)을 한다면, content가 사이즈를 넘어설 때 overflow가 생긴다.
+ overflow란, 콘텐츠가 박스에 비해 너무 클 경우를 이야기한다.
+ overflow 속성으로 넘치는 content를 제어할 수 있다.
intrinsic sizing(내부 크기 조정)을 한다면 box 사이즈를 어떻게 지정해두었는지에 상관 없이, content의 최대 크기대로 box가 늘어난다.
[ Areas of the box model ]
box는 4가지 area로 구성되어있다.
● content box : content 그 자체
● padding box : box 내부에 잡히는 공간이며, 스크롤바가 padding box 범위 안에서 잡힌다.
● border box : border 속성을 사용되는 곳이다.
● margin box : outline , box-shadow 속성을 사용되는 곳이다. box 크기에 영향을 미치지 않는다.
[ Controlling the box model ]
< display >
● display : block; // inline space를 채운다. // <div>의 default
● display : inline; // 블록 여백이 있다. // <span>의 default
● display: inline-block; // 요소가 콘텐츠만큼만 커진다.
< box-sizing : 너비와 높이를 계산하는 방법을 지정한다. >
● box-sizing : content-box; // 모든 요소의 default
+ content-box 란?
: width, height 치수가 content box에 적용된다는 뜻이다. padding, border 값들은 width, height에 추가되어 box 크기가 결정된다.
● box-sizing : border-box;
+ border-box 란?
: padding, border도 box의 크기로 고려한다. width = border+padding+content_width , height = border+padding+content_height
● box-sizing: border-box; 가 일반적으로는 더 편하기 때문에 normalize시키는 코드를 적어두면 좋다.
*,
*::before,
*::after {
box-sizing: border-box;
}