J_world

1) display 속성이란?

- 요소의 표시 방법을 지정하는 속성입니다. html 요소들은 기본적으로 블록 레벨 요소(block-level element), 인라인 요소(inline element)의 속성을 가지고 있습니다.

• block : 부모 요소의 가로 폭 전체를 차지합니다.
• inline : 필요한 만큼의 공간만 차지합니다.
• inline-block : 인라인과 같지만 가로폭과 높이폭을 지정할 수 있습니다.
• none : 요소를 숨깁니다.
• flex : 요소를 유연한 박스로 표시합니다.
• grid : 요소를 그리드 컨테이너로 표시합니다.

2) 박스 모델(box model)이란?

- css에서 요소의 크기와 간격을 다루는 레이아웃 개념.

• 콘텐츠(content) : 박스 내부에 위치하는 실제 콘텐츠.
• 패딩(padding) : 콘텐츠와 테두리 사이의 여백.
• 테두리(border) : 콘텐츠와 패딩을 둘러싸고 있는 테두리 선.
• 마진(margin) : 요소와 주변 요소들 사이 간격.

3)  박스 계산 공식