본문 바로가기
  • search_ _ _ _
  • search_ _ _ _
  • search_ _ _ _
html+css

box model 속성 (content, padding, border, margin, outline)

by 오늘의갈비찜 2021. 4. 25.
728x90
content 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다.

ex)

    div {

        background-color: red;

        padding: 50px;

        border: 20px solid maroon;

        margin: 50px;

    }

 

padding 패딩(padding) : 내용과 테두리 사이의 간격입니다. 패딩은 눈에 보이지 않습니다.
 background-color 속성으로 설정하는 배경색의 영향을 함께 받습니다.

1. padding-top

2. padding-right

3. padding-bottom

4. padding-left

ex)   div.four { padding: 10px 20px 30px 40px;}

=

padding-top: 10px;

padding-right: 20px;

padding-bottom: 30px;

padding-left: 40px;

ex)   div.four { padding: 10px 20px 30px;}

=

padding-top: 10px;

padding-right: 20px;

padding-bottom: 30px;

padding-left: 20px;

ex) div.four {padding: 10px 20px;}

=

padding-top: 10px;

padding-right: 20px;

padding-bottom: 10px;

padding-left: 20px;

 

border 모든 border 속성을 이용한 스타일을 한 줄에 설정할 수 있음.

border-top
border-top-style
border-top-width
border-top-color
border-right
border-right-style
border-right-width
border-right-color
border-bottom
border-bottom-style
border-bottom-width
border-bottom-color
border-left
border-left-style
border-left-width
border-left-color

ex) div.four {border-style: dotted dashed solid double;}

=

border-style-top: dotted;

border-style-right: dashed;

border-style-bottom: solid;

border-style-left: double;

 

ex) div.four {border-style: dotted dashed solid;}

=

border-style-top: dotted;

border-style-right: dashed;

border-style-bottom: solid;

border-style-left: dashed;

ex)

    .good { border: 3px solid teal; }

    .wrong { border: 5px teal; }

 Outline

outline 속성은 HTML 요소의 가장 바깥 부분을 둘러싸고 있는 아웃라인 부분의 스타일을 설정합니다.

이 속성은 border 속성과 마찬가지로 style, width, color 속성을 가집니다.

 

하지만 outline 속성은 border 속성과는 달리 HTML 요소의 전체 크기에는 포함되지 않습니다.

HTML 요소의 높이나 너비는 outline의 두께에 전혀 영향을 받지 않습니다.
border-style 테두리(border) : 내용와 패딩 주변을 감싸는 테두리입니다.

1. dotted : 테두리를 점선으로 설정함.

2. dashed : 테두리를 약간 긴 점선으로 설정함.

3. solid : 테두리를 실선으로 설정함.

4. double : 테두리를 이중 실선으로 설정함.

5. groove : 테두리를 3차원인 입체적인 선으로 설정하며, border-color 속성값에 영향을 받음.

6. ridge : 테두리를 3차원인 능선효과가 있는 선으로 설정하며, border-color 속성값에 영향을 받음.

7 inset : 테두리를 3차원인 내지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받음.

8 outset : 테두리를 3차원인 외지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받음.

9 none : 테두리를 없앰.

10 hidden : 테두리가 존재하기는 하지만 표현되지는 않음.

ex) .none {border-style: none;}

     .hidden {border-style: hidden;}

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

 outline-style

outline-style 속성을 이용하면 아웃라인(outline)을 다양한 모양으로 설정할 수 있습니다.

1. dotted : 아웃라인을 점선으로 설정함.

2. dashed : 아웃라인을 약간 긴 점선으로 설정함.

3. solid : 아웃라인을 실선으로 설정함.

4. double : 아웃라인을 이중 실선으로 설정함.

5. groove : 아웃라인을 3차원인 입체적인 선으로 설정하며, outline-color 속성값에 영향을 받음.

6. ridge : 아웃라인을 3차원인 능선효과가 있는 선으로 설정하며, outline-color 속성값에 영향을 받음.

7. inset : 3차원인 내지로 끼운 선으로 설정하며, outline-color 속성값에 영향을 받음.

