[Css] 박스 모델 - 콘텐츠, 패딩, 보더, 마진, 아웃라인

박스 모델(box model)

• 모든 HTML 요소는 박스 모양으로 구성되는데 이것을 박스 모델이라 부른다.
• CSS에서 설정된 width와 height에 패딩, 테두리, 마진의 크기는 포함되지 않으며, width와 height을 비롯한 모든 박스모델 관련 속성들은 상속되지 않는다.

http://www.tcpschool.com/css/css_boxmodel_boxmodel

• 내용(content) : 요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역이다.
• 패딩(padding) : 패딩은 내용과 테두리 사이의 간격으로 기본색은 투명하다.
• 테두리(border) : 내용와 패딩 주변을 감싸는 테두리다.
• 마진(margin) : 테두리와 이웃하는 요소 사이의 간격으로, 기본적으로 투명하며 배경색을 지정할 수 없다.

div {
    width: 320px;
    background-color: red;
    padding: 50px;
    border: 20px solid maroon;
    margin: 50px;
}

box-sizing 속성

• box-sizing 속성값으로 width, height 속성의 대상 영역으로 지정할 수 있어서 CSS 레이아웃을 직관적으로 사용할 수 있게 한다.
  • content-box: 대상 영역은 content 영역을 의미한다. (기본값)
  • border-box : 대상 영역은 margin을 제외한 박스 모델 전체를 의미한다.

.content-box {
    width: 600px;
    border: 10px solid;
    padding: 50px;
    margin: 50px;
    background-color: red;
}
      
.border-box {
    box-sizing: border-box;
    width: 600px;
    border: 10px solid;
    padding: 50px;
    margin: 50px;
    background-color: red;
}

<div class="content-box">content-box</div>
<div class="border-box">border-box</div>

box-shadow 속성

box-shadow: 안쪽 그림자가로축 그림자세로축 흐림정도 확장 그림자색; }

#shadow_00 { box-shadow: inset 10px 10px 5px 5px blue; }
#shadow_01 { box-shadow: 5px 5px; }
#shadow_02 { box-shadow: 5px 5px orange; }
#shadow_03 { box-shadow: 5px 5px 10px; }
#shadow_04 { box-shadow: 0 0 15px red; }
#shadow_05 { box-shadow: 5px 5px 10px black, 0 0 15px purple, 0 0 30px maroon; }

 

컨텐츠(contents)

width와 height 속성

• width와 height는 가로와 세로를 말하며, 기본값은 auto로 웹 브라우저가 각 HTML 요소에 맞게 자동으로 높이와 너비를 설정해 준다.

div {
    height: 200px;
    width: 500px;
    overflow: hidden;      /* 넘친 콘텐츠 감추기 */
}

max-width, max-height 속성

• max-width와 max-height는 최대 넓이와 높이를 말하며, 기본값은 none으로 해당 요소의 넓이에 제한을 두지 않고 해당 높이는 자동으로 설정된다는 의미다.
• max-width 속성으로 설정하면 줄어드는 웹 브라우저의 크기에 맞춰 해당 요소의 너비도 자동으로 줄고, max-height 속성으로 설정할 때 해당 요소의 높이가 설정된 최대 높이보다 클 경우에는 수직 스크롤 바를 생성한다.

div.maxWidth { max-width: 500px; }
p { max-height: 50px; overflow: auto; }

min-width, min-height 속성

• min-width와 min-height는 최소 넓이와 높이를 말하며, 기본값은 0으로 설정된 넓이와 높이 이하로 줄어들면 해당 요소의 넓이와 높이는 더 줄지 않고 스크롤 바를 생성한다.

div.minWidth { min-width: 500px; }
p { min-height: 100px; }

 

패딩(padding)

padding 속성

• 패딩 영역은 background-color 속성으로 설정하는 배경색의 영향을 함께 받으며, CSS로 패딩 영역의 크기를 방향별로 따로 설정할 수 있다.

div.pad {
        padding-top: 50px;            /* 위 */
        padding-right: 10px;          /* 오른쪽 */
        padding-bottom: 30px;         /* 아래 */
        padding-left: 100px;          /* 왼쪽 */
}

padding 속성 축약 표현

/* 4개의 padding 속성값은 top, right, bottom, left을 의미 */
div.four { padding: 20px 50px 30px 50px; }

