無제

🟢 Position 속성 요소가 문서 안에서 어떻게 위치할지를 정의. 🔹 position 종류와 특징 속성값설명top/right/bottom/left 사용문서 흐름 영향활용 예시static일반 문서 흐름대로 배치 (기본값)❌ 무시됨일반대부분 초기 상태relative원래 자리 기준으로 이동 가능✅ 상대 이동❌ 자리 차지 유지tooltip 기준, 미세 위치 조정absolute가장 가까운 위치 지정 부모 기준 배치✅ 위치 지정✅ 부모 기준으로 독립dropdown, modal, 카드 배치fixed뷰포트 기준 독립 배치, 스크롤 영향 없음✅ 위치 지정✅ 독립sticky header, 스크롤 버튼sticky스크롤 시 기준 위치까지 따라가다 고정✅ top 등 필요❌ 부모 내에서헤더 고정, 테이블 헤더 🔹 p..

🟢  float요소를 왼쪽 또는 오른쪽으로 밀어내고, 다른 요소들이 그 주변을 흐르게 하는 속성. 🔹 floatselector { float: left | right | none | inline-start | inline-end;}left: 요소를 왼쪽으로 이동.right: 요소를 오른쪽으로 이동.none: 요소를 띄우지 않는다. (기본값) inline-start: 글쓰기 방향 기준 시작 쪽. inline-end: 글쓰기 방향 기준 끝 쪽. ⚠️ float 부작용 ⚠️ 1️⃣ 부모 요소 높이가 사라짐 (collapse) 자식 요소에 float를 주면 부모 요소는 자식 요소를 일반 흐름에서 제외된 것처럼 인식한다. 2️⃣ 레이아웃 깨짐 float 요소가 예상과 다르게 배치된다.다음 요소가 floa..

🟢   display웹 페이지의 모든 요소가 화면에서 어떻게 보이고, 배치될지 결정하는 핵심 속성. 🎯 주요 속성 4가지 🎯 🔹  block: 항상 새로운 줄에서 시작하며, 한 줄 전체 차지 후 다음 요소는 자동으로 아래 줄로 배치되는 요소.예: , , , , 🔹 inline: 새로운 줄을 차지하지 않고 텍스트처럼 흐르며, 크기 지정 없이 내용만큼만 공간을 사용하는 요소.예: , , , 주의: width/height 적용 불가, 좌우 여백(margin/padding)은 적용 가능. 🔹 inline-block: inline처럼 한 줄에 나란히 배치되면서, block처럼 크기(width, height)를 자유롭게 조절할 수 있는 요소. 🔹 none: 요소를 화면에서 완전히 제거. ..