choco's story

박스 모델 (Box-Model) 이란?브라우저가 요소를 렌더링할 때, 각각의 요소는 보통 사각형 형태로 영역을 차지합니다. 이 영역을 "박스"라고 합니다.CSS는 이러한 박스들의 크기, 위치, 속성(색, 배경, 테두리 등)을 결정합니다.아래는 박스가 가지는 영역 4가지와, 해당 영역의 크기를 정의하는 속성입니다.콘텐츠 영역 : width, height안쪽 여백 : padding경계선 (테두리) : border-width바깥쪽 여백 : margin이미지로 정리하면 다음과 같습니다.box-model 요소 확인 예시 요소의 콘텐츠 - box 하나씩 살펴보도록 하겠습니다.우선 border입니다. 저번 글에서 배웠던 것인데, 5px 두께의 실선 테두리를 추가하였습니다.이 border를 기준으로 안쪽..

블록 레벨 요소 vs 인라인 요소블록 레벨 요소 : 자신이 속한 영역의 너비를 모두 차지하여 블록 형성ex) div, p, h1 등...인라인 요소 : 자신에게 필요한 만큼의 공간만 차지ex) span, a 등...블록 레벨 요소 vs 인라인 요소 비교 예시 블록 레벨 요소 영역 인라인 요소 영역 블록 레벨 요소인 h1은 텍스트가 끝나도 해당 영역 전체를 차지합니다.인라인 요소인 span은 h2 중 일부를 나타내고, 직접 확인해보면 해당 span이 차지하는 "인라인" 텍스트 영역만 차지합니다.display 속성display 속성이란?: 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의하는 속성✔️ 블록 레벨 요소인 div를 인라인으로 처리할 때 (블록 -> 인라인)div{ di..