CSS Box Model   CSS 박스 모델

(2019-08-24)

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

Top > [기술공통]
[기초과학]
[진동/파동]
[방송/멀티미디어/정보이론]
[전기전자공학]
[통신/네트워킹]
[정보기술(IT)]
[공업일반(기계,재료등)]
[표준/계측/품질]
[기술경영]
통신/네트워킹 >   1. 통신 이란?
  2. 신뢰적 통신
[통신이론]
[선로/전송]
[통신망 일반]
[회선교환(PSTN)]
[무선/이동통신]
[광통신]
[인터넷/데이터통신]
인터넷/데이터통신 >   1. 데이터통신망
  2. 인터넷
  3. 데이터 네트워크 설계
[데이터 단위]
[프로토콜/계층]
[데이터 링크]
[TCP/IP]
[라우팅]
[인터넷 QoS]
[인터넷 관리]
[인터넷 응용]
[인터넷 기타]
[패킷교환(PSN)]
[인터넷 관련 기관]
인터넷 응용 > [NetBIOS]
[DNS]
[가상단말]
[FTP]
[전자메일]
[VoIP]
[웹기술]
[VPN]
[무선인터넷]
[전자상거래]
[개인 컨텐츠]
[인터넷 기타 응용]
웹기술 >   1. 웹 이란?
  2. 하이퍼텍스트
[웹 구성]
[HTTP]
[웹 페이지]
[웹 식별]
[웹 서비스]
[차세대 웹]
[웹기술 기타일반]
웹 페이지 > [마크업 언어]
[DOM,BOM]
[기능 요소]
[웹 디자인]
웹 디자인 >   1. 웹 디자인
  2. 스타일 시트
[CSS]
CSS   1. CSS
  2. CSS 선택자
  3. CSS 속성
  4. CSS 속성값
  5. CSS 박스 모델
  6. block,inline 요소 유형
  7. CSS 색상
  8. CSS 배경
  9. CSS 위치
  10. CSS 정렬
  11. CSS 텍스트
  12. CSS 리스트
  13. CSS @ 규칙
  14. CSS 그림자
  15. CSS 시간 변형
  16. CSS 2차원 변형

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-width
     - border-style   { border-style : 값; }
        . dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden
     - border-color 
        . black, red 등

     - 例)  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 속성

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


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

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


[CSS] 1. CSS 2. CSS 선택자 3. CSS 속성 4. CSS 속성값 5. CSS 박스 모델 6. block,inline 요소 유형 7. CSS 색상 8. CSS 배경 9. CSS 위치 10. CSS 정렬 11. CSS 텍스트 12. CSS 리스트 13. CSS @ 규칙 14. CSS 그림자 15. CSS 시간 변형 16. CSS 2차원 변형
  1.   기술공통
  2.   기초과학
  3.   진동/파동
  4.   방송/멀티미디어/정보이론
  5.   전기전자공학
  6.   통신/네트워킹
        1. 통신 이란?
        2. 신뢰적 통신
    1.   통신이론
    2.   선로/전송
    3.   통신망 일반
    4.   회선교환(PSTN)
    5.   무선/이동통신
    6.   광통신
    7.   인터넷/데이터통신
          1. 데이터통신망
          2. 인터넷
          3. 데이터 네트워크 설계
      1.   데이터 단위
      2.   프로토콜/계층
      3.   데이터 링크
      4.   TCP/IP
      5.   라우팅
      6.   인터넷 QoS
      7.   인터넷 관리
      8.   인터넷 응용
        1.   NetBIOS
        2.   DNS
        3.   가상단말
        4.   FTP
        5.   전자메일
        6.   VoIP
        7.   웹기술
              1. 웹 이란?
              2. 하이퍼텍스트
          1.   웹 구성
          2.   HTTP
          3.   웹 페이지
            1.   마크업 언어
            2.   DOM,BOM
            3.   기능 요소
            4.   웹 디자인
                  1. 웹 디자인
                  2. 스타일 시트
              1.   CSS
                1.   1. CSS
                    2. CSS 선택자
                    3. CSS 속성
                    4. CSS 속성값
                    5. CSS 박스 모델
                    6. block,inline 요소 유형
                    7. CSS 색상
                    8. CSS 배경
                    9. CSS 위치
                    10. CSS 정렬
                    11. CSS 텍스트
                    12. CSS 리스트
                    13. CSS @ 규칙
                    14. CSS 그림자
                    15. CSS 시간 변형
                    16. CSS 2차원 변형
          4.   웹 식별
          5.   웹 서비스
          6.   차세대 웹
          7.   웹기술 기타일반
        8.   VPN
        9.   무선인터넷
        10.   전자상거래
        11.   개인 컨텐츠
        12.   인터넷 기타 응용
      9.   인터넷 기타
      10.   패킷교환(PSN)
      11.   인터넷 관련 기관
  7.   정보기술(IT)
  8.   공업일반(기계,재료등)
  9.   표준/계측/품질
  10.   기술경영

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