AI 요약관련 정보

• static은 모든 HTML 요소의 기본값으로, 문서의 일반적인 흐름에 따라 배치됩니다. 📄
• 웹 페이지 요소의 약 90%가 static이며, Flexbox나 Grid는 static 요소의 레이아웃을 구성하는 데 사용됩니다. 🌐
• static 요소는 '위치 지정된 요소'가 아니므로 top, left, right, bottom, z-index 등의 속성이 적용되지 않습니다. 🚫
• fixed는 뷰포트(화면)를 기준으로 항상 같은 위치에 고정되어 스크롤해도 움직이지 않습니다. ⚓
• 내비게이션 바, 헤더, 모달 등 화면에 고정되어야 하는 요소에 fixed가 활용됩니다. 🖼️
• fixed 요소는 문서의 일반적인 흐름에서 완전히 벗어나며, 다른 요소의 배치에 영향을 받지 않습니다. 🚀
• top, left, right, bottom 속성을 사용하여 뷰포트 가장자리로부터의 정확한 위치를 지정할 수 있습니다. 📍
• 요소를 화면 중앙에 완벽하게 배치하려면 top-1/2, left-1/2와 함께 transform: translate(-50%, -50%)를 사용합니다. 🎯
• fixed 요소는 DOM 내의 중첩 여부와 관계없이 항상 뷰포트를 기준으로 고정됩니다. 🌳