| CMS | Rhymix 2.x |
|---|
box-sizing: border-box;
위 CSS 가
* {
box-sizing: border-box;
}
모든 곳에 적용되도록 되어있습니다. 아마 레이아웃이겠죠.
그런데 라이믹스 코어에서 제공하는 각종 설정값의 input의 값은 box-sizing: content-box; 를 전제로 해서 설계된 듯 합니다.
* {
box-sizing: border-box;
}
가 들어간 레이아웃에서 라이믹스의 코어에서 만들어진 각종 입력값들은 세로에서 많이 작아진 형태로 보여지게 됩니다.
어느 것을 기준으로 하는지 더 합리적인 건지는 선택적인 문제 일 수 있으나
기준을 서로 다르게 생각하고 값을 정했기 때문에 양쪽 중 한곳이 예상한 수치와 다르게 보일텐데요..
이런 경우 어떻게 해야 하는 건가요?
*스케치북 보드스킨의 경우는 box-sizing: border-box; 기준으로 되어 있어서 레이아웃과 일치해서 틀어짐이 없습니다.
역발상으로 XE,라이믹스 컨텐츠 영역만 제외하게 할 수 있지 않을까요?
* {
box-sizing: border-box;
}
저기서 XE,라이믹스 컨텐츠 영역 클래스는 제외 라는 조건...
차라리 레이아웃에서 컨텐츠여역을 감싸는 class를 제외하는게 더 좋은 방법일 수도 있겠네요.
- 쉽지 않네요. 뭔가 정확한 문법이 필요한지..
* {
box-sizing: border-box;
}
.content-area * {
box-sizing: initial;
}
이런식으로 처리하시면 되겠네용
네. 그것도 가능하긴 합니다.
https://github.com/wincomi/xe-simplestrap/blob/master/layouts/simplestrap/css/simplestrap.css#L301-L334
Simplestrap 레이아웃이 실제로 box-sizing 등 레이아웃의 CSS로 인해 충돌이 생기는 부분을 일일히 재적용했습니다.
다만 이런식으로 충돌이 생기는 부분을 전부 제외처리하려면 많이 귀찮기는 하겠죠.
잘 되네요. 제가 처음에 시도한 것이 안된 이유는 class 범위가 잘못되어서 그랬던거 같습니다.
*:not(.content-area) {
box-sizing: border-box;
}제가 시도한 건 이건데 이것도 잘 되는 듯 합니다.
제가 시도한 것은 안되는거네요 ㅋ
*:not(.content-area *) {
box-sizing: border-box;
}
요렇게 하니 됩니다. 요게 맞는건지 ㅋ
중요한 내용이네요. 저는 스케치북5 모바일 뷰에서 설정으로 들어가면 거의 칸이 심하게 틀어지는데
대부분 설정은 pc에서 하다 보니 신경 쓰지 않고 지냈습니다.
이 부분도 위의 방법으로 해결이 가능할까요?
PC에서도 마찬가지인데 조금 덜하게 느끼셨던 눈치 못채셨던 것 같네요. 정상적인 모습을 보지 못했더라면 아마 PC에서 모습이 원래 그런줄 아셨을 듯... 레이아웃 문제이기 때문에 PC도 같은 문제가 있을 것이고 지금 문제는 제가 말씀 드린 그 문제가 맞습니다.
게시판 설정 뿐 아니라 레이아웃 제작자분이 만든 자료가 아닌 다른 자료에서 굉장히 많이 광범위하게 틀어지고 있을 겁니다.
샘플로 하나 보여드리면
원래는 이렇게 정상적인 입력이 지금 아마 세로가 유난히 좁게 보이는 형태로 출력될 겁니다.
전 영역에 영향을 받아 이런 현상이 벌어지고 있습니다.
그리고 솔직히 아직 위에 정보로는 어디를 어떻게 고쳐야할지는 모르겠어요. 멤버 css 파일 하나 열어서
하단에 코드 넣었더니 수정 안되길래 그냥 코드 지우고 다시 저장하고 나왔습니다. 나중에 천천히 고쳐보려구요.
라이믹스 레이아웃은 컨텐츠를 이렇게 처리합니다.
{$content}
이것을 감싸고 있는 정확한 DIV요소를 찾으셔야 합니다 DIV가 아닐수 있지만 99% 확율로 DIV 단위 입니다.
그런데 둘러싼 곳에 다른 좌,우측을 레이아웃까지 포함한 단위를 함께 묶고 있다면 지금 하려는 시도가 의미가 없어질 수 있습니다. 이런 경우는 DIV를 정확하게 추가해서 감싸 주세요.
<div>
{$content}
</div>
정확하게 감싸진게 있다면 추가할 필요 없이 해당 div 에 class를 설명대로 이용하거나 혹은 class를 새롭게 추가할 수 있습니다.
<div class="content-area">
{$content}
</div>
그 다음 레이아웃의 css 파일 중
* {
box-sizing: border-box;
}
이렇게 전역에 지정된 것을 아래와 같이 고치시면 됩니다.
*:not(.content-area *) {
box-sizing: border-box;
}
** 주의 **
이렇게 해서 레이아웃과 함께 배포된 스킨에서 틀어짐이 생긴다면 해당 스킨의 css에는 box-sizing: border-box; 를 다시 추가해줘야 하는 일이 벌어질 수 있습니다. (레이아웃에서 전역으로 지정하고 스킨에서 생략했을 가능성도 있으니까요.)
아니요. 레이아웃에서 수정을 해주셔야 전역에 지정되는게 어느정도 해제가 된다는 것입니다.
레이아웃 수정이 힘들다면 지금 문제가 되는 모든 곳의 스킨에 css를 찾아서 거기에 맞는 값으로 지정해 줘야 합니다.
수정해야 할 대부분이 box-sizing: content-box !important; 혹은 다른게 들어가야 할지도요.
아니면 위에 소개된
https://github.com/wincomi/xe-simplestrap/blob/master/layouts/simplestrap/css/simplestrap.css#L301-L334
위 링크처럼 레이아웃 css에 XE에 등장할만한 것들을 처리해주는 방법도 있지만.... 저건 저 레이아웃 제작자분께서 하신 방식이라 부작용이나 처리가 안되는 경우나 혹은 시간이 지남에 따라 변경점이 있을 수도...
레이아웃의 모든 태그에 .foo 라는 클래스를 추가하고, 박스사이징=보더박스 스타일을 .foo 에만 적용하면...
레이아웃은 원하는대로 보더박스를 기준으로 계산하고,
레이아웃 이외의 요소(게시판, 위젯, 코어요소)는 컨텐츠박스를 기준으로 계산하겠지요.