[CSS] CSS 박스 모델, border, padding, margin

1. CSS 박스 모델

- 모든 HTML 요소는 박스(box) 모양으로 구성된 박스 모델을 기본으로 함

- 박스 모델은 HTML 요소를 테두리(border), 패딩(padding), 마진(margin) 등을 갖음

박스 모델 용어

content(내용)	텍스트나 이미지 등 박스 내의 실제 내용
border(테두리)	박스의 테두리(내용과 패딩이 안에 포함)
padding(패딩)	content와 border 사이의 간격(안쪽 여백)
margin(마진)	border 밖의 여백으로, 주로 이웃 요소와의 간격(여백)으로 사용

박스 모델 기본 속성

width	박스의 넓이(default: display 속성에 의해 결정)
height	박스의 높이(default: 일반적으로 콘텐츠의 높이)
background	박스의 배경 색상 또는 이미지(default : X)
border	박스의 테두리 색상, 굵기, 선 스타일 등(default : X)
padding	테두리 안쪽 여백(default : 0)
margin	테두리 바깥 여백(default : 0)

2. border(테두리)

border 속성
* border: 굵기 스타일 색상; -> 모든 border 속성을 이용한 스타일을 한 줄에 설정 가능
border style

none 테두리 없음

hidden 존재하기는 하지만 표현되지는 않음

dotted 점선

dashed 약간 긴 점선

solid 실선

그외 double, groove, ridge, insert, outset

3. border 예시

<body>
  <div style="border-style: dotted;"></div>
  <div style="border-style: dashed;"></div>
  <div style="border-style: solid;"></div>
  <div class="mix"></div>
</body>
<style>
  div { width: 200px; height: 100px; margin: 20px; }
  .mix {
    border-top-style: solid;
    border-top-color: rgb(255, 0, 0);
    border-left-style: dashed;
    border-left-color: rgb(0, 255, 0);
    border-right-style: dotted;
    border-right-color: rgb(0, 0, 255);
    border-bottom-style: double;
    border-bottom-color: rgb(255, 0, 255);
  }
</style>

4. margin, padding

- margin(마진) 스타일 : margin 테두리 바깥 여백(default: 0)
- padding(패딩) 스타일 : padding 테두리 안쪽 여백(default: 0)

대표적인 박스 태그의 마진,패딩 특징
<div> : 기본적으로 모든 방향에 margin 값과 패딩 값을 가질 수 있다.
<span> : 기본적으로 위(margin-top)/아래(margin-bottom) 값을 가질 수 없다. 좌우만 가질 수 있다.(패딩은 다 가능)
collapsing(마진 겹침/상쇄 현상)
- 블록의 top/bottom 여백이 겹칠 때 가장 큰 여백으로 결합되는 현상
- 즉, 두 개 이상 블록 요소의 상하 마진이 겹칠 때 가장 큰 값으로 결합하는 렌더링 규칙

5. margin, padding 예시

<body>
    <div style="background: rgb(255, 255, 140);">
        <div class="div-a">DIV 태그는 너비가 100%의 기본 속성을 가지므로...</div>
    </div>

    <div style="background: rgb(196, 255, 177);">
        <span class="span-a">SPAN A</span>
        <span class="span-a">SPAN B</span>
        <span class="span-a">SPAN C</span>
    </div>

    <div style="background:rgb(177, 250, 255); margin-top: 100px;">
        <span class="span-b">SPAN A</span>
        <span class="span-b">SPAN B</span>
        <span class="span-b">SPAN C</span>
    </div>
</body>

<style>
    .div-a {
        width: 200px;
        height: 100px;
        background: rgb(235, 235, 235);
        border: 10px solid rgb(0, 0, 255);
        margin-top: 50px;
        margin-bottom: 100px;
        margin-left: 20px;
        margin-right: 20px;
        padding: 20px;
    }
    .span-a {
        width: 300px;
        height: 300px;
        /* span은 inline이다 따라서 width, height 속성은 무시된다. */
        background-color: rgb(255, 177, 190);
        border-radius: 10px;
        border-width: 5px;
        border-style: dashed;
        border-top-color: red;
        border-bottom-width: 5px;
        padding: 10px;
        margin: 20px;
    }
    .span-b {
        display: inline-block;
        width: 100px;
        height: 100px;
        padding: 10px;
        margin: 20px;
        border: 1px solid red;
    }
</style>

저작자표시

'FrontEnd > CSS' 카테고리의 다른 글

[CSS] CSS 배경 이미지(background-image) (0)	2022.10.05
[CSS] CSS block vs inline, <div> vs <span> (1)	2022.09.22
[CSS] CSS 배경(background), 글자 색상(color) (1)	2022.09.21
[CSS] CSS 레이아웃(display, position, float) (0)	2022.09.21
[CSS] CSS 개요, 스타일 시트, 기본 문법(형식), 선택자 (0)	2022.09.19

none	테두리 없음
hidden	존재하기는 하지만 표현되지는 않음
dotted	점선
dashed	약간 긴 점선
solid	실선
그외	double, groove, ridge, insert, outset