[CSS] CSS 박스 모델 (box model)

✅ CSS 박스 영역

• 바깥 여백 영역 (Margin Area)
• 테두리 영역 (Border Area)
• 안쪽 여백 영역 (Padding Area) 
• 내용 영역 (Content Area) 

 

 

✅ 각 영역을 꾸밀 때 사용하는 속성

• 바깥 여백 : margin 속성
• 테두리 : border 속성
• 안쪽 여백 : padding 속성
• 박스 가로 크기 : width 속성
• 박스 세로 크기 : height 속성
• 박스 크기 기준 : box-sizing 속성
• 박스의 배경 : background 속성

 

✅ 속성 축약 표현 (shorthand)

• 4개 속성 : top, right, bottom, left (시계방향 !)
• 3개 속성 : top, right/left, bottom
• 2개 속성 : top/bottom, right/left
• 1개 속성 : top/right/bottom/left

 

✅ margin : auto;

• 해당 HTML 요소의 왼쪽과 오른쪽 마진을 자동으로 설정.
• 그 결과, 부모 요소의 정중앙에 위치.

 

✅ 선(border, outline) style 속성

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

 

✅ 선(border, outline) width 속성

• px, em, cm
• thin, medium, thick