CSS - Box-Model

fdongfdong·2022년 6월 12일
0

CSS

목록 보기
5/8
post-thumbnail

박스 모델(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>

profile
좋은 개발자가 되고싶은

0개의 댓글