새로고침시 우측으로 쏠렸다가 돌아오는 현상
본문
혹시 저와 같은 현상을 겪으신 분들 계신가요?
전 아직 div에 익숙치 않아서 테이블로 홈페이지를 만들고 있어요ㅠㅠ
보통 제가 홈페이지 레이아웃을 만드는 방식(중앙정렬)은 다음과 같은데요.
좌측여백 |
홈페이지 영역 1000px |
우측여백 |
위처럼 100%짜리에 3열 테이블을 만들고 가운데 셀 너비를 900~1000px 주고 이 공간에 홈페이지를 구성합니다.
헤더푸터 나눠서 저장한 후 게시판에서 헤더푸터를 각각 불러들이는 좀 고전적인 방법이지요.
근데 이상하게 이런식으로 홈페이지를 만들고 게시판에서 새로고침을 하면 가운데 영역이
우측으로 약 300픽셀정도???가 쏠렸다가 다시 제자리로 돌아옵니다.
이유가 뭘까요.... 아무리 원인이 될만한 내용을 찾아봐도 못찾겠더라구요.
질답게시판 검색하다가 저랑 비슷한 현상 있으신 분의 글을 봤는데... 해결이 안되어 있어서
질문드려봅니다.
답변 3
기본적으로 div의 위치가 있는데 그위치에서 새로운 css가 입혀지면 다시 자리를 잡지요
이 자리를 잡는과정에서의 흔들림은 어쩔 수 없는 현상입니다
프로그램은어려워님만의 문제는 아니구요
다음 네이버 구글 뭐 이런애들도 좀 늦게 뜰때면 화면이 깨진상태로 보여지기도 하고 css를 다 못가져오기도 하고 그렇습니다
댓글 감사합니다... 제가 이 쏠림현상 때문에 한참을 고생했는데요 한가지 공통점을 발견했습니다.
뭐냐면 그누보드 기본 게시판 스킨을 썼을때는 그런 현상이 없는데, 배추베이직 게시판을 썼을 때만 쏠림현상이 발생하더군요. 아무래도 많은 기능과 css들이 들어간 게시판이다보니 그런듯 합니다^^
댓글 많은 참고가 되었어요.
감사드립니다!
테이블로 코딩하고 헤더 푸터로 해버리면 그럴겁니다.
저도 뚜렷한 해결책을 못찾아서 div로 새로 코딩해서 해결했었습니다.
그누5 기본 레이아웃 div + css 참고해서 하시는것도 좋을겁니다.
세부적인 내용들은 테이블로 쓰셔도 되지만 레이아웃 부분만 div로 설정해보세요.
댓글 감사합니다... 제가 이 쏠림현상 때문에 한참을 고생했는데요 한가지 공통점을 발견했습니다.
뭐냐면 그누보드 기본 게시판 스킨을 썼을때는 그런 현상이 없는데, 배추베이직 게시판을 썼을 때만 쏠림현상이 발생하더군요. 아무래도 많은 기능과 css들이 들어간 게시판이다보니 그런듯 합니다^^
그런데 배추님 홈피에선 그런 현상이 없는걸로 보아 작은별님 말씀대로 테이블코딩이 문제인듯 하네요.
전체 wrap이랑 헤더, 센터, 푸터정도만 div로 하고 나머지는 테이블로 하면 괜찮을까요?^^;
네 기초 레이아웃 부분만 하고 안에 내용들은 테이블로 하셔도 됩니다.
그누5 기본 레이아웃 보면 aside(우측여백) 부분이 아마 핵심일겁니다.
이게 푸터로 넘어가지 않고 헤더 파일에 포함이 되거든요.
일부 차이는 있겠지만 테이블로 코딩하면 저 부분이 푸터로 넘어가서 쏠림 현상이 발생하게 됩니다.
오래전 글이지만..다른분들도 보실수도 있다보니..제 경험담을 적어보아요
이건 간단하게 해결했어요
해결방법은 여러가지겠지만... 저의 경우는
흔들렸다가 다시 제자리로 가는 원인을
홈페이지를 만들때 우측에 생기는 스크롤바의 넓이를 고려하지 않고 만들었기때문이라 생각했어요
( 사실 스크롤바의 넓이까지 생각해서 만든다는것은 좀...편집광적이지 않나 싶은.. )
그러다보니..화면을 로딩할경우
내 본문의 내용이 길어서 스크롤이 생겨야 하는 상황이 도래되었을때
내 화면의 길이가 30센티 였다면...처음엔 이 화면이 당연히 보이겠지요.
그러다가 갑자기 3센티의 넓이 스크롤이 생깁니다.
그러면 스크롤 길이만큼 화면이 왼쪽으로 밀리겠지요.
이걸 빠르게 보면 첨에 로딩되었을때는 우측에 자리잡다가
화면이 스크롤바가 생긴만큼 밀려서 다시 자릴잡아요.
이걸 다시 생각하면 우측으로 갔다가 다시 제자리로 온다고 생각이 듭니다.
css
body 부분에
처음부터 스크롤 인식해라! 얍!
하고 overflow-y:scroll; 넣어줘서 해결을 봤어요~
