반응형

프론트엔드레이아웃 2

position – static, relative, absolute, fixed, sticky 차이 쉽게 이해하기

CSS에서 레이아웃을 잡을 때 가장 많이 쓰는 속성이 바로 position입니다.하지만 static, relative, absolute, fixed, sticky는처음에는 헷갈릴 수밖에 없는 개념입니다.이번 포스팅에서는 각 position의 의미, 차이점, 예제를 통해초보자도 확실히 이해할 수 있도록 정리해드리겠습니다.✅ position이란?HTML 요소의 위치를 어떻게 배치할지를 지정하는 속성입니다.다른 요소들과의 관계, 부모 요소 기준, 스크롤 여부 등에서레이아웃에 큰 영향을 미칩니다.🔹 1. static – 기본 위치 (기본값) div { position: static;}아무 position도 지정하지 않으면 기본이 statictop, left, right, bottom 속성이 무시됨문서 흐름에..

HTML, CSS 2026.01.09

display: grid 기초 완전정복 – 2차원 레이아웃의 문을 열다

지금까지 Flexbox로 멋진 정렬과 반응형 레이아웃을 만들었다면,이제는 2차원(행 + 열) 레이아웃을 더 강력하게 다룰 수 있는CSS Grid의 차례입니다. Flex가 “흐름 기반”이라면,Grid는 “정해진 틀 기반”입니다.그만큼 레이아웃 설계가 더 직관적이고 강력해져요! ✅ display: grid란?.container { display: grid;} 이 한 줄로 Grid 컨테이너가 만들어집니다.그리고 이 안에 있는 자식 요소들은 **행(row)과 열(column)**을 기준으로 정렬됩니다. 🧩 기본 속성 정리속성설명grid-template-columns열(column) 개수 및 너비 설정grid-template-rows행(row) 개수 및 높이 설정gap셀 사이 간격 (row + column 동..

HTML, CSS 2025.06.05
반응형