8. outset : 3차원인 외지로 끼운 선으로 설정하며, outline-color 속성값에 영향을 받음.

9. none : 아웃라인(outline)을 없앰.

10. hidden : 아웃라인(outline)이 존재하기는 하지만 표현되지는 않음.

ex) p.outset {outline-style: outset;}

     p.none {outline-style: none;}

     p.hidden {outline-style: hidden;}
border-width

border-width 속성은 테두리(border)의 두께를 설정합니다.

px, em, cm 등과 같은 CSS 크기 단위를 이용하여 두께를 직접 설정할 수 있습니다.

예약어인 thin(실선), medium(기본선,초기값), thick(굵은선)을 사용하여 설정할 수도 있습니다.


ex)

   .doubleA { border-style: double; border-width: 5px; }

    .doubleB { border-style: double; border-width: thick; }

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

 outline-width 

outline-width 속성은 아웃라인(outline)의 두께를 설정합니다.

px, em, cm 등과 같은 CSS 크기 단위를 이용하여 두께를 직접 설정할 수 있습니다.

예약어인 thin(실선), medium(기본선,초기값), thick(굵은선)을 사용하여 설정할 수도 있습니다.

ex)

    p.solidA { outline-style: solid; outline-color: violet; outline-width: 2px; }

    p.solidB { outline-style: solid; outline-color: coral; outline-width: 7px; }

    p.dashedA { outline-style: dashed; outline-color: violet; outline-width: thin; }

    p.dashedB { outline-style: dashed; outline-color: coral; outline-width: thick; }

 
border-color

border-color 속성은 테두리(border)의 색상을 설정합니다.

기본적인 color 속성값들뿐만 아니라 투명한 선을 나타내는 transparent 속성값을 사용할 수도 있습니다.

border-color 속성값이 설정되지 않으면 해당 요소의 color 속성값을 그대로 물려받습니다.

ex)

   .red { border-color: red; }

    .green { border-color: rgb(0,255,0); }

    .blue { border-color: #0000FF; }

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

    .color { color: teal; }  /border-color , text color 모두 teal.

 outline-color 

outline-color 속성은 아웃라인(outline)의 색상을 설정합니다.

기본적인 color 속성값들뿐만 아니라 색반전을 나타내는 invert 속성값을 사용할 수 있습니다.

또한, invert 속성값은 배경색과 상관없이 아웃라인을 보여주기 위한 색반전을 설정합니다.

ex)

    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; }

 

margin 마진(margin) : 테두리와 이웃하는 요소 사이의 간격입니다. 마진은 눈에 보이지 않습니다.
margin 속성값을 inherit로 설정하면, 부모(parent) 요소의 margin 속성값을 그대로 물려받습니다.

margin-top
margin-right
margin-bottom
margin-left

ex) div.four {margin: 10px 20px 30px 40px;}

=

margin-top: 10px;

margin-right: 20px;

margin-bottom: 30px;

margin-left: 40px;



ex)

    div.parent { height: 100px; margin-left: 100px; }

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

 

margin 속성값에 auto를 사용하는 이유

margin 속성값을 auto로 설정하면, 웹 브라우저가 수평 방향 마진(margin) 값을 자동으로 설정합니다.

즉, 해당 HTML 요소의 왼쪽과 오른쪽 마진을 자동으로 설정하게 됩니다.

그 결과 해당 요소는 그 요소를 포함하고 있는 부모(parent) 요소의 정중앙에 위치하게 됩니다.

ex)

    div {

        border: 2px solid teal;

        width: 300px;

        margin: auto;

    }

 

 

출처: tcpschool.com/css/css_boxmodel_boxmodel

728x90

'html+css' 카테고리의 다른 글

position 속성(static, relative, fixed, absolute, z-index, clip ,cursor, overflow)  (0) 2021.04.25
display 속성 (block, inline, visibility, display, opacity )  (0) 2021.04.25
Image Sprite 속성  (0) 2021.04.24
table 속성  (0) 2021.04.24

관련글

티스토리툴바