일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- goroutine
- argocd
- 대규모 시스템 설계
- Buffered channel
- image resizing
- System Design
- Bastion Server
- GoF 디자인패턴
- GoF
- Lambda@Edge
- Kubernetes
- 윈도우키보드
- notification system
- Logrus
- 시스템 설계
- 디자인패턴
- Helm V3
- Live Template
- Golines
- 컴포지트패턴
- golang
- Infra
- tenneling
- AWS Infra
- gitops
- UnBuffered channel
- 클래스 관계
- AWS
- 알림 시스템
- go
Archives
- Today
- Total
Fall in IT.
CSS box-sizing 알아보기 본문
box-sizing 이란?
박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성
box-sizing 속성을 사용하면 엘리먼트의 패딩과 테두리가 너비에 영향을 주지 않습니다.
이렇게 하면 모든 엘리먼트가 직관적인 방식으로 크기가 설정되기 때문에 아에 전역 설정으로 사용하곤 합니다.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
box-sizing 설정 값
box-sizing: content-box | border-box | initial | inherit
content-box
border와 padding을 제외하고 content 영역을 기준으로 박스 사이즈가 결정된다.
border-box
border와 padding을 모두 포함한 영역을 기준으로 박스 사이즈가 결정된다.
initial
default 값으로 설정한다.
inherit
부모 요소의 속성값을 상속받는다.
샘플 코드
결과
모두 즐거운 코딩하세요~
'프로그래밍언어 > Html & Css' 카테고리의 다른 글
HTML, A tag download 속성이 적용되지 않는 문제 (0) | 2022.02.18 |
---|---|
HTML select 태그 사용시 기본값 설정방법 (0) | 2019.06.03 |
CSS - backgroundRepeat 사용방법 (0) | 2019.03.26 |
html Input type password, tel 두 가지 사용하는 방법 (0) | 2019.01.08 |
checkbox 디자인 변경하는 방법 (0) | 2018.07.03 |
Comments