CSS Box Model   CSS 박스 모델

(2019-05-13)

CSS margin, CSS 여백, CSS border, CSS 테두리, CSS padding, CSS 패딩, CSS width, CSS height

1. CSS 박스 모델 (Box Model)CSS웹 페이지 안에 모든 요소(Element)를 사각형 박스 모델로 다룸

      


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

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


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

  ㅇ 박스 크기 조정
     - width, height 속성에 의해 크기를 조정하나, 선택된 영역이 어느 것인지에 따라 다름

  ㅇ 해당 영역 
     - 기본 => (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 적용시, 둘 중 하나가 다른 것에 영향을 미침

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

     - border-style : { border-style : 값; }
        . dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden
     - border-color
     - border-width
     - [참고] 단축형 지정 例) { border : solid black 5px; } // 두꺼운 검은색의 5 픽셀 테두리

  ㅇ 패딩 (Padding) : { padding : 값 }
     - 패딩 위치별 지정 : (top, right, bottom, left)
        . padding-top, padding-right, padding-bottom, padding-left
     - [참고] 패딩 색 지정은 따로 없음


5. CSS 박스 모델의 (폭, 높이) 속성

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

  ㅇ 높이 : { height : 값 }
     - [참고] ☞ MDN : height CSS 속성

  ※ 한편, { max-width : 100%; height : auto; vertical-align : bottom; } 설정은,
     - 이미지 크기 등이 박스 크기 보다 클 때, 그 박스 크기에 이미지를 조절해/맞춰서 보여주고,
     - 이미지 아래에 여분 공백이 들어가지 않도록 하는데에 적절 함


6. CSS 박스 모델의 (넘침 조절) 속성

  ㅇ overflow 속성 : 지정된 폭,높이 보다 표시될 내용이 넘칠 때의 동작 방식
     - overflow : visible => 넘친 내용 그대로 표시하는 기본값(default)
     - overflow : scroll  => 항상 스크롤바 나타남
     - overflow : auto    => 넘치면 스크롤바 나타남
     - overflow : hidden  => 넘친 내용이 안보임
        . float된 요소 후면에 경계선,배경색이 나타나지 않도록 레이아웃을 잡을 때에 유용함


[CSS] 1. CSS 2. CSS 선택자 3. CSS 박스 모델 4. block,inline 요소 유형 5. CSS 속성 값 6. CSS 배경 7. CSS 색상 8. CSS 위치 레이아웃 9. CSS 정렬 10. CSS 텍스트

 
        최근수정     요약목록     참고문헌