CSS Box Model   CSS 박스 모델

(2021-06-30)

margin , CSS 여백, border , CSS 테두리, padding , CSS 패딩, width , height , box-sizing, overflow


1. CSS 박스 모델 (Box Model)CSS웹 페이지 내 보이는 모든 요소들을 사각형 박스 모델로 다룸
     - 즉, 이를 통해, 원하는 크기,모양의 조절, 원하는 위치에 배치할 수 있음

  ㅇ 요소별 유형                     ☞ 블록 요소, 인라인 요소, 인라인 블록 요소, disply 속성 참조
     - block 요소  :  요소를 박스화시켜, 위아래에 줄바꿈이 일어나도록 함
     - inline 요소 :  요소들을 같은 줄에 표시함으로써, 폭,높이 및 상하 여백 조정 불가
     - inline-block 요소  :  요소들을 같은 줄에 표시하되, 폭,높이 및 상하 여백 조정이 가능토록 함


2. CSS 박스 모델의 영역별 구분

     

  ㅇ margin (마진)     : 바깥 여백
  ㅇ border (테두리선) : 경계선
  ㅇ padding (페딩)    : 안 여백
  ㅇ content (내용)    : 실제 표시할 내용
  ㅇ background (배경) : border,padding,content 영역 만 해당 (margin 제외)


3. CSS 박스 모델에서, `영역 결정` 및 `크기 조정`

  ㅇ 박스 크기 조정
     - 기본적으로, width, height 속성에 의해 크기(폭,높이)를 조정하나,
     - 선택된 영역(box-sizing 속성으로 조절 가능)이 어느 것인지에 따라 다름
     * 마진은 박스 크기에 포함되지 않음

  ㅇ 선택된 영역 
     - 기본 => (content) 영역 만 해당
     - 옵션 => (padding + content) 영역, (border + padding + content) 영역
        . 옵션에 의한 박스 크기 조정은, 
        . 아래와 같이, box-sizing 속성 {box-sizing:옵션선택}에 의함

  ㅇ box-sizing 속성 : 박스의 폭(width),높이(height)를 영역에 따라 다르게 계산하는 방식
     - box-sizing : content-box => (content) 영역 만 해당
        . 기본값(default) 임
     - box-sizing : padding-box => (padding + content) 영역 만 포함된 것으로 계산
     - box-sizing : border-box  => (border + padding + content) 영역 
        . 이 경우, background 영역에 해당되는 것과 같음


4. CSS 박스 모델에서, (여백, 테두리, 패딩)의 조절 

  ㅇ 여백 (Margin)  { margin : 값 }
     - 여백 위치별 지정 : (top, right, bottom, left)  
        .  margin-top, margin-right, margin-bottom, margin-left

     - [참고]  `여백 색` 지정
        . 기본이 투명이고, 배경색이 비춰 보임
     - [참고]  `마진 병합` 현상
        . margin-top,margin-bottom 동시 적용시, 둘 간에 큰 속성값 하나 만 설정됨
        . 부모,자식 간에 margin-top,margin-bottom 적용시, 둘 중 하나가 다른 것에 영향을 미침
     - [참고]  가장 기본적인 `가로 중앙 정렬`
        . { maring: 0 auto; } => 해당 요소에, 위아래 여백 주지 않고, 가로 중앙 정렬 함

  ㅇ 테두리 (Border)   { border : 값 }                      ☞ w3schools CSS Borders 참조
     - 테두리 위치별 지정 : (top, right, bottom, left)  
        . border-top, border-right, border-bottom, border-left

     - border-width
        . 위치별 : border-top-width, border-right-width, border-bottom-width, border-left-width
     - border-style   { border-style : 값; }
        . 값 : dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden
     - border-color 
        . 값 : black, red 등
     - border-radius  ☞ 아래. 5항 (모서리를 둥글게 만들기) 참조

     - 例)  CSS 단축형  { border : solid black 5px; } // 두꺼운 검은색의 5 픽셀 테두리

  ㅇ 패딩 (Padding)   { padding : 값 }
     - 패딩 위치별 지정 : (top, right, bottom, left)
        . padding-top, padding-right, padding-bottom, padding-left

     - [참고] 패딩 색 지정은 따로 없음


5. CSS 박스 모델에서, 모서리를 둥글게 만들기

  ㅇ 모서리 { border-radius : 값; }                                 ☞ Coding Factory 강좌 참조
     - border-top-left-radius, border-top-right-radius, border-bottom-right-radius,
        border-bottom-left-radius

     - 例)
        . 원 박스 표현 : weight,height,border-radius 모두 같은 속성값 지정
           .. 例) { weight: 100px, height: 100px, border-radius: 100px }
        . 반원 박스 표현  
           .. 例) { weight: 200px, height: 100px, border-radius: 100px 100px 0 0 }
        . 1/4원 박스 표현
           .. 例) { weight: 100px, height: 100px, border-radius: 100px 0 0 0 }


6. CSS 박스 모델에서, 컨텐츠의 크기(폭, 높이)

  ㅇ 폭 : { width : 값 }
     - [참고] ☞ MDN : width CSS 속성

  ㅇ 높이 : { height : 값 }
     - [참고] ☞ MDN : height CSS 속성속성 값 표기의 종류
     - 크기(픽셀 등 고정 크기), 백분율(%,웹브라우저 창 크기에 따른 백분율), auto(기본값)

  ※ 例) 
     - #some_box { max-width : 100%; height : auto; vertical-align : bottom; }
        . 이미지,텍스트 크기가 박스 크기 보다 클 때, 
        . 그 박스 너비 크기에 최대한 맞춰서(이미지 크기,텍스트 줄바꿈을 조절해) 보여주고,
        . 이미지,텍스트를 바닥선에 맞춰서, 하단에 공백이 없도록 수직 하단 정렬 함
     - #some_box { min-width : 300px; max-width : 500px; }
        . 이미지,텍스트 폭이 300px를 넘으면, 자동으로 박스 크기 늘려주다가, 500px 넘으면 중단


7. CSS 박스 모델에서, 컨텐츠의 넘침 조절

  ㅇ overflow 속성 : 지정된 폭,높이 보다 표시될 내용이 넘칠 때의 동작 방식
     - overflow : visible => 넘친 내용 그대로 표시하는 기본값(default)
     - overflow : scroll  => 항상 스크롤바 나타남
     - overflow : auto    => 넘치면 스크롤바 나타남
     - overflow : hidden  => 넘친 내용이 안보임
        . 자손들이 차지하는 화면 너비 모두를 감싸는 특성 있음             ☞ CSS 정렬 참조
           .. (즉, clear : both 효과 있음)
        . 특히, float된 자손 요소들로 인해, 부모 요소가 차지하지 못한 빈공간에,
           .. 경계선,배경색 등이 침범하지 않도록, 레이아웃할 때 유용함

박스모델 (마진,보더,여백,block,inline)
   1. CSS 박스 모델   2. block,inline 요소 유형  


Copyrightⓒ written by 차재복 (Cha Jae Bok)               기술용어해설 후원
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"