이젠 의미 없는 내용이라 닫아둡니다..
본론으로...
여기 저기서 작은 해상도에서 불편하다는 문제점이 들려 옵니다. :)
지금의 whiteBoard의 구조는 왼쪽 마진으로 2% 라는 가변값을 가지고 있긴 하지만, 깔짝깔짝 움직이는 수준이고, 거의 고정된 틀이나 다름없습니다. 처음부터 가운데 정렬하지 않았던 이유는, 좌측에 배경 이미지를 살리려고 했기 때문입니다. 때문에 좌측으로 불필요한 여백이 많이 생겨 버렸죠. 물론 오른쪽에도 좌측 배경이미지가 차지하는 만큼의 영역을 만들어서, 가운데 정렬하면 가운데 정렬이야 되겠지만, 그렇다고 좌측 여백이 없어지는것도 아니니, 어짜피 1024px 해상도에서는 별 의미가 없는 작업이라 생각했었습니다.
그러다 보니 좌측에 바짝 붙은 스타일도 아니고, 크기에 따라 가운데 정렬하는 것도 아닌 어정쩡한 레이아웃이 되고 만 겁니다. :) 아.. 지금에서야 느끼고 있습니다...;;; 1024px 보다도 작은 브라우징 환경도 많을 텐데, 이런 어정쩡한 레이아웃은.... 아.. 불편하겠습니다...;;;
암튼, 어제 탱쟈님 알려드리면서, 생각한 음수 마진을 이용하면, "오호라~ 어쩌면 배경을 잘라내면서 가운데 정렬이 가능하겠구나~!" 라는 생각이 번뜩입니다~.
그래서... 오늘, 꼼수를 부려 보기로 했습니다. :) 새로 다 들어 업기는 싫고, 꼼지락 꼼지락 깨작거려 보는 겁니다. 그러니까 그 꼼수의 핵심만 간략히 말씀드리면..... 전체 wrap 에 margin: 0 auto; 를 줘서 가운데 정렬하고, 그 아래 영역들에게 margin-left: -150px; 를 줘서 화면이 작아지면 밖으로 밀어내는 거죠. 성공하면 버젼 1.5 쯤으로 해서 업데이트 하는 겁니다~ 깔깔....
결과는 이렇습니다.
가로 해상도1024px 에선 왼쪽 배경이 잘려나가면서 이렇게 보이고,
제 모니터의 해상도인 1680px 에선 배경이 살아나면서 가운데로 정렬합니다. :)
아 무척이나 고무적인 결과 입니다. 하지만 그분이 발목을 잡습니다.
비교를 위해 정상적인 결과인 IE8 beta 의 캡쳐 사진을 붙여보면..
이.. 이게 뭘까요..=_=' 전혀 가운데 정렬도 아닌데다가, content 의 배경이 싹뚝 잘려 흰색으로 나옵니다... 역시 IE6.... 안드로메다의 브라우져 IE6... 아.. 하긴 음수 마진을 가진 녀석을 그것도 float도 막 지정되 있고, 어떤건 position:relative도 가지고 있는데.. 그걸 auto로 가운데 정렬하라니요... 아무래도 IE6 에겐 너무 어려운 주문이었던 겁니다. 더블 마진 버그나 뭐 이것 저것 생각해 보고 있는데..어버버버버버... 다른 브라우져에서 문제가 발생하면 쉽게 찾아 낼 방법이라도 있지만, IE6 에서 잘못 되면, 일일히 하나하나 바꿔가며 F5를 연타하는 수말고는 모르겠습니다.. 어버버버버... 아~ 이러지도 저러지도 못하다... 결국 ㅈㅈ 인 걸까요? :(
혹시나 해서 가운데 정렬을 left: 50% 하고 크기의 반 나눠서 마진으로 빼주는 방법으로 해 봤습니다만.. 역시나 ㅈㅈ 입니다. 좀 더 가운데로 오긴 하는데.. 마우스로 본문 영역을 클릭하면 전체가 다 선택되는 괴현상이 발견 되었습니다. 깔깔...
아.. 1.5는 역시 없던 걸로 해야겠습니다. 이쯤에서 이 스킨도 버려지는 거죠. :)
재미없는 푸념 끝...
Comments
Go to write form아이구야~ 사이즈 작은 버전으로 바꾸기가 힘든거군여~
사실 본문에 말들이 무슨 뜻인지는 잘 못알아 듣겠지만~
대충 제가 이해해본 걸 써보면...
뭐랄까~ 가운데 정렬....이게 발목을 잡는거지요?
해상도에 따라 자동으로 가운데 정렬을 하고 싶은데 브라우저마다 잘 표시가 안된다~
이런 얘기 아닌가여? 아니면 죄송 ㄱ-;; 제가 웹쪽으로 잘 모르다보니 -0-ㅋ;
암튼 뭐 전 지금 hi8ar님께서 가르쳐주신 방법대로 잘 사용하고 있긴 하지만~
편법으로 왼쪽으로 땡겨서 쓰는거다 보니 hi8ar님의 처음의도 했던 것 과는 다르게 사용하고 있는게 되는군여~ ㅋㅋ 고치기 Reply
아 댓글 달고 다시 읽어보니~
IE 6만 말썽인건가여?
다른 브라우저에서는 제대로 나온다면.....
흠~ 적어도 반쯤은 성공한게 아닐까여??
그나저나....방금전에 저 방법대로 수정해놓으셨었나여?
제 해상도에서 hi8ar님 블로그가 한 화면에 다 들어왔었는데...
좀 전에 새로고침 해보니 다시 안들어오네요 ㅎㅎ 고치기
특별한 경우가 아닌 이상, 테스트는 제 핵융합연구소에서만 합니다. 한 화면 안에 들어 왔다면... 그것은 아마... 귀신이 그랬을 겁니다. 아~ 무섭군요~...;;;;
아무튼 제 블로그에만 적용할 스킨이었다면, IE6 지긋이 무시해 줬을 거에요. 하지만 공개한 스킨이니까...
비록 1.5는 실패했지만, 2.0으로 가면 되는거 아니겠습니까? 냐하함~ 고치기
ㅋㅋㅋ 그렇네요~
1.5는 포기하고 2.0으로 고고!! ㅋㅋㅋ
참 긍정적인 분이시군여 ㅋㅋㅋㅋㅋ 고치기 Reply
마인드는 항상 긍정적인데.. 세상이 절 가만 두질 않습니다.. ;p 고치기
저도 이 문제 때문에 지금 고민중입니다. ^ ^;
제 모니터 가로 해상도도 1680인데요.
블로그를 저만 보기 위해 쓰는 거라면 아무런 문제가 없습니다만, 독자들도 고려해야 하기 때문에 일종의 딜레마랄까... 그런게 생기네요.
1024에서도 가로 스크롤바가 나타나지 않도록, 그러니 오른쪽 사이드바가 잘리지 않도록 하려니 제가 이상적으로 생각하는 사이드바의 적극적인 활용이 곤란해지고, 하이바(hi8bar 이렇게 발음하는게 맞나요?)님께서 생각하셨던 전체로서의 스킨 디자인에도 손실이 생기고...
그렇다고 그대로 두자니 1024로 브라우징하시는, 제 블로그의 독자들께 최소한의 배려가 아닌 것 같고...
1024에서 가로 스크롤이 나오지 않게 하려고 탱쟈님께 조언해주신 방법을 사용했는데, 여전히 사이드바(이것도 300에서 50을 줄여서 지금은 250으로 했는데요) 일부가 오른쪽으로 잘려져보이네요.
현재 생각으론, 절충(?)해서 가로 1280에 맞춰서 폭을 조정해야 할까 싶습니다.. 고치기 Reply
일단 스킨 디자인은 어떻게 손실하셔도 괜찮습니다.
계산해 볼까요?.
본문이 620px, 사이드바가 300px, 양쪽 여백을 100px 씩 생각하면 1120px 니까.. 음.. 넘 크군요. 양쪽 여백을 50 정도만 주면 1020px.. 아 이상적이에요. 근데 좀 다닥다닥 붙어 있겠어요.
결론은 본문을 줄이거나 사이드바를 줄이거나 해야겠어요.. ^^;;
아 복잡하군요. 오늘 좀 늦게 들어와서.. 정신이 없습니다. 제가 지금 뭐라고 적고 있는지도 잘 모르겠어요.. 깔깔.. 암튼, 공개된 whiteBoard 사이즈일 경우엔 1024에서도 문제 없이 출력되도록 수정할 계획입니다. 일이 잘 풀리면 오래 걸릴테고.. 일이 꼬이면 조만간에... 고치기
앗, 이런 일이 꼬이시길 기도해야겠군요! ㅎ (어떤 일이시길래..)
저같은 문외한들은 CSS 파일의 숫자 몇개만 건드려도 꽤나 조심스러워서 말이죠.. ㅠ.ㅜ; 고치기 Reply
^^;;;
너무 큰 기대는 마세요. 민노씨 블로그 처럼 사이드바를 넓힌 경우는 1024px 안에 다 안 들어갈 것 같습니다. 암튼 이 문제를 조속히 해결하고, 다른 테마 하나 더 해 보려고 하는데요. 그 테마가 더 마음에 드실겁니다. 고치기
지금 스킨도 굉장히 맘에 드는데 말이죠.
괜히 저 때문에(?) 바쁘신 분 시간 빼앗는 것은 아닌지 걱정입니다.
일 꼬이시길 바란 건 (물론) 농담이었구요.
일 잘 풀리시고, 시간이 허락하시면 많은 블로거들을 위해 재능을 베풀어주시길 바라봅니다.
정말 고맙습니다.
그리고 hi8ar님 같은 분들을 보면 참 흐뭇하달까, 대단하달까.. 그런 소회를 느끼게 됩니다.
추.
사소한 궁금증.
다음 웹 인사이드는 스킨에 내재되어 있는건가요?
따로 제가 설치한 기억은 없어서요.
로딩될 때 관련 URL이 뜨는 것 같아서요. 고치기
별 말씀을요.. 다행스럽게도 일이 꼬여가고 있어서.. 앞으로도 시간이 널널할것 같습니다. 암튼, 민노씨 덕분에, 그냥 보통의 허접한 스킨으로 남을 뻔 했던 whiteBoard 가 조금씩 쓸만해져 가고 있는 듯한 느낌이랄까? 하고 싶을때 신나게 해야죠.
글쎄요.. 다음 웹인사이드는 스킨에 포함되어 있지 않습니다만...
화이트보드 2.0 나왔습니다. 사이드바를 얼마나 넓힐수 있을지 계산해 보겠습니다. 고치기
좋은 스킨 감사합니다. 정말 깔끔하네요.
스타일시트도 분류별로 잘 정리되어 있어서 초보인 저도 이해하기 편하더라구요.(처음엔 고생했지만.^^)
그런데.. 저 큰글씨들은 직접 <H2>같이 태그 넣어주신건가요?
티스토리에는 저런 기능이 없는것 같아서요.~ 고치기 Reply
넵.. 아쉽게도 티스토리 위지윅에디터, (사실 텍스트큐브 위지윅도 마찬가지...) 헤딩에 대한 지원이 없습니다. 그나마 텍스트큐브에서는 다른 대안 에디트 포메터를 이용할수 있지만, 티스토리에서는 html 에서 직접 <h3></h3> 로 입력하는 방법밖에 없을것 같습니다.
그건 그렇고.. 파랗게 변신했네요~!! 하늘색.. 욕심납니다~ ^^* 고치기