본문 바로가기
Spec UP - Frontend/부스트코스_UI 개발

CSS속성_box model(박스모델)

by TIS_Ha 2020. 3. 25.
반응형

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

 

Introduction to the CSS basic box model

When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes.

developer.mozilla.org

문서를 배치할 때 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각 요소를 사각형 상자로 나타냅니다 .

CSS를 이용해 이 상자의 크기, 위치 및 속성(색상, 배경, 테두리 크기 등)을 변경할 수 있습니다.

박스는 총 4가지의 세분된 영역으로 구성되어있으며 영역마다 다양한 스타일을 적용할 수 있습니다.

4가지 영역을 통틀어서 박스모델이라고 합니다.

 

Content 영역

요소의 실제 내용을 포함하는 영역입니다. 따라서 크기는 내용의 너비 및 높이를 나타냅니다.


Border 영역
content 영역을 감싸는 테두리 선을 border라고 합니다

 

Border 관련속성

1. border-width

기본 값 : medium 선의 굵기를 지정하는 속성입니다.

(속성값) 키워드 : thin / medium / thick    단위 : px, em, rem 등 (%, 정수 단위 사용 불가)

border-top-width, border-bottom-width, border-right-width, border-left-width를 이용하여 상하좌우 선의 굵기를 다르게 표현할 수 있습니다.

 

2. border-style

border-style 기본 값 : none 선의 모양을 지정하는 속성입니다.

border-top-style, border-bottom-style, border-right-style, border-left-style을 이용하여 상하좌우 선의 모양을 다르게 표현할 수 있습니다.

 

https://www.w3schools.com/css/css_border.asp

 

3. border-color

기본 값 : currentColor 선의 색상을 지정하는 속성입니다.

border-top-color, border-bottom-color, border-right-color, border-left-color를 이용하여 상하좌우 선의 색상을 다르게 표현할 수 있습니다.


border 연습


Padding 영역

content 영역과 테두리 사이의 여백을 padding이라고 합니다.

content 영역이 배경, 색 또는 이미지가 있을 때 패딩 영역까지 영향을 미칩니다.

이에 따라 padding을 content의 연장으로 볼 수 있습니다.

 

padding 관련 속성

속성값 (기본값 : 0)

1. length : 고정값으로 지정합니다. (ex,px,em..)

2. percent : 요소의 width의 상대적인 크기를 지정합니다.

 

3. padding-top : content 영역의 위쪽 여백을 지정합니다.

4. padding-right : content 영역의 오른쪽 여백을 지정합니다.

5. padding-bottom : content 영역의 아래쪽 여백을 지정합니다.

6. padding-left : content 영역의 왼쪽 여백을 지정합니다.

padding 축약형(상,우,좌,하)

축약 시 속성의 순서는 고정되어 있으며, 위쪽을 기준으로 시계방향으로 돌아간다고 생각하면 됩니다.

축약형으로 사용할 때 반드시 상 우 좌 하를 모두 적어야하는 것은 아니고

상하, 좌우 영역의 값이 같을때는 하나로 합쳐서 적용할 수 있습니다.

 

EX . padding: [top] [right] [bottom] [left]

1. 상하좌우의 값이 모두 다를때

    "padding : 20px 10px 5px 30px;" 

                위쪽 오른쪽 아래쪽 왼쪽

2. 좌우 패딩의 값이 같을때

    "padding: 10px 20px 5px;"   : 위쪽 / 좌우 / 아래쪽

3. 좌우 패딩의 값이 같으면서 상하 패딩의 값이 같을때

    "padding: 5px 15px" : 상하 / 좌우

4. 상우좌하의 패딩 값이 모두 같을 때

    "padding: 5px 5px"  또는 "padding: 5px"


Margin 영역

border 바깥쪽의 영역(요소의 바깥 여백)을 margin이라고 합니다.

border 영역을 다른 요소와 구별하기 위해 쓰이는 빈 영역입니다.
즉, 주변 요소와의 여백(간격)을 margin을 이용해 지정할 수 있습니다.

 

margin 관련 속성

속성값 (기본값:0) margin은 padding과 달리 음수 값을 지정할 수 있습니다.

1. length : 고정값으로 지정합니다.(px, em ...)

2. percent : 요소의 width에 상대적인 크기를 지정합니다.

3. auto : 브라우저에 의해 계산된 값이 적용됩니다.

            대부분의 경우 기본값 0으로 적용되며 정렬할때 이용합니다.

4. margin-top   : border 영역 위쪽 여백을 지정합니다.

5. margin-right : border 영역  오른쪽 여백을 지정합니다.

6. margin-bottom : border 영역 아래쪽 여백을 지정합니다.

7. margin-left   : border 영역 왼쪽 여백을 지정합니다.

 

 

3번 속성  margin:auto 정렬 예시

margin:auto 이용 시 반드시 width 설정이 되어있어야 자신의 width영역을 제외한 나머지 여백에 대해 균등분할하여 적용됩니다.

 

margin 축약형(상,우,좌,하)

축약 시 속성의 순서는 고정되어 있으며, 위쪽을 기준으로 시계방향으로 돌아간다고 생각하면 됩니다.

축약형으로 사용할 때 반드시 상 우 좌 하를 모두 적어야하는 것은 아니고

상하, 좌우 영역의 값이 같을때는 하나로 합쳐서 적용할 수 있습니다.

 

EX . margin: [top] [right] [bottom] [left]

1. 상하좌우의 값이 모두 다를때

"margin : 20px 10px 5px 30px;"

위쪽 오른쪽 아래쪽 왼쪽

2. 좌우 마진의 값이 같을때

"margin: 10px 20px 5px;" : 위쪽 / 좌우 / 아래쪽

3. 좌우 마진의 값이 같으면서 상하 마진의 값이 같을때

"margin: 5px 15px" : 상하 / 좌우

4. 상우좌하의 마진 값이 모두 같을 때

"margin: 5px 5px" 또는 "margin: 5px"

 

margin collapse(마진 병합)

마진 병합은 인접한 두 개 이상의 수직 방향 박스의 마진이 하나로 합쳐지는 것을 의미합니다.
마진 병합이 다음 세가지의 경우에 일어납니다.

1. 두 요소가 상하로 인접한 경우: 위 요소의 하단 마진과 아래 요소의 상단 마진의 병합이 일어납니다.

2. 부모 요소와 첫 번째 자식 요소 또는 마지막 자식 요소

 - 부모 요소의 상단 마진과 첫 번째 자식 요소의 상단 마진 병합이 일어납니다.

 - 부모 요소의 하단 마진과 마지막 자식 요소의 하단 마진 병합이 일어납니다.

3.내용이 없는 빈 요소의 경우: 해당 요소의 상단 마진과 하단 마진의 병합이 일어납니다.

 

마진 병합은 수직 방향으로만 이루어지며, 좌우에 대해서는 일어나지 않습니다.
마진 병합은 마진이 반드시 맞닿아야 발생하기 때문에 2,3번째의 경우 패딩 및 보더가 없어야 합니다.

마진 병합은 절대 위치나 상대 위치가 주어진 요소들에서는 발생하지 않습니다.

 

 

반응형

댓글