혹시 이런 상태인데 그냥 두고 계신가요???
원래 이렇게 보여야 합니다.
지금 제가 말씀 드린 오류가 사이트 내 전 영역에서 발생하고 있다면
레이아웃의 CSS를 뒤져보세요.
* {
box-sizing: border-box;
}
이런 것이 있을 겁니다.
꽤 많은 분들의 사이트에서 이런 상황일 것 같아 아래 질문글이 있지만 어떤 의미인지 쉽게 제목을 달아서 글을 써 봤습니다. 레이아웃 자체가 워낙 많은 분들이 이용하고 있는 레이아웃들이라...
https://xetown.com/questions/1553227
위 글의 댓글에 해법이 있습니다.
https://rxtip.kr/rx_tip/4932
요건 제가 상황을 조금 정리해서 작성한 글 입니다.
현대의 대부분의 css 프레임워크에서 border-box로 전역 설정하죠.
이건 저런 것들의 문제라기보다는 거의 표준화 되었다고 봐도 될 방식입니다.
코어 게시판 스킨이나 xe, rhymix의 게시판 글 쓰기 폼 등의 확장변수 입력 폼이 사용된 곳에서 주로 문제가 발생하죠.
https://github.com/rhymix/rhymix/blob/f0085f816ef91bab0fb31a2a730cd23e768363fc/modules/admin/tpl/css/admin.css#L421
https://github.com/rhymix/rhymix/blob/f0085f816ef91bab0fb31a2a730cd23e768363fc/modules/board/skins/xedition/board.default.css#L32
https://github.com/rhymix/rhymix/blob/f0085f816ef91bab0fb31a2a730cd23e768363fc/modules/board/skins/xedition/board.default.css#L372
뭐 이런 곳곳에 불필요한 height 속성을 제거 할 필요는 있습니다.
물론 다국어 입력 UI 같은 게 같이 틀어지기 때문에 같이 고쳐야 할 것이 많죠.
XE에서는 건드리지 않았었지만 CSS Framework 사용 유혹이 계속 늘어나고 있고, border-box 설정이 편리하고 불필요한 계산(`calc()`)이 줄기 때문에 개선해나가는 것도 좋을 것 같습니다.
네. 표준화되서 서로 다른 부분이 발견되지 않는 상황이 오면 이런 문제 자체가 없어지겠죠.
border-box 기준으로 하지 않은 자료들에서는 가로,세로 다 예상과 다른 모습으로 출력되기 때문에... 어떤 것을 표준으로 정하냐의 문제는 어려운 문제이기도 하고 각자 css에 적용되는 수준으로 지정하는게 답일 것 같습니다.
저렇게 전역으로 설정하시는 분들은 대체로 레이아웃만 판매하는 것이 아니라 게시판과 회원스킨도 묶어서 판매하시죠... 세트로 사용한다고 가정하고 만드실 테고요. 그러다 보니 기본 스킨과 조합했을 때 엉뚱한 부작용이 발생하는 것 같습니다.
오래된 버전의 부트스트랩 스타일을 아직 활용하고 있는 기본 스킨에게도 20~30%의 과실비율은 인정될 것 같습니다.