반응형
박스 모델(box model)
- 모든 HTML 요소는 박스 모양으로 구성되는데 이것을 박스 모델이라 부른다.
- CSS에서 설정된 width와 height에 패딩, 테두리, 마진의 크기는 포함되지 않으며, width와 height을 비롯한 모든 박스모델 관련 속성들은 상속되지 않는다.
![](https://blog.kakaocdn.net/dn/dpgKhF/btskCqYOxOL/nAikkKk9WwV2fq4c4mRSY0/img.png)
- 내용(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
반응형
'Language > Css' 카테고리의 다른 글
[Css] 위치 정렬 - position, float (0) | 2023.06.19 |
---|---|
[Css] 보기 속성 - display, visibility, opacity (0) | 2023.06.19 |
[Css] 레이아웃 - UI, 다중 컬럼, 반응형 웹디자인, 플렉서블 박스 (0) | 2023.06.19 |
[Css] 선택자 - 태그, 아이디, 속성, 동위, 의사 요소 클래스 (0) | 2023.06.19 |
[Css] 제어 규칙 - @규칙, 미디어쿼리 (0) | 2023.06.19 |