Box Moddle은 어떤게 있을까??

Box Model에 대해 알아보자.

Box Model이란

Box 관련 속성은 웹표준 CSS에서도 매우 중요한 부분이며, 이 부분을 마스터 했는지가 CSS를 어느정도 이해하느냐의 척도가 될 것입니다. 여기서 말하는 BOX란 콘텐츠가 자리하는 영역을 말하는 것으로 여기나올 속성들은 너비(width), 높이(height), 안 여백(padding), 바깥여백(margin),테두리(border)등 주로 블록 요소에서 적용됩니다.

1. width, height

요소의 가로 크기, 세로크기를 말하며 기본적으로 여백과 테두리를 포함하지 않습니다. 이와 함께 min-width, min-height, max-width, max-heigh등이 있습니다.

속성 값	속성 설명
width: 800px;	요소의 가로 폭을 800px로 지정함
height: 100%	요소의 높이 값을 100%로 지정함
min-width: 1024px	요소의 가로 폭을 1024px 이상ㅇ으로 지정함
min-height: 200px	요소의 높이 값을 200px 이상으로 지정함
max-width: 414px	요소의 너비 값을 414px 이하로 지정함
max-height: 591px	요소의 높이 값을 591px 이하로 지정함

2.padding

요소의 안쪽 여백 즉, 내용과 테두리 사이의 여백을 의미합니다. 기본적으로 width값이 100px인 요소의 padding이 10px이면 박스의 가로 크기는 10 + 100 +10 =120px입니다.

속성 값	속성 설명
padding: 10px;	위쪽,아래쪽,왼쪽,오른쪽 모두 각 10px
padding: 10px 20px	위쪽,아래쪽: 10px, 왼쪽,오른쪽: 20px
padding: 10px 20px 30px	위쪽: 10px, 왼쪽,오른쪽 : 20px, 아래쪽 : 30px
padding: 10px 20px 30px 40px	위쪽: 10px, 오른쪽 : 20px, 아래쪽 : 30px, 왼쪽: 40px (시계 방향)
pading-top: 10px	위쪽 : 10px
padding-right: 10px	오른쪽 : 10px
padding-bottom: 10px	아래쪽 : 10px
padding-left: 10px	왼쪽 : 10px

3. margin

요소의 바깥 여백 즉, 테두리와 다음 박수 사이의 여백을 의미합니다. margin은 당연히 width에 포함되지 않으며, 블록 요소에 width값을 명시하지 않고 margin 좌우를 주면 가로 길이가 줄어들게 됩니다. 값을 여러 번 쓸 때의 방향은 padding과 같습니다.

속성 값	속성 설명
margin: 10px;	위쪽,아래쪽,왼쪽,오른쪽 모두 각 10px
margin: 10px 20px	위쪽,아래쪽: 10px, 왼쪽,오른쪽: 20px
margin: 10px 20px 30px	위쪽: 10px, 왼쪽,오른쪽 : 20px, 아래쪽 : 30px
margin: 10px 20px 30px 40px	위쪽: 10px, 오른쪽 : 20px, 아래쪽 : 30px, 왼쪽: 40px (시계 방향)
margin-top: 10px	위쪽 : 10px
margin-right: 10px	오른쪽 : 10px
margin-bottom: 10px	아래쪽 : 10px
margin-left: 10px	왼쪽 : 10px

박스의 바깥쪽 여백을 담당하는 margin은 ‘세로 margin 겹침’ 이 일어납니다. 즉, 세로로 나열된 두 박스 사이의 간격은 두 margin의 합이 아니라 둘 중 큰 값이 됩니다.

박스의 중앙졍렬을 위해 margin: 0 auto; 을 사용할 수 있습니다.

4. border

박스의 테두리를 말합니다. 테두리의 색상, 모양, 굵기를 정할 줄 알아야 하며 한꺼번에 지정할 줄 알아야 합니다.

border-style, width, color

테두리의 형태, 굴기, 색상을 각각 따로 지정할 수도 있고 한 줄로 지정할 수도 있습니다.

속성 값 예문	속성 설명
border-color: blue;	테두리의 색상은 파란색으로 지정(색상명, HEX, RGB, RGBA, HSL, HSLA 모두 가능)
border-width: 2px	테두리의 굵기는 2px로 지정
border-style: solid	테두리의 선모양은 실선으로 지정
border-top: 1px solid red	위쪽 테두리만 1px 굵기의 빨간색 실선으로 지정
border-left: 1px solid red	왼쪽 테두리만 1px 굵기의 빨간색 실선으로 지정
border-right: 1px solid red	오른쪽 테두리만 1px 굵기의 빨간색 실선으로 지정
border-bottom: 1px solid red	아래쪽 테두리만 1px 굵기의 빨간색 실선으로 지정
border: 1px solid red	테두리 사방 모두 1px 굵기의 빨간색 실선으로 지정

테두리 선모양의 종류는 다양합니다.

선의 종류	속성 설명
solid	실선
dotted	점선
dashed	긴 점선
double	두 줄 실선 (굵기가 저거도 3px 이상)
none	테두리를 지지 않음
groove, ridge, inset, outset	각종 액자 형태의 테두리

6. BOX-sizing

기본적으로 width, height 값에 padding 값이나 border 값은 포함되지 않습니다. 그러면 witdhrk 100%로 설정되어 있을 경우 padding이나 border속성을 추가할 수가 없습니다. CSS3에서는 박스의 크기가 여백과 테두리를 포함해도 원래 크기를 넘지 않도록 하기 위해 box-sizing 속성을 이용할 수 있습니다.

✍️Css 예문

box-sizing: border-box;

속성 값 예문	속성 설명
box-sizing: content-box;	요소의 전체크기에 padding, border 값을 포함시킴
box-sizing: border-box;	요소의 전체크기에 padding, border 값을 포함시키지 않음

7. box-shadow

박스에 그림자를 넣을 수 있습니다.

box-shadow: 8px 15px 10px 7px inset rgba(0,0,50,0.4);

위 예문에 포함된 속성 값을 자세히 살펴보면 다음과 같습니다.
|속성 값|속성 설명| |:—:|:—:| | 8px | 그림자가 원본과 가로로 떨어진 간격 | | 15px | 그림자가 원본과 세로로 떨어진 간격 | | 10px| 그림자의 흐릿한 정도 (blur) | | 7px| 그림자의 확장 (spread - 양수는 확장, 음수는 축소) | | inset| 그림자가 물체의 안쪽에 나타남 (mac 사파리와 IE에서는 적용 안됨) | | rgba(0,0,50,0.4) | 그림자의 색상 |

8. resize

박스의 모서리를 마우스로 잡아당겨 크기를 조절하거나 못하게 할 수 있습니다.

resize: both;

속성 값	설명
horizontal	박스의 가로 방향으로 크기를 조절할 수 있도록 함
vertical	박스의 세로 방향으로 크기를 조절할 수 있도록 함
both	박스의 가로, 세로 양방향으로 크기를 조절할 수 있도록 함
none	박스의 크기를 조절할 수 없도록 함

9. appearance

form 관련 요소들 중에는 이미 가지고 있는 디자인 속성들이 있어, PC 또는 모바일 기기별로 그 모양이 다르게 나타나는 경우가 종종 있습니다. 고유하게 적용되어 있는 속성들을 모두 제거하여 초기화시키고자 할 때 접두어를 붙여 사용할 수 있습니다.

input, textarea, selet {
    -webkit-apperarance: none;
    border: 1px solid #ccc;
}

이상으로 다음시간에 뵙겠습니다!!

다음시간에 계속!