[CSS] Box Model 📦

공식문서 : https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

CSS 기본 박스 모델 입문 - CSS: Cascading Style Sheets | MDN

 

 

📌 개념

모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부른다.

박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분한다.

1.  내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분.
2.  패딩(padding) : 내용과 테두리 사이의 간격. 패딩은 눈에 보이지 않음.
3.  테두리(border) : 내용와 패딩 주변을 감싸는 테두리.
4.  마진(margin) : 테두리와 이웃하는 요소 사이의 간격. 마진은 눈에 보이지 않음.

출처 : TCPSHOOL.com

 

 

📌 패딩(padding)

1. padding-top : top;
2. padding-right : right;
3. padding-bottom : bottom;
4. padding-left : left;
5. 축약표현
   • { padding: top, right, bottom, left; }
   • { padding: top, right와 left, bottom; }
   • { padding: top, right와 left, bottom; }
   • { padding: top과 bottom, right와 left; }
   • { padding: all; }

 

 

📌 테두리(border)

border-style 속성

• dotted : 테두리를 점선으로 설정함.
• dashed : 테두리를 약간 긴 점선으로 설정함.
• solid : 테두리를 실선으로 설정함.
• double : 테두리를 이중 실선으로 설정함.
• groove : 테두리를 3차원인 입체적인 선으로 설정하며, border-color 속성값에 영향을 받음.
• ridge : 테두리를 3차원인 능선효과가 있는 선으로 설정하며, border-color 속성값에 영향을 받음.
• inset : 테두리를 3차원인 내지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받음.
• outset : 테두리를 3차원인 외지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받음.
• none : 테두리를 없앰.
• hidden : 테두리가 존재하기는 하지만 표현되지는 않음.

border-width 속성

• { border-width: px or em or cm; }
• { border-width: thin or medium or thick; }

border-color 속성

• { border-color: rgb(-,-,-) or colorname or #------ or transparent; }

 

 

📌 마진(margin)

1.  margin-top
2.  margin-right
3.  margin-bottom
4.  margin-left

margin 속성값에 auto를 사용하는 이유

margin 속성값을 auto로 설정하면, 웹 브라우저가 수평 방향 마진(margin) 값을 자동으로 설정한다.

즉, 해당 HTML 요소의 왼쪽과 오른쪽 마진을 자동으로 설정하게 된다.

그 결과 해당 요소는 그 요소를 포함하고 있는 부모(parent) 요소의 정중앙에 위치하게 된다.