mino28 님의 블로그

1. positionposition은 CSS에서 요소의 위치를 제어하는 속성으로, 요소가 문서 내에서 어디에, 어떻게 배치될지를 결정하는 데 사용된다. 기본값인 static은 일반적인 문서 흐름에 따라 배치되고, relative는 자신의 원래 위치를 기준으로 이동할 수 있으며, absolute는 가장 가까운 위치 지정 부모 요소를 기준으로 배치된다. fixed는 브라우저 화면을 기준으로 고정되어 스크롤해도 위치가 변하지 않고, sticky는 일반 흐름을 따르다가 특정 위치에서 고정되는 하이브리드 속성이다. top, right, bottom, left같은 좌표 속성과 함께 사용되어, 요소를 정밀하게 배치하거나 겹치게 만들 수 있는 중요한 레이아웃 도구이다. 2. position의 종류1. relativer..

1. 박스 모델박스 모델(Box Model)은 HTML 요소가 웹 페이지에 표시될 때의 기본적인 크기와 여백 구조를 설명하는 개념으로, 웹 레이아웃을 구성할 때 매우 중요하다. 하나의 요소는 콘텐츠 영역(content)을 중심으로, 그 바깥에 패딩(padding) → 테두리(border) → 마진(margin) 순으로 감싸져 있으며, 이들이 모두 합쳐져 요소의 실제 화면 상 크기를 결정한다. 예를 들어, width: 100px인 요소에 padding: 10px, border: 1px solid, margin: 20px을 설정하면, 요소는 총 100px 보다 더 넓은 공간을 차지하게 된다. 이 계산 방식을 제어하기 위해 box-sizing 속성을 사용하며, border-box를 설정하면 width 안에 ..