/* 3개의 padding 속성값은 top, right와 left, bottom을 의미 */
div.three { padding: 20px 50px 30px; }

/* 2개의 padding 속성값은 top과 bottom, right와 left을 의미 */
div.two { padding: 10px 20px; }

/* 1개의 padding 속성값은 모든 패딩값을 같게 설정을 의미 */
div.first { padding: 10px; }

 

테두리(border)

border-style 속성

.dotted {border-style: dotted;}  /* 점선 */
.dashed {border-style: dashed;}  /* 약간 긴 점선 */
.solid {border-style: solid;}    /* 실선 */
.double {border-style: double;}  /* 이중 실선 */
.groove {border-style: groove;}  /* 3차원 입체선, border-color가능 */
.ridge {border-style: ridge;}    /* 3차원 능선효과, border-color가능 */
.inset {border-style: inset;}    /* 3차원 내지선, border-color가능 */
.outset {border-style: outset;}  /* 3차원 외지 끼운선, border-color가능 */
.none {border-style: none;}      /* 테두리 없앰 */
.hidden {border-style: hidden;}  /* 테두리 존재하나 보이지 않음 */

.mix {border-style: solid dashed dotted double;}

/* 4개의 border 속성값은 top, right, bottom, left을 의미 */
div.four { border-style: dotted dashed solid double; }

/* 3개의 border 속성값은 top, right와 left, bottom을 의미 */
div.three { border-style: dotted dashed solid; }

/* 2개의 border 속성값은 top과 bottom, right와 left을 의미 */
div.two { border-style: dotted dashed; }

/* 1개의 border 속성값은 모든 패딩값을 같게 설정을 의미 */
div.first { border-style: dotted; }

border-width 속성

.dottedA { border-style: dotted; border-width: 2px; }
.dottedB { border-style: dotted; border-width: 5em; }
.dashedA { border-style: dashed; border-width: 7cm; }
.dashedB { border-style: dashed; border-width: thin; }
.doubleA { border-style: double; border-width: medium; }
.doubleB { border-style: double; border-width: thick; }

.mix { border-style: solid; border-width: 1px 2px 10px thick; }

border-color 속성

/* border-color값이 없으면 해당 요소의 color 속성값을 그대로 물려받음 */
/* border-color속성은 border-style이 없으면 적용되지 않음 */
p { color: teal; border-style: solid; }

p.red { border-color: red; }
p.green { border-color: rgb(0,255,0); }
p.blue { border-color: #0000FF; }
p.transparent { border-color: transparent; }

p.mix { border-color: red green blue maroon; }

border-radius 속성

.border-circle { border-radius: 50%; }
.border-rounded { border-radius: 5px; }
.border-rounded { border-radius: 10px 40px 40px 10px; }

#p_00 {
        border-top-left-radius: 20px;
        border-top-right-radius: 40px;
        border-bottom-right-radius: 60px;
        border-bottom-left-radius: 80px;
}

/* 4개의 속성값일 때 top-left, top-right, bottom-right, bottom-left 순서 */
#p_01 { border-radius: 20px 40px 60px 80px; }

/* 3개의 속성값일 때 top-left, top-right와 bottom-left, bottom-right 순서 */
#p_02 { border-radius: 20px 40px 60px; }

/* 2개의 속성값일 때 top-left와 bottom-right, top-right와 bottom-left 순서 */
#p_03 { border-radius: 20px 40px; }

/* 1개의 속성값일 때 border-radius 속성값이 모두 같은 값으로 설정 */
#p_04 { border-radius: 20px; }

border-image 속성

• CSS3에서는 요소를 둘러싸는 테두리에 이미지를 사용할 수 있다.
• border-image 속성을 설정하기 위해서는 반드시 border 속성이 먼저 설정되어 있어야 한다.

선택자 {
    border:
    border-image-source: 테두리로 사용할 이미지 설정
    border-image-slice: 테두리로 사용할 이미지를 자르는 방법을 설정
    border-image-width: 테두리로 사용할 이미지의 너비를 설정
    border-image-outset: 테두리 너머로 테두리로 사용할 이미지가 얼마만큼 넘어갈지 설정
    border-image-repeat: 테두리 이미지의 중간 부분의 처리를 반복으로 할지 늘릴지를 설정
}

