CSS Box Model
박스의 구성
- HTML 요소들은 모두 안에 박스들을 가지고 있다.
콘텐츠 (content) 박스
- 요소의 콘텐츠가 표시되는 영역
- 넓이는
width그리고 높이는height와 같은 속성을 사용해서 설정
패딩 (padding) 박스
- 패딩은 콘텐츠와 테두리 사이의 공간
- 패딩의 크기는
padding과 관련 속성을 사용해 제어
보더 (border) 박스
- 보더 박스는 콘텐츠와 패딩을 둘러싸는 테두리
- 보더의 크기와 스타일은
border와 관련 속성을 사용하여 제어
마진 (margin) 박스
- 마진은 보더 바깥 쪽 영역을 요소와 요소 사이의 공백 역할
- 마진 박스의 크기는
margin과 관련 속성을 사용하여 제어
박스의 유형
- 블록 박스
- 인라인 박스
- 박스 유형 결정 - display
블록 박스 (block box)
- 사용 가능한 공간을 양 옆으로 100% 사용하며 사용하지 못하는 공간은 마진 영역으로 채웁니다. 상위 콘테이너에서 사용 가능한 공간을 채웁니다.
width와height속성을 사용하여 스타일을 컨트롤 할 수 있습니다.- 패딩과 마진, 보더 속성을 사용하여 스타일을 컨트롤 할 수 있으며 해당 속성들이 다른 요소들을 밀어냅니다.
인라인 박스 (inline box)
- 기본적으로 컨텐츠 박스만큼의 크기만 가집니다. 때문에 새 줄로 행을 바꾸지 않습니다.
width와height속성을 사용할 수 없습니다.- 패딩과 보더 속성을 사용할 수 있지만 마진 속성은 좌우만 조절할 수 있습니다. 해당 속성들의 상하 값(top, bottom)들은 다른 요소들을 밀어내지 않습니다.
박스의 유형을 결정하는 속성 - display
display속성은 박스의 성질을 지정하여 다른 박스들과 어떤 방식으로 위치가 배치 될지 결정합니다.- display 속성은 크게 외부의 다른 형제, 부모 박스들과의 배치에 영향을 미치는 외부 디스플레이 타입과, 내부 자식 박스들의 배치에 영향을 미치는 내부 디스플레이 타입으로 크게 나눌 수 있습니다.
외부 디스플레이 타입
- inline : 인라인 박스로 박스 유형 결정
- block : 블록 박스로 박스의 유형 결정
- inline-block : inline처럼 한줄에 여러 요소가 존재, block처럼 width, height, margin, padding 등 모든 값을 지정 가능
내부 디스플레이 타입
- flex : 내부 자식 요소들의 위치를 부모 컨테이너 요소안에서 X축 혹은 Y축의 단방향으로 설정하는 속성입니다.
- grid : 내부 자식 요소들의 위치를 부모 컨테이너 요소안에서 X축과 Y축을 모두 이용해 배치하는 속성입니다.
표준 CSS 박스 모델
1. width, height
- 표준 CSS 박스 모델에서는 블록 박스인 경우 width, height 값을 통해 content box의 크기를 제어
- 콘텐츠 박스의 크기가 작으면 콘텐츠들이 박스 밖으로 빠져나온다.
2. border
- 보더 박스 영역의 스타일 정의
- border-width - 선의 두께와 관련된 속성입니다.
- border-style - 선의 모양과 관련된 속성입니다.
- border-color - 선의 색깔과 관련된 속성입니다.
2.1 border-width
border-width에 사용 되는 값들은 아래와 같은 유형이 있습니다.
- 길이 지정 - 속성 값을 px과 같은 단위로 직접 지정합니다.
- medium - 키워드 입니다. 중간 굵기로 표시됩니다.
- thin - 키워드 입니다. 얇은 실선으로 표시됩니다.
- thick - 키워드 입니다. 굵은 선으로 표시됩니다.
2.2 border-style
선의 형태는 실선, 점선, 파선 등 다양하게 설정할 수 있으며 아예 없앨 수도 있습니다.
- none : 선을 없앱니다.
- solid : 직선입니다.
- dotted : 점선입니다.
- dashed : 파선으로 바느질선과 같은 모양입니다.
- double : 평행한 이중선입니다.
- groove : 테두리가 오목하게 안쪽으로 파인 선입니다.
- ridge : 테두리가 볼록하게 나온 입체감이 있는 선입니다. groove의 반대입니다.
- inset : 요소가 전체적으로 안으로 들어가 보이는 형태입니다.
- outset : 요소가 튀어나온 것처럼 보입니다. inset의 반대입니다.
2.3 border-color
- border-color는 테두리에 색을 입히는 속성입니다.
2.4 radius
- radius 속성은 테두리의 꼭짓점을 둥글게 만듭니다.
- 설정한 radius 값을 반지름으로 하는 원을 박스의 꼭짓점에서 그려 둥근 테두리를 그리는 원리입니다.
- 50% 값을 활용하면 원을 그릴 수 있다.
- radius는 박스의 모든 꼭짓점을 둥글게 할 수 있지만 한 꼭짓점만 둥글게 만들 수도 있다.
3. padding, margin
3.1 padding
- 패딩 박스 영역의 스타일을 정의
h1 {
padding: 10px 15px 20px 25px; /* 앞에서부터 top, right, bottom, left 입니다. */
padding: 10px;/* 패딩박스의 top, right, bottom, left가 모두 동일하게 10px일 경우 */
padding: 10px 20px; /* 패딩박스의 top,bottom이 10px, left, right가 20px일 경우 */
padding: 10px 20px 15px; /* top이 10px, bottom 15px, left와 right가 20px일 경우 */
}3.2 margin
- 마진 박스 영역의 스타일을 정의
- 표준 CSS 박스 모델에서 마진은 요소가 차지하는 전체 너비와 높이에 포함되지 않는다.
- 다만 박스의 외부 공간에만 영향을 미칩니다.
h1 {
margin: 10px 15px 20px 25px; /* 앞에서부터 top, right, bottom, left 입니다. */
margin: 10px;/* 마진박스의 top, right, bottom, left가 모두 동일하게 10px일 경우 */
margin: 10px 20px; /* 마진박스의 top,bottom이 10px, left, right가 20px일 경우 */
margin: 10px 20px 15px; /* top이 10px, bottom 15px, left와 right가 20px일 경우 */
/*
마진 속성에는 auto값이 존재합니다.
요소의 크기를 제외한 나머지 마진영역을 반으로 나눠 left와 right에 골고루 분배합니다.
덕분에 auto 를 이용하면 손쉽게 수평 정렬을 만들 수 있지만 아쉽게도
top, bottom 에는 auto 값을 적용할 수 없습니다.
*/
margin: 10px auto;
}margin 겹침 현상
- 요소와 요소 사이에 margin-top, margin-bottom의 공간이 있을 경우 더 높은 값의 margin 값이 적용
<div class="first"></div>
<div class="second"></div>div{
width:100px;
height:100px;
border:1px solid black;
}
.first{
margin-bottom:30px;
}
.second{
margin-top:60px;
}
/* 마진 값이 높은 쪽의 마진만 적용됩니다. second의 margin-top 60px 가 더 크므로 second margin-top만 적용*/- 부모 요소와 자식 요소가 존재할 때, 자식 요소의 margin-top, margin-bottom 값이 부모의 높이에 영향을 미치지 않음
<div class="parent">
<div class="child"></div>
</div>.parent{
background-color:yellow;
}
.child{
width:100px;
height:100px;
margin-top:50px;
background-color:red;
}
/* 부모의 높이를 따로 지정하지 않으면 자식의 높이만큼 부모의 높이가 지정됩니다.
하지만 위와 같은 경우 자식의 마진 탑, 바텀 값이 부모의 높이에 영향을 미치지 않게 됩니다. */위와 같은 문제를 해결하는 방법
1. 부모 요소에 overflow 속성 값을 적용해줍니다.
2. 부모 요소에 display: inline-block 값을 적용해줍니다.
3. 부모 요소에 border 값을 적용해줍니다.
대체 CSS 박스 모델
- 표준 CSS 박스모델에서 요소의 전체적인 크기는 컨텐츠 박스 + 보더 박스 + 패딩 박스의 너비와 높이 값을 모두 더해 정해진다고 말씀드렸었습니다. 하지만 박스의 실제 크기를 얻기 위해 테두리와 패딩을 추가하는 것이 불편하고 귀찮게 느껴질 수 있습니다.
- 이러한 이유로 대체 박스 모델이 도입되었습니다. 이 모델을 사용한다면 width는 페이지에서 차지하는 박스 너비가 되고 height는 박스의 높이가 됩니다.
- 대체 박스 모델의 콘텐츠 영역 크기는 width와 height에서 패딩 및 테두리 너비를 뺀 값이 됩니다.
h1 {
box-sizing: border-box;
/*box-sizing: content-box; --> box-sizing의 기본 값입니다. 표준 박스 모델에서 사용됩니다. */
}- 아래 코드를 사용하면 매우 손쉽게 모든 요소에 대체 박스 모델을 적용할 수 있습니다.
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
Web FrontEnd Developer