[JS] Container가 화면 양옆으로 안 채워지는 문제 해결


[JS] Container가 화면 양옆으로 안 채워지는 문제 해결

반응형 웹페이지 설정 중 width를 줄이는데 좌측으로만 붙고 우측에서는 보이지 않는 흰색(벽)에 밀릴 때가 있다. 이러면 핸드폰 화면에서 웹 사이트를 켰을 때 아주 이상하게 나온다. 고치지 않으면 사이트 망하는 지름길. 오늘 야근으로 해결했다. 원인: 기존 Container 오로지 하나만으로 설정해서 그랬다. 해결: Container밖에 Container 하나를 더 씌워서(부모 컨테이너를 새로 만들어서) 부모 컨테이너에 width, height 설정,(100% 혹은 특정 px) position:relative 필수. (요소 자기 자신을 기준으로 배치) 반응형으로 @media (max-width: px){ height: ;}도 설정해 준다. 자식 컨테이너(기존 컨테이너)에서는 position:absolute 필수. (부모 요소를 기준으로 배치) width, height, top, left, transfrom: translate(-50%, -50%) 등등은 유연하게 설정하면 된다. 결...


#absolute #container #javascript #position #relative

원문링크 : [JS] Container가 화면 양옆으로 안 채워지는 문제 해결