반응형 박스 모델1 [CSS] 레이아웃을 구성하는 CSS 박스 모델 (1) Preface 이번 장에선 기본적인 박스 모델을 만들어보고, 지난 장에서 언급했던 마진과 패딩에 대해 다시 한 번 자세히 공부했다. 처음 마진과 패딩의 정의를 봤을 땐 솔직히 잘 이해가 되지 않았었는데, 직접 두 속성을 코드에 적용해보며 비교하자 두 개념의 차이점을 확실히 알 수 있었다. 1. CSS와 박스 모델 - 블록 레벨 요소: 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것 1) 해당 요소의 너비가 100%이다. 2) 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. - 인라인 레벨 요소: 콘텐츠만큼만 영역을 차지하는 것 1) 나머지 공간에 다른 요소가 올 수 있다. - 박스 모델 요소: 박스 형태인 요소 - 박스 모델의 구성 1) 콘텐츠 영역 2) 패딩 3) 테두리 4) 마진 etc. -.. 2022. 7. 26. 이전 1 다음