✍️ CSS 박스 모델
✏️ 박스 모델이란
content
내용이 기입 및 표시되는 영역
css에서 width와 height를 통해 조정되는 부분이다.
padding
콘텐츠(content)와 테두리(border) 사이에 공간이 있는데 이를 padding이라고 한다.
보통 실생활에서 보는 문서의 경우 용지의 테두리와 내용이 공간을 두어 떨어져
위치한 것을 볼 수 있는데 그것이 padding이다.
border
padding과 margin 사이의 테두리
margin
padding 바깥 영역✏️ 크기 (1부) width, height
auto value
block의 경우 장치에서 보이는 화면 가로 크기의 최대치를 차지한다.
inline의 경우 width와 height의 속성을 적용할 수 없다.
그저 inline의 내용이 차지하는 만큼만 적용할 수 있다..box {
width: auto;
height: auto;
}✏️ 크기 (2부)
min-width, min-height (property)
css에 min-width 값을 설정 할 경우 더이상 줄어들지 않게 설정할 수 있다.
최소한으로 가져야 하는 값이라는 의미이기 때문이다.max-width, max-height (property)
css에 max-width 값을 설정 할 경우 ✏️ margin
박스 모델의 가장 바깥 부분을 일컫는다.
단위로 %를 사용할 시 주의 할 점은 부모의 margin이 아닌 'width'가 기준이 되어 계산된다..container {
margin: 5px;
}위와 같이 작성해 줄 경우 '상하좌우' 모두 5px 여백을 준다는 의미이다..container {
margin: 10px 20px;
}'상하' 10px, '좌우' 20px에 여백을 준다는 의미이다..container {
margin: 5px 10px 15px;
}위와 같이 작성해 줄 경우 시계방향으로 '위' 5px, '좌우' 10px '아래' 15px이다..container {
margin: 5px 10px 15px 20px;
}위와 같이 작성해 줄 경우 시계방향으로 '위, 오른쪽, 아래, 왼쪽'에 여백을 준다는 의미이다.✏️ margin collapsing (1)
margin collapsing에는 3가지 충돌이 있고 각각의 충돌은
블록 요소 간의 위 아래 (margin-top, margin-bottom) 겹침이 일어나는 현상이다.
inline의 경우 (margin-top margin-bottom)이 적용되지 않기 때문에 없다.
1. 블록 형제 요소 간의 위 아래(margin-top margin-bottom) 겹침이 일어나는 현상이다.
각각의 형제에 위 아래로 margin을 10px, 20px을 부여하면 두 형제 block 사이의 간격이
30px이 되어야 하는데 두 마진 중 크기가 큰 20px 만큼 크기를 차지하여 겹침 현상이 발생
하는 것이다. ✏️ margin collapsing (2)
2번째 경우 아래와 같이 2가지 경우로 나누어서 생각해 볼 수 있다.
부모의 margin top과 첫 째 자식 요소의 margin top이 만날 때
부모의 margin bottom과 마지막 자식 요소의 margin bottom이 만날 때
부모의 margin과 패딩이 없을 경우 자식요소가 있다면 child의 margin과 만나
겹쳐지고 그 중 큰 값으로 결정 된다.
위와 같은 충돌 현상을 방지해주기 위해서 border 또는 padding이 1px이라도 있어야 한다. ✏️ margin collapsing (3)
빈블록인 경우
내부 컨텐츠가 없고 height가 없을 때 margin-top과 margin-bottom이 상쇄된다.✏️ padding
border와 content 사이에 있는 영역이다.
margin 과 사용 방법이 동일하고 다행히 collapsing이 없다.
부모 id가 parent 이고 자식 id가 child인 블록일 때 css코드를 만들어 주었다.
퍼센트 단위를 쓸 경우 부모 width가 기준으로 백분위를 계산한다.
주의할 점은 자식 요소에 padding-top 속성에 %를 적용할 경우 부모 height가
기준이 되는 것이 아니라 width가 기준이 되어 계산된다.#parent {
width: 300px;
height: 300px;
background-color: skyblue;
}
#child {
width: 50px;
height: 50px;
background-color: red;
}✏️ border (1)
box의 테두리와 관련한 속성을 부여할 때 사용한다.
4개의 테두리에 대해 각각 속성을 부여할 수 있다. 규칙은 padding과 동일하다.
thick의 경우 브라우저 별로 다르기 때문에 고정크기 <length>를 사용 할 것을 권장한다..box{
width: 100px;
height: 100px;
border-style: dotted solid;
border-width: 10px;
border-color: red blue;
background-color: rgb(175, 207, 233);
}
✏️ border 단축속성 (2)
border: (style, width, color) 모두 optional 이다.
위의 속성을 부여 할 때 순서는 상관없다.
style을 지정하지 않으면 기본 값으로 none이 적용된다.
따라서 border를 조정하고 싶을 때 style을 꼭 지정해주어야 한다.✏️ border-radius
border 테두리를 깎아서 굴곡을 부여한다.
크기가 커질수록 굴곡이 많이 생기게 된다.
<length>와 상대길이 사용이 가능하다.
%를 사용하게 될 경우 해당 블록에 부여된 width와 height가 기준이 되어 적용된다..box {
width: 100px;
height: 100px;
border: 5px solid red;
border-radius: 100px;
background-color: tomato;
}
border-radius: 1px 2px 3px 4px; 와 같이 작성해 줄 수 있으며
왼쪽 상단 꼭지점부터 시계방향으로 돈다.
border-radius: 1px 2px; 와 같이 작성 할 경우
왼쪽 상단 꼭지점부터 시계방향으로 도는데 대각선 끼리의 꼭지점이 같은 값을 갖는다.
✏️ box-sizing
요소의 너비(width)와 높이(height)를 계산하는 방법을 지정하는 속성이다.
box-sizing: cotent-box;
박스 값을 지정하지 않으면 초기값으로 들어가게 된다.
box-sizing: border-box;
위 값은 사람이 인식하기 쉽게 하기 위해 도입된 개념이다.
보여지는 사각형의 크기가 width가 된다.
보통의 경우 width가 content의 너비 값인데에 반해 위의 경우
width는 padding과 border을 포함한 가로 너비이다.
content의 내용은 width에서 늘어난 padding과 border 값을 뺀 크기를
width의 크기로 지정한다.아래와 같은 상황일 때 content의 width가 300px인 것이다..box {
width: 300px;
height: 300px;
box-sizing: content-box;
}아래와 같은 상황일 때 content의 width는 260px이고
boder와 padding을 포함한 width가 300px이 되는 것이다..box {
width: 300px;
height: 300px;
box-sizing: border-box;
padding: 20px;
border: 20px;
}