////
Search
🎨

CSS

Position

1.
static: 기본값, 겹치기 불가능, 너비 그대로 유지
2.
relative: 요소 자기 자신의 원래 위치(static일 때 기준)으로 배치, 겹치기 불가능, 너비 그대로 유지
3.
absolute: 가장 가까운 조상을 기준으로 배치, 겹치기 가능, 너비 최대한 줄어듬
Search
Boxsizing
content-box
폭(width)과 높이(height)의 범위는 내용 영역에 한정됩니다. 패딩(padding)과 보더(border)는 그 폭과 높이에 포함되지 않고, 다른 폭과 높이가 됩니다. content-box는 초기 값으로, 요소의 크기는 width, padding, border로 계산됩니다.
border-box
Open
내용 영역의 폭(width)와 높이(height)는 패딩(Padding)과 보더(Border)를 포함한 범위가 됩니다.
content-box
Open
폭(width)과 높이(height)의 범위는 내용 영역에 한정됩니다. 패딩(padding)과 보더(border)는 그 폭과 높이에 포함되지 않고, 다른 폭과 높이가 됩니다. content-box는 초기 값으로, 요소의 크기는 width, padding, border로 계산됩니다.
inherit
Open
부모 요소의 값을 물려 받습니다.
border-box: border, padding가 늘어나면 내용물의 크기가 줄어듬으로써 width, height는 고정되는 방식, 반대로 border, padding가 줄어들면 내용물의 크기가 커짐

가운데 정렬 방법 2가지

1.
top:calc(50% - 110px); left:calc(50% - 110px);
2.
top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);

자동 줄바꿈 방지

white-space: nowrap;

참고사항

자식 element 여러 개보다 상위 element를 하나 숨겨주는 것이 더 좋다.
Made with