css를 사용하는 동안 위치와 모양을 잡는 것에만 집중을 하여서 정확하게 속성에 대해서 고려 하는 부분이 미흡 했습니다. 이번 팀 프로젝트를 계기로 모양을 잡고 css속성에 대해서 더 고민하고, 가독성, 유지보수를 신경써서 우선순위을 지정해야 겠다는 생각을 깊게 했습니다.
지금 현재 진행중인 팀 프로젝트에서 메인페이지의 레이아웃을 담당 하고 개발 하는 동안, 계속 기능이 추가 되어 지다보니 내가 구상해 뒀던 레이아웃이 깨지고 버튼위치, 댓글창, 등 구조에 비해서 쉽게 무너졌다.
나는 고민했다 도대체 왜? 레이아웃이 이렇게 쉽게 망가지는가? 이유를 고민하던중 그 원인을 알게 되었고 기록해두려고 한다.
먼저 팀 프로젝트에서 담당한 페이지 이다 이렇게 보면 문제가 없어보이지만 이건 수정후 레이아웃이고 이전 설계했던 구조는 참담 했다.
나는 단순하게 .container 의 위치를 움직이겠다는 생각으로 position 속성의 relative, absolute를 남발 했다는 것이다.
하지만 이건 큰 실수였다. 이렇게 포지션 효과를 남발하면 레이아웃이 깨지고 영역을 확보하기 위하여 스크롤이 늘어나고 크기와 높이에도 영향을 받고 footer 까지 영향이 있다는 것이다.
나는 이러한 속성들을 수정하기 위하여 코드를 수정하였고 감을 익혔다.
● margin: 0 auto; 를 사용하면 가운데 정렬에 용의 하다.
● position :relative 속성을 사용하면 다른 css속성과 사용할때 어떤 결과를 얻는지 고려 해여하며 margin는 주로 요소사이의 간격을 조절하는데 사용된다.
#move_button {
margin: 0 auto;
margin-top: 10px;
margin-left;
}
ID를 가진 요소는 위에서 10px 왼쪽에서 20px의 여백을 가지며 수평으로 가운데 정렬 됩니다.
GPT의 답변
position: relative는 요소를 일반 흐름에서 유지하면서 top, right, bottom, left 속성을 사용하여 상대적인 이동을 지정할 수 있습니다.
position 속성은 필요한 경우에만 사용해야하며, 지나치게 사용하면 레이아웃 문제를 일으킬 수 있습니다.
relative 속성:
relative는 주로 position: relative와 함께 사용됩니다. 이것은 요소를 일반 흐름에서 유지하면서 상대적인 위치 이동을 제어하는 데 사용됩니다.
relative 속성을 "지나치게 큰 수"와 함께 사용하면 레이아웃이 꺠질 수 있습니다. 예를 들어, top: 1000px과 같이 큰 값을 사용하면 요소가 다른 요소와 겹칠 수 있고, 레이아웃이 깨질 수 있습니다.
요소의 레이아웃을 제어하는 데 position 및 relative를 사용하는 것은 필요한 경우에만 사용하는 것이 좋습니다. 이러한 속성을 남용하면 유지보수가 어려워지고 예상치 못한 결과를 초래할 수 있습니다. 레이아웃을 제어하기 위해 먼저 기본적인 CSS 레이아웃 기술을 사용하고, position 및 relative와 같은 속성은 필요한 경우에만 사용하는 것이 좋습니다. 그리고 이런 경우에도 최대한 신중하게 사용해야 합니다.
