TIL / B-1조 / I - 5 Project

문제

 

와이어 프레임 단계에서 CSS 파일이 여러개 생기더라도 혼동이 생기지 않도록 Max width값을 정해놓았다.

width: 95%;
max-width: 1600px;

 

그런데 body 값을 위처럼 디폴트 값으로 정해놓아도

내 데스크탑 화면 기본 100배율의 화면에서는 아래의 사진처럼 오른쪽 구석이 비워지는 현상이 나타났다. 

현 css에서 body에 영향을 줄 수 있는 설정은 부트스트랩 스크립트와 header의 width 1600px밖에 없다.

그래서 결국 이후 컨테이너 div의 작업을 전부 width: 100%로 작업했더니

나중엔 background image가 반응형에 의해 줄어들어버려 보기 싫어지는 현상이 발생하였다.

 

그리고 나머지 범위 컨테이너를 전부 width 를 100%로 작업했다보니

이제 width 1800px이나 1900px으로 시도해보아도

결과적으로 전체창에서 한쪽이 padding을 준 것 처럼 비워졌다.

 

---

해결

 

결국 body의 width: 100%를 지우고 나서

max-width: 1800;

width: 95%를 넣었더니 적용이 되었다..

옆에 padding이 들어가듯이 뜨던 것이 사라졌다..

왜 해결되었는지 모르겠어서 더 화난다ㅎㅎ

 

body {

   width: 100%

}

 

이걸 넣어서 그랬던걸까... 근데 안넣었을 때도 그랬는데.. 무엇이 문제였을까

 

---

 

3/18 수정..

헤더도 가능할 줄 알고 똑같이 수정했는데 또 빈 공간이 생겼다...

부트스트랩이 문제인 줄 알고 부트스트랩 스크립트를 지워보았는데

또 사방에 5px정도 padding이 들어갔다.. 부트스트랩을 내 인생에서 지워버려야겠다.

 

 

 

 

+ 양기철 매니저님께