🌱 기초 프론트엔드
CSS에서 static이란?
쉽게 이해하기
책을 읽을 때 글자들이 위에서 아래로, 왼쪽에서 오른쪽으로 자연스럽게 흐르는 것처럼, static은 요소들이 HTML 순서대로 자연스럽게 배치되는 거예요.
핵심 정리
모든 요소의 기본 배치 방식으로, 특별한 위치 지정이 없는 상태예요.
자세히 알아보기
position: static은 CSS position 속성의 기본값이에요. 따로 position을 지정하지 않으면 모든 요소는 자동으로 static이에요. static 상태에서는 요소가 HTML 문서 흐름에 따라 순서대로 배치되고, top, right, bottom, left 같은 위치 속성이 아예 작동하지 않아요.
static은 '위치를 특별히 지정하지 않는다'는 의미예요. 요소들이 블록이냐 인라인이냐에 따라 자동으로 쌓이거나 옆으로 배치돼요. div는 위에서 아래로, span은 왼쪽에서 오른쪽으로 이어지는 식이에요. 이게 웹 페이지의 가장 기본적인 레이아웃 방식이에요.
실무에서는 명시적으로 position: static;을 쓰는 경우는 거의 없어요. 대신 다른 position 값(relative, absolute 등)을 해제하고 싶을 때 사용해요. 예를 들어 JavaScript로 동적으로 요소를 fixed로 바꿨다가 다시 원래대로 돌리고 싶다면 position: static;으로 리셋하면 돼요.
static을 이해하는 게 중요한 이유는, 다른 position 값들(relative, absolute, fixed, sticky)이 모두 static의 기본 동작을 바꾸는 거라는 걸 알아야 하기 때문이에요. 'position을 쓴다'는 건 곧 '기본 흐름에서 벗어난다'는 의미예요. 그래서 레이아웃을 잘 만들려면 언제 기본 흐름을 유지하고 언제 벗어날지 판단하는 게 중요해요.