💡 HTML 요소의 배치 방식을 지정하는 CSS 속성들
📌 static: 요소들이 문서 흐름에 따라 배치됩니다. 이 값은 위치 지정 속성(top, right, bottom, left)을 사용하여 위치를 조정할 수 없습니다.
.example {
display: static;
}📌 relative: 요소는 자기 자신을 기준으로 배치됩니다. 다른 요소들은 이 요소 주위를 감싸게 됩니다.
.example {
display: relative;
}📌 absolute: 요소는 가장 가까운 위치 지정 조상 요소를 기준으로 배치됩니다. 만약 위치 지정 조상이 없다면, 초기 컨테이닝 블록을 기준으로 배치됩니다.
.example {
display: absolute;
}📌 fixed: 요소는 뷰포트를 기준으로 배치됩니다. 스크롤에 상관없이 항상 같은 위치에 남습니다.
.example {
display: fixed;
}📌 flex: 요소는 플렉스 컨테이너로 변환되어 플렉스 아이템들을 배치합니다.
.example {
display: flex;
}📌 grid: 요소는 그리드 컨테이너로 변환되어 그리드 아이템들을 배치합니다.
.example {
display: grid;
}👩🏻💻 이러한 속성들을 사용하여 HTML 요소의 배치를 유연하게 제어하고 다양한 레이아웃을 구성할수있다.
응용력을 키워서 이런 속성들을 잘 활용해보자!!!!
