[CSS] 박스 모델 - 패딩, 테두리, 마진, 아웃라인
박스 모델(box-model)
- 박스 모양으로 구성된 모든 HTML 요소
1. 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분
2. 패딩(padding) : 내용과 테두리 사이의 간격. 눈에 보이지X
3. 테두리(border) : 내용와 패딩 주변을 감싸는 테두리
4. 마진(margin) : 테두리와 이웃하는 요소 사이의 간격. 눈에 보이지X
- height와 width 속성 => 내용 부분만을 대상
* IE 8 이하는 height, width에 패딩, 테두리 크기 포함 => <!DOCTYPE html> 필수!!
패딩(padding)
- 내용과 테두리 사이의 간격
- 배경색의 영향을 받음
1. padding-top
2. padding-right
3. padding-bottom
4. padding-left
div.pad {
padding-top: 50px;
padding-right: 10px;
padding-bottom: 30px;
padding-left: 100px;
}
패딩 축약 표현(padding shorthand)
div.four { padding: 20px 50px 30px 50px; }
div.three { padding: 20px 50px 30px; }- 4개의 padding 속성값을 가질 때는 top - right - bottom - left 순
- 3개의 padding 속성값을 가질 때는 top - right&left - bottom 순
- 2개의 padding 속성값을 가질 때는 top&bottom - right&left 순
- 1개의 padding 속성값을 가질 때는 모든 패딩값을 같게
테두리(border)
- 내용와 패딩 주변을 감싸는 테두리
border-style 속성
- 테두리의 다양한 모양 설정
- dotted : 테두리를 점선으로 설정
- dashed : 테두리를 약간 긴 점선으로 설정
- solid : 테두리를 실선으로 설정
- double : 테두리를 이중 실선으로 설정
- groove : 테두리를 3차원인 입체적인 선으로 설정, border-color 속성값에 영향을 받음
- ridge : 테두리를 3차원인 능선효과가 있는 선으로 설정, border-color 속성값에 영향을 받음
- inset : 테두리를 3차원인 내지로 끼운 선으로 설정, border-color 속성값에 영향을 받음
- outset : 테두리를 3차원인 외지로 끼운 선으로 설정, border-color 속성값에 영향을 받음
- none : 테두리를 없앰
- hidden : 테두리가 존재하기는 하지만 표현되지는 않음
.dotted {border-style: dotted;}
.dashed {border-style: dashed;}
.solid {border-style: solid;}
.double {border-style: double;}
.groove {border-style: groove;}
.ridge {border-style: ridge;}
.inset {border-style: inset;}
.outset {border-style: outset;}
.none {border-style: none;}
.hidden {border-style: hidden;}
.mix {border-style: solid dashed dotted double;}
border-width 속성
- 테두리의 두께 설정
- px, em, cm 등 크기 단위를 이용해 직접 설정 가능
- thin, medium, thick 예약어를 이용해 설정 가능
.dottedA { border-style: dotted; border-width: 2px; }
.dottedB { border-style: dotted; border-width: 5px; }
.dashedA { border-style: dashed; border-width: thin; }
.dashedB { border-style: dashed; border-width: thick; }
.doubleA { border-style: double; border-width: 5px; }
.doubleB { border-style: double; border-width: thick; }
.mix { border-style: solid; border-width: 1px 2px 10px thick; }
border-color 속성
- 테두리의 색상 설정
- 투명한 선 : transparent 속성값 이용
- 설정되지 않으면 color 속성값을 그대로 물려받음
.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)의 개별 설정
.mixA {
border-top-style: dotted;
border-right-style: double;
border-bottom-style: dotted;
border-left-style: double;
}
.mixB { border-style: dotted double; }
/* mixA == mixB 같은 효과 */- 4개의 border-style 속성값을 가질 때는 top - right - bottom - left 순
- 3개의 border-style 속성값을 가질 때는 top - right&left - bottom 순
- 2개의 border-style 속성값을 가질 때는 top&bottom - right&left 순
- 1개의 border-style 속성값을 가질 때는 모든 테두리의 스타일을 같게
테두리 축약 표현(border shorthand)
.good { border: 3px solid teal; }
.wrong { border: 5px teal; }* border 속성 설정 시, 반드시 border-style 속성이 먼저 설정되어 있어야 함
마진(margin)
- 테두리와 이웃하는 요소 사이의 간격
- 배경색의 영향 받지 X
1. margin-top
2. margin-right
3. margin-bottom
4. margin-left
- 속성값을 음수로 설정하면 다른 요소 위에 겹치기 가능
div.mar {
margin-top: -25px;
margin-right: 10px;
margin-bottom: 30px;
margin-left: 100px;
}
마진 축약 표현(margin shorthand)
div.four { margin: 20px 50px 30px 50px; }
div.three { margin: 20px 50px 30px; }- 4개의 margin 속성값을 가질 때는 top - right - bottom - left 순
- 3개의 margin 속성값을 가질 때는 top - right&left - bottom 순
- 2개의 margin 속성값을 가질 때는 top&bottom - right&left 순
- 1개의 margin 속성값을 가질 때는 모든 마진값을 같게
margin 속성값에 auto를 사용하는 이유
- 웹 브라우저가 수평 방향 마진값을 자동으로 설정
- 즉, HTML 요소의 왼쪽과 오른쪽 마진 자동 설정
=> 부모 요소의 정중앙에 위치
div {
border: 2px solid teal;
width: 300px;
margin: auto;
}
아웃라인(outline)
- HTML 요소의 가장 바깥 부분을 둘러싸고 있는 아웃라인
- style, width, color 속성을 가짐
- HTML 요소의 전체 크기에는 포함 X, 높이나 너비에 영향도 X
outline-style 속성
- 아웃라인을 다양한 모양으로 설정
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)이 존재하기는 하지만 표현되지는 않음
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;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
p.none {outline-style: none;}
p.hidden {outline-style: hidden;}
* IE 8 이하는 <!DOCTYPE html> 태그가 있어야만 제대로 표현
outline-width 속성
- 아웃라인의 두께 설정
- px, em, cm 등 크기 단위를 이용해 직접 설정 가능
- thin, medium, thick 예약어를 이용해 설정 가능
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; }
outline-color 속성
- 아웃라인의 색상 설정
- 색반전을 나타내는 invert 속성값 사용 가능 => 배경색과 상관없이 색반전 설정
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 shorthand)
p { border: 1px solid black; }
p.none { border-style: none; }
p.good { outline: 3px solid teal; }
p.wrong { outline: 5px teal; }* outline 속성 설정 시, 반드시 outline-style 속성이 먼저 설정되어 있어야 함
http://tcpschool.com/css/css_boxmodel_boxmodel
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com