웹앱과 앱의 레이 아웃 불일치 해결 방법

티스토리 웹앱과 앱에서 레이아웃 불일치 확인

2018년 이후 블로그 활동을 하지 못해 블로그 를 방치 하다 시피 하고 있었는데요
지난 글에도 소개 한것 처럼 오랜동안 업뎃이 되지 않거나 활동이 감지 되지 않을 경우 구글 애드센스 같은 경우 휴면싸이트로 처리 하거나 더 오래 방치 할경우 계정 폐쇄 조치 까지 당할수도 있습니다.
그리고 이런 제재나 불이익은 비단 구글에서 뿐만 아니고 다음의 블로그인 티스토리에서도 나타날수 있습니다.

 

지난글 구글 의 휴면계정 복구 방법 에 대해 기술 한 부분 참고 링크구글 휴면 계정 복구 방법 이번의 경우는 그렇게 오랜 시간이 아니라서 다른 규제를 받지는 않았지만 싸이트에 나타난 변화 때문에 곤욕을 치루게 되었다는 점 입니다.
제 홈페이지의 관리자 보드는 클릭시 슬라이드 로 내려 가도록 한 프레임 속에 위치 하고 있으며 글쓰기에디터도 슬라이드 다운 보드에 나타나기 때문에 슬라이드가 정상 적으로 동작 하도록 만들지 않으면 제 취미 인 html웹 편집을 하지 못하므로 무조건 정상화 할 필요가 있는 것이죠

 

모바일을 교체 하면서 티스토리 앱을 새 모바일로 옮기는 과정에서 자동 업그레이드가 되면서 구 버젼의 앱의 웹html편집 기능이 지원 되지 않아 구버젼의 웹앱을 구현 하기 위해 일단 슬라이드 토글이 작동 되도록 해야 구앱을 사용 할수가 있는 것입니다.
토글이 꼼짝 하지 않을 경우 새버젼 앱으로 재미 없게 작업을 해야 하는데 차라리 안하는게 낮지 싶네여...
이리 저리 검색도 하고 실험을 하며 상당히 곤욕을 치루고 정상 복구를 하게 되었는데요
지난 글에 복구 방법을 기술 하였으므로 지금은 링크로 대신 하겠습니다. 슬라이드 활성화 방법

같은 이유로 이번에 발견 한 것은 웹에서는 정상적인 레이 아웃이 앱으로 보면 아래의 스크린샷 지난 페이지 비교처럼 레이어 위치가 비정상 으로 흩트러져 보인 다는 것 입니다.

하지만 필요는 창작의 어머니 라고 했든가여...ㅎㅡ흐 바로 이 넘 을 찿아 넣으니 바로 해결이 되 버렸네여...

<style>
* {
/*-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;*/
box-sizing:border-box;
}
</style>

여기서 -webkit 이란 크롬과 사파리 브라우져 의 html/css 문서를 랜더링 하는 엔진 이며 --moz는 파이폭스 랜더링 엔진 입니다.이런문자 셋을 접두 속성 이라고 하는 데요 웹 기록 언어를 브라우져 상으로 긁어 오는 옌진 입니다.

이 접두어가 보여야 비로소 그 뒤에 따라 오는 스타일 구문을 읽어서 브라우져에 나타내게 되는 것이죠

box-sizing;border-box 박스의 사이즈를 border를 기준으로 표시 한다는 스타일 입니다.
기본적으로 티스토리앱은 box-sizing:content-box가 기본값이고 티스토리 웹앱의 경우는 border기준 이죠 그러다 보니 앱과 웹의 기준이 달라 이렇게 서로 다른 레이 아웃이 되어 보이는 것입니다.

이렇게 스타일 시트에 선언을 해 주게 되면 전체 테그에 스타일이 적용되며 레이어의 기준을 border를 기준으로 적용 한다는 뜻인데요
기존의 content기준에서 나타 나든 border값에 영향을 받지 않게 되어 레이어 에 주어진 pixel크기를 그대로 구현 하게 되는 것이죠
그래서 전체 크기에 레이어 크기를 더하고 뺀 치수가 그대로 반영 되어 나타 남으로 레이아웃이 용이 해지게 되는 것 입니다.

감사 합니다.