루리웹에는 마이피라는게 있습니다. 일종에 미니 블로그 같은 기능인데, html 수정은 지원하지 않지만 CSS 수정은 지원합니다. 그래서 없는 CSS 실력을 다 닦아 넣어서 마이피용 CSS를 만들었습니다.
대충이런 모습으로 완성이 되었습니다. - 제 마이피
어제 반나절 고생한게 아깝고 왠지 후기라도 남겨야 할것 같아서 글을 씁니다.
-아아, 마이피는 테이블로 가득해!
-div 쓰게 해주세요! ㅠㅠ
일단 시작부터 멘붕이었습니다. 2000년도 이전에나 통용되던 테이블 기반의 웹사이트 레이아웃을 쓰고 있었으니까요 -_-; 요즘은 전부 div로 합니다. W3C권고 안에도 나와있듯이 테이블은 레이아웃을 짜라고 만들어 놓은게 아닙니다. 테이블은 표를 짜라고 만들어 놓은겁니다. 웹표준 검사기 통과하면 당장 경고먹을 요소입니다. XHTML에서도 테이블로 레이아웃 짜면 검사기가 '너, div로 새로짜라' 라고합니다. -_-;
전설로만 듣던 석기시대 테이블 레이아웃을 경험하고 나서 사이트 구조를 뜯어 보았습니다. 모달 팝업중에서는 꽤 이름이 알려져 있는 펜시박스를 쓰더군요. 근데 클래스가 개조 되어 있어서 마이피에서 펜시박스를 끌어다 쓸수 있을지는 더 연구를 해봐야 겠습니다. 마이피에서는 참고로 자바스크립트가 안됩니다. 자바가 되면 댓글창도 갈아엎고 광고도 박고 해서 좀 관리할 맛이 날텐데 그냥 마이피는 훈련용으로 남겨두고 글올릴 일은 별로 없을것 같습니다. 물론 번역 영상 만들면 한 일주일 텀을 두고 재업을 할거지만....(에초에 그런목적으로 만든거라...)
옛날 같으면 CSS로만 꾸밀때는 화려한게 한계가 있었지만 CSS3이 등장하면서 그것도 다 옛말이 되었습니다. 어짜피 자바도 못 쓸바에 CSS3으로 도배를 하자! 라는 심정으로 스타일을 작성했는데요, 제가보기에는 50%가 넘는 요소들이 전부 CSS3 스타일로 작성이 된것 같네요. 블로그 같은 경우에는 크로스브라우징을 염두해두고 웹페이지를 만들었지만 마이피는 실험용의 성격이 짙어서 크로스 브라우징은 신경도 안쓰고 만들었습니다. 헤헤
이게 도대체 어딜봐서 읽기 쉽다는 건지
마이피에는 신형 스타일과 구형 스타일이 있습니다. 신형은 클래스를 더 파악하기 쉽다고 하는데 개뿔. 클래스 중에서 이름만 보고는 파악이 잘 안되는 요소도 무지 많았습니다. 그런걸 만날때마다 슬슬 빡치기 시작했죠. 구시대 유물인 테이블과 맞서싸워야 하기 때문에 일단 스타일 리셋을 해주었습니다. 참고로 리셋 스타일은 여기 http://meyerweb.com/eric/tools/css/reset/ 가면 얻을수 있습니다. 왜 리셋을 하느냐 라고 물으신다면, 브라우저 마다 표시 되는게 다 다르고, 특히 이런 구시대 테이블 레이아웃 같은경우에는 수정을 하게 되면 margin과 padding이 지마음대로 난리를 치기 때문에 전부 깔끔하게 0으로 만들어주는 것이 매우 중요합니다. 이것 말고도 노멀라이저 라는 것도 있습니다. 현재 티스토리 블로그 스킨에는 리셋 스타일 대신 노멀라이저를 사용했는데요, 노멀라이저는 크로스 브라우징에 중점을 둬서 모든 브라우저에 똑같은 내용이 표시되게 끔 도와주는 요소입니다. 스타일을 표현하는 방식이 브라우저 마다 다르기 때문에 이런게 필요합니다. 물론 현재 마이피 같은 경우에는 크로스 브라우징은 전혀 신경안쓰고 크롬이랑 사파리 ,파이어 폭스 위주로 만들었으니 리셋 만으로도 충분합니다. 태스트는 안해봐서 모르겠지만 현재 마이피에 IE로 접속을하면 지옥을 맛보실 겁니다. ㅋㅋ
참고로 일반 CSS가 아니라 Sass로 스타일을 작성했습니다. 덕분에 작업시간이 확줄게 되었죠. Sass 기능 중에서 마이피 스타일을 짤 때는 믹신 보다 코드 네스팅을 더 잘 활용 할수 있었습니다. 기본 믹신은 컴패스 제공으로도 충분하기 때문에.... 처음 계획은 3D로 심시티 같이 만들려고 했으니 테이블 구조에서는 그게 불가능하기 때문에 포기 했습니다. 그 대신 워드프레스 테마에서 유행을 하는 페럴랙스 형태로 한번 만들어 보았습니다. CSS3 부터 새로 생긴 Backgorund-size 태그로 배경사진을 고정시키고 위에 테이블 요소만 둥둥 떠다니게 만들었습니다.
그리고 현재 스킨을 보시면 알겠지만 반쪽 짜리 반응형 스킨입니다. (구조상 100%는 절대 만들수가없습니다. -_-;) 모든 스타일 요소를 em과 %로 적용해서 반쪽 짜리 반응형을 만들었습니다. 유투브 영상이나 각종 사진을 올리면 글 영역에서 꽉차게 나옵니다. 기존의 콩알만하게 뜨던 마이피 보다는 훨씬 보기 좋은 것 같습니다. 무엇 보다도 게시글이 나오는 부분을 꽉차게 만드는게 첫번째 과제였습니다. 테이블 요소를 전부 박살을 내서 위치를 이동시킨뒤에 딱 메인만 남겨서 넓이를 100%로 만들었습니다. 제가 만든 스킨으로는 최초로 세리프 스타일의 폰트를 적용했는데요, 해놓고보니 꽤 마음에 듭니다. 배경 사진은 CSS3에서 지원하는 속성으로, 배경사진을 여러장 쓸수 있는 기능을 사용했습니다. 격자무늬가 들어가있는데요, 이게 원본이 저런게 아니라 원본에다가 격자 패턴을 올린겁니다.
최상단 메뉴는 테이블로 나열된 메뉴를 박살을 내서 옆으로 길게 늘여뜨려 놓았고요, 오른쪽 메뉴는 하도 스타일이 이상하게 먹혀서 그냥 마우스 호버시에만 보이게 숨겨놓았습니다. 댓글 난 같은 경우에는 말풍선을 넣으려고 했는데, 강제로 요소 밑에 br이 들어가면서 after pseudo class를 옆으로 밀어내 버리는 병크를 터뜨려 주어서 몇번시도하다가 걍 포기 했습니다. -_-정말 엽기적인게 요소간에 분리를 margin이나 DOM breakpoint를 쓰는게 아니라 br로 도배를 했다는 점인데요, 물론 초창기 웹 페이지 만들던 시절에는 이런 말도 안되는 마크업을 하곤 했습니다. 그래도 좀 개편좀하지... 라는 생각이 계속 드네요.
마크업을 하다가 멘붕을 여러 수십번 했지만 그중에서도 가장 충격적인 것들을 몇가지 꼽아보겠습니다. 위 사진을 보시면 마이피에 쓰이는 이미지 요소가 CSS 스프라이트로 만들어져 있습니다. 이부분은 상관없습니다. 원래 다 이렇게 하는 거니까요. 그런데 코맨트 입력 버튼을 보시면 아주 기겁을 하게 만들어 놓았습니다. input에 이미지를 쓰는건 상관없지만 이걸 CSS로 지정을 하는게 아니라 인라인으로 심어놓았습니다. -_-
인라인으로 버튼이미지를 심어놓는패기
누가보면 CSS없는 웹페이지 만드는줄 알겠내요. -_-; 그냥 input 에다가 background로 이미지 집어넣는건 CSS2부터 됐었는데... 이런거 보면 할말이 없습니다. 현재 마이피의 대부분의 스타일이 순정이 아니지만 결국 이부분은 뜯어고치지도 못 했습니다. 고급사용자는 스타일을 수정하세요 -> 수정하지 못하게 HTML을 짠다. You don't say?
사이드바에 간격을 띄우는데 아무것도 안들어 있는 ul을 쑤셔넣어서 간격을 벌려 놓았습니다. -_-; 와.... 이건 정말 할말이 없더군요. 어떻게 이런짓을 할수가 있지...
그리고 제일 맨붕했던것. 사용자 요소를 추가하면 요소 바로 다음에 br을 쑤셔 넣습니다.
덕분에 인라인 리스트를 만들면 이렇게 계단처럼 뜨게 되죠.
처음에는 플로팅을 잘 못해서 이렇게 되는줄 알고 몇번이나 코딩을 갈아 엎었는데 알고보니 br때문이었습니다. 플로팅 리스트에 br이 들어가면 요소를 block으로 지정한것과 같은 효과가 납니다. 분명 스타일에는 inline으로 되어있는데도 자꾸 이렇게 떠서 테이블 안에서는 inline이 적용 안되는줄 알았습니다. -_-;
이렇게 어제 저녁을 꼬박 날려서 스타일을 다 만들긴 했습니다. 그런데 올릴글이 없네요 하하하...