/*  속성값을 사용하여 테두리 중간 부분의 처리를 반복으로 설정 */
#p_04 {
    border: solid 20px transparent;
    border-image: url(/examples/images/img_css3_pattern.png) 34 round;
}

/* stretch 속성값을 사용하여 테두리 중간 부분의 처리를 늘리는 것으로 설정 */
#p_01 {
    border: solid 20px transparent;
    border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
}

/* 수평 테두리는 round 반복으로, 수직 테두리는 stretch 늘리는거로 설정 */
#p_01 {
    border: solid 20px transparent;
    border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
}

border 속성 축약 표현

/* border: border-width border-style border-color; */
.good { border: 3px solid teal; }
.wrong { border: 5px teal; }

 

마진(Margin)

마진(margin) 속성

• margin 속성값을 음수로 설정하여 해당 요소를 다른 요소의 위에 겹치게 할 수도 있다.
• margin 속성값을 inherit로 설정하면 부모 요소의 margin 속성값을 물려 받는다.

div.parent {
    margin-top: -25px;
    margin-right: 10px;
    margin-bottom: 30px;
    margin-left: 100px;
}

div.child {
    background-color: #FFF8DC;
    margin-left: inherit;
}

• margin 속성값을 auto로 설정하면 해당 요소의 수평 마진을 자동으로 설정하는데, 그 결과 해당 요소는 부모 요소의 정중앙에 위치한다.

div {
    border: 2px solid teal;
    width: 300px;
    margin: auto;
}

margin 속성 축약 표현

/* 4개의 border 속성값은 top, right, bottom, left을 의미 */
div.four { border-style: dotted dashed solid double; }

/* 3개의 border 속성값은 top, right와 left, bottom을 의미 */
div.three { border-style: dotted dashed solid; }

/* 2개의 border 속성값은 top과 bottom, right와 left을 의미 */
div.two { border-style: dotted dashed; }

/* 1개의 border 속성값은 모든 패딩값을 같게 설정을 의미 */
div.first { border-style: dotted; }

 

아웃라인(Outline)

• outline 속성은 HTML 요소의 가장 바깥 부분을 둘러싸고 있는 부분 스타일로 outline은 border와는 달리 HTML 요소의 전체 크기에는 포함되지 않는다.

outline-style 속성

p.dotted {outline-style: dotted;}   /* 점선 */
p.dashed {outline-style: dashed;}   /* 긴 점선 */
p.solid {outline-style: solid;}     /* 실선 */
p.double {outline-style: double;}   /* 이중 실선 */
p.groove {outline-style: groove;}   /* 3차원 입체선, outline-color영향 */
p.ridge {outline-style: ridge;}     /* 3차원 능선효과, outline-color영향 */
p.inset {outline-style: inset;}     /* 3차원 내지 끼운선, outline-color영향 */
p.outset {outline-style: outset;}   /* 3차원 외지 끼운선, outline-color영향 */
p.none {outline-style: none;}       /* 아웃라인 없앰 */
p.hidden {outline-style: hidden;}   /* 아웃라인 있지만 표현안함 */

outline-width 속성

• outline-width 속성은 아웃라인의 두께를 설정한다.

p.solidA { outline-style: solid; outline-color: violet; outline-width: 2px; }
p.solidB { outline-style: solid; outline-color: coral; outline-width: 7cm; }
p.solidC { outline-style: solid; outline-color: coral; outline-width: 3em; }
p.dashedA { outline-style: dashed; outline-color: violet; outline-width: thin; }
p.dashedB { outline-style: dashed; outline-color: coral; outline-width: thick; }
p.dashedC { outline-style: dashed; outline-color: coral; outline-width: medium; }

outline-color 속성

p { border: 1px solid black; outline-style: dashed; }
p.red { outline-color: red; }
p.green { outline-color: rgb(0,255,0); }
p.blue { outline-color: #0000FF; }

/* 배경색과 상관없이 아웃라인을 보여주기 위한 색반전 */
p.invert { outline-color: invert; }

outline-offset 속성

• outline-offset 속성은 테두리와 아웃라인 사이의 여백을 설정한다.

outline 속성 축약 표현

p { border: 1px solid black; }
p.none { border-style: none; }
p.good { outline: 3px solid teal; }
p.wrong { outline: 5px teal; }

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/