Live and Learn

▣ 박스 모델(Box model) ※ 그림 자료 출처 : CSS 3D Box Model Hierarchy 위의 그림에서 볼 수 있듯이 CSS의 구성 요소들 대부분이 박스 구조이며, CSS의 속성 중 상당 부분이 박스 구조를 다루는 것과 관련이 있습니다. 그리고 박스의 유형은 블럭(Block), 인라인(Inline), 인라인-블럭(Inline-block)으로 나누어지며, 박스의 유형에 따라 브라우저에서 보이는 양상이 달라집니다. 박스 모델의 세부 구성 요소에는 외부 여백(Margin), 배경 색상(Background-color), 배경 이미지(Background-image), 테두리(Border), 내부 여백(Padding), 내용(Content) 등이 있습니다. 그 중에서 외부 여백, 테두리, 내부 여백..

▣ Block-level & Inline Elements HTML을 구성하는 요소들(Elements) 즉 태그들은 크게 두 가지 종류로 구분됩니다. 하나는 블럭-레벨 요소이고 또 다른 하나는 인라인 요소입니다. 간단하게 설명하자면 브라우저에서 두 개 이상의 요소들이 한 줄로 늘어설 수 없는 경우와 늘어설 수 있는 경우 두 가지입니다. □ 블럭 요소 예시 This 'div' element is a block-level element. Item 1 Item 2 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur veritatis dolores, asperiores molestiae ratione sint consequatur duci..