정리하고 기록하며 성장하는

박스모델 1편 본문

프론트/CSS

박스모델 1편

개발하는묭이 2021. 12. 23. 22:07

박스모델 (Box-Model)

  • 브라우저가 요소를 렌더링 할 때 , 각각의 요소는 기본적으로 사각형 형태로 영역을 차지하게 된다
  • 이 영역을 박스 라고 표현한다
  • css는 박스의 크기 , 위치 , 속성 (색 , 배경 , 테두리 모양 등)을 결정할 수 있다

하나의 박스는 다음 네 개의 영역으로 구성된다

  • 콘텐츠 영역 - 박스의 중심부에 위치한다 
    • 너비와 높이를 가진다
    • 테두리로 감싸져 있다
  • 안쪽 여백 - 테두리를 중심으로 박스와 콘텐츠 사이의 공간을 확보할 수 있다
  • 경계선 (테두리) - 박스가 테두리로 감싸져 있다
  • 바깥쪽 여백 - 다른 요소와 필요한 만큼의 거리를 벌릴 수 있다

 

박스 각 영역의 크기는 어떻게

 

  • 박스 각 영역의 크기를 정의할 수 있는 속성은 다음과 같다
    • 콘텐츠 영역 : width , height
    • 안쪽 여백 : padding
    • 바깥쪽 여백 : margin
    • 테두리 : border-width

박스모델 영역 실습 코드

  • div 태그의 테두리를 줬다
  • div 태그의 콘텐츠와 테두리 사이의 여백을 padding 속성을 사용하여 줬다
  • div 태그 와 다른 요소 사이의 바깥쪽 여백을 margin 속성을 사용하여 줬다
  • span 태그는 div 태그의 margin 만큼 떨여져서 위치하게 된다
  • span 태그의 콘텐츠 영역에 width 와 height 속성을 줬다
  • 인라인 요소를 inline-block 요소로 바꾸면 width 와 height를 지정할 수 있다
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                border: 3px solid red;
                padding: 10px;
                margin: 20px;
                width: 90px;
                height: 35px;
            }

            span {
                display: inline-block;
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div>요소의 콘텐츠</div>
        <span>check</span>
    </body>
</html>

 

 

내용 정리

  • 브라우저는 요소를 렌더링할 때 박스 모델에 따라 사각형으로 표현한다
  • 하나의 박스는 네 개의 영역으로 구성된다
  • 콘텐츠 영역 , 안쪽 여백 , 경계선 , 바깥쪽 여백
  • 각 영역의 크기를 정의하는 속성이 존재한다

'프론트 > CSS' 카테고리의 다른 글

박스모델 1편  (0) 2021.12.23
인라인이냐 블록이냐  (1) 2021.12.23
텍스트 관련 속성  (0) 2021.12.22
선택자 1편  (0) 2021.12.21
CSS 기본 문법 및 사용 방법  (0) 2021.12.20
'프론트/CSS' Related Articles more