박스 모델(Box-Medel)
모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부릅니다.
박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분합니다.
1. 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다.
2. 패딩(padding) : 내용과 테두리 사이의 간격입니다. 패딩은 눈에 보이지 않습니다.
3. 테두리(border) : 내용와 패딩 주변을 감싸는 테두리입니다.
4. 마진(margin) : 테두리와 이웃하는 요소 사이의 간격입니다. 마진은 눈에 보이지 않습니다.
TCP-School 박스 모델
박스 각 영역의 크기를 지정할 수 있는 속성
- 내용(content) 영역 : width, height (inline요소는 지정할 수 없다)
- 안쪽 여백(padding) : padding
- 테두리(border) : border
- 바깥쪽 여백(margin) : margin
[style.css]
div{
height: 40px;
width: 100px;
border : 2px solid blue;
margin: 20px;
padding: 20px;
}[index.html]
<body>
<div>내용 (Content)</div>
</body>
margin, padding
개별 속성 정의하기
Content 주변의 여백을 지정하는 속성
여백은 padding, margin 안에서도 상하좌우로 나뉠수 있으며 각각 개별 속성을 적용할 수 있다.
padding-top, padding-bottom, padding-left, padding-right
margin-top, margin-boddom, margin-left, margin-right
[style.css]
div{
height: 40px;
width: 100px;
border : 2px solid blue;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}[index.html]
<body>
<div>내용 (Content)</div>
</body>
여러 값 한번에 정의하기
margin: 위쪽 오른쪽 아래쪽 왼쪽
padding: 위쪽 오른쪽 아래쪽 왼쪽x
[style.css]
div{
height: 40px;
width: 100px;
border : 2px solid blue;
margin: 10px 20px 30px 40px;
padding: 10px 20px 30px 40px;
}[index.html]
<body>
<div>내용 (Content)</div>
</body>
box-sizing
margin을 제외한 border(테두리)까지의 합을 보통 박스의 사이즈라고 한다
일일히 사용자가 계산해서 입력해야하므로 불편한 문제가 있다.
가로 크기:
(width) 100 + (border 좌) 5 + (border 우) 5 + (padding 좌) 40 + (padding 우) + 40 = 190
새로 크기:
(height) 100 + (border 위) 5 + (border 아래) 5 + (padding 위) 20 + (padding 아래) 20 = 150
[style.css]
div{
width: 100px;
height: 100px;
border: 5px solid red;
padding: 20px 40px;
}[index.html]
<body>
<div>내용 (Content)</div>
</body>
content-box(기본값) : 기본값, 너비와 높이가 콘텐츠 영역만을 포함한다.
border-box : 너비와 높이가 안쪽 여백과 테두리까지 포함한다.
border-box
테두리까지의 영역이 모두 포함된 치수
- padding을 추가하거나 booder를 추가하면 content영역이 줄어든다.
[style.css]
div{
box-sizing: border-box;
width: 200px;
height: 200px;
border: 5px solid red;
padding: 20px;
}[index.html]
<body>
<div>내용 (Content)</div>
</body>
content-box
content영역은 사용자가 지정한 만큼 설정되며 padding, border를 추가하면 content의 사이즈에는 변화를 주지 않고 추가한 padding과 border만 변경된다.
[style.css]
div{
box-sizing: content-box;
width: 200px;
height: 200px;
border: 5px solid red;
padding: 20px;
}[index.html]
<body>
<div>내용 (Content)</div>
</body>
background
요소의 배경을 지정한다.
단축 속성이며 색상, 이미지 등 하위 속성을 지정한다.
- 배경은 Content를 가리지 않는다.
background-color : 배경 색 지정
background-image : 배경 이미지 지정(이미지가 요소의 크기 보다 작을 경우 부족한 공간은 이미지를 반복해서 채운다. background-repeat로 변경 해줘야 한다.)
background-position : 배경 이미지의 초기 위치 지정(기본값: left top)
background-size : 배경 이미지 크기 지정
background-repeat : 배경 이미지 반복 방법 지정(기본 값은 repeat, no-repeat)
background-image : url()
[style.css]
div{
width: 800px;
height: 800px;
border: 5px solid red;
background-color: rgb(38, 188, 51);
background-image: url(./CSS3_logo.svg);
}[index.html]
<body>
<div>내용 (Content)</div>
</body>
background-repeat : no-repeat; (기본 값은 repeat)
[style.css]
div{
width: 800px;
height: 800px;
border: 5px solid red;
background-color: rgb(38, 188, 51);
background-image: url(./CSS3_logo.svg);
background-repeat: no-repeat;
}[index.html]
<body>
<div>내용 (Content)</div>
</body>
background-position
- left
- right
- top
- bottom
- center
두개 조합 가능
[style.css]
div{
width: 800px;
height: 800px;
border: 5px solid red;
background-color: rgb(38, 188, 51);
background-image: url(./CSS3_logo.svg);
background-repeat: no-repeat;
background-position: center right;
}[index.html]
<body>
<div>내용 (Content)</div>
</body>
background-size : {가로 크기} {세로 크기}
크기를 지정해 줄 수 있다.
cover : 비율이 깨지지 않는 선에서 이미지를 꽉 채운다.
contain: 이미지가 깨지거나 잘리지 않는 선에서 꽉 채운다.
background-size : {가로 크기} {세로 크기}
[style.css]
div{
width: 800px;
height: 800px;
border: 5px solid red;
background-color: rgb(38, 188, 51);
background-image: url(./CSS3_logo_and_wordmark.svg);
background-repeat: no-repeat;
background-position: center right;
background-size : 200px 200px;
}[index.html]
<body>
<div>내용 (Content)</div>
</body>
background-size : contain
[style.css]
div{
width: 800px;
height: 800px;
border: 5px solid red;
background-color: rgb(38, 188, 51);
background-image: url(./CSS3_logo_and_wordmark.svg);
background-repeat: no-repeat;
background-position: center right;
background-size : contain;
}[index.html]
<body>
<div>내용 (Content)</div>
</body>
