
코딩 기간: 이틀(꼬박)
크로스 브라우징: IE 8, IE 7, IE 6, firefox
seevaa님의 mysophobia(결벽증)스킨을 기본으로 header부분 전부, 검색폼, 본문 출력 부분의 일부를 수정하였습니다.
너덜너덜해진 몸과 정신 상태가 허락하는 한 웹표준에 따르려고 노력했습니다.
애먹었던 부분을 적어놓지 않으면 까먹기 때문에 간단히 정리해 봅니다.
아직 초보라서 이게 안 되면 저거 해보고 하는 식으로 어림잡아 코딩했습니다만 그래도 혹시나 등불 없이 밤길 헤매는 기분으로 고생하시는 동지들에게 도움이 될까 해서 부끄러움을 무릅쓰고 적습니다.
1. 블로그 기본 메뉴 - 여백 없이 가로로 배열하기
상위 div의 width값과 height값을 정확하게 주었는데도 이미지가 세로로 배열되어 있었음. 상위 div에 display: inline을 해도 가로로 배열되지 않음. ul, ul li, ul li img에 display: inline을 주었더니 해결됐음.
margin, padding값을 0으로 주어도 이미지들 사이에 1px정도의 틈이 생기길래 네이버 검색 결과를 참고하여 상위 div와 ul, ul li, ul li img에 font-size: 0; line-height: 0, vertical-align: top 추가. 그래도 안되길래 ul li a에 outline: none을 주었더니 깔끔하게 해결.
2. category 부분 - 리스트 속성 없애기(목록 앞에 나타나는 원, 사각형 모양의 bullet 없애기)
ul에 list-style:none 주기. div에 줄 필요 없음.
다른 곳에서는 list-style-type: none을 넣으면 된다고 했는데 왜인지 모르지만 적용되지 않았음.
3. sidebar - element 가로로 배열하기
div 여러개를 가로로 배열하려면 상위 div에 display: inline만 주면 안되고 배열하려는 해당 div 속성에 float:left를 주어야 함. 그래야 휙휙 예쁘게 올라온다.
4. 본문 속성 - 줄간격은 line-height로. %까지 붙여서 써야 함. (ex. line-height: 160%;)
5. float 속성 초기화
float:left 속성을 지정한 레이어의 다음 레이어가 쓸데없이 윗줄로 붙어 버리는 것을 방지하려면 해당 레이어의 속성에 clear: both를 주면 된다.
6. 레이어 범위 밖의 부분 보이기/감추기
overflow: hidden, overflow: show. 내용이 중간에서 짤려 보이는 것처럼 나올 때는 hidden으로 되어 있지 않은지 확인.
7. 블로그 paging, footer float 속성 초기화
보통 블로그에서는 댓글폼 밑의 paging, footer 부분은 본문 페이지에서만이 아니라 tag, guest, 검색 결과 페이지에도 그대로 반복되어 사용되기 때문에 각각의 페이지 상위 div 속성에 끌려다니지 않게 하기 위해서는 기본적으로 clear:both를 줘야 할 필요가 있음.
8. 텍스트큐브 블로그 - 댓글 입력시 null창이 뜨는 문제
플러그인 문제일 수도 있지만 대부분은 스킨의 구문 오류 문제일 가능성이 높다. skin.html과 style.css(둘 다 살펴야 함. skin.html만 죽어라고 고치다가 포기한 적이 한두번이 아님)의 댓글 입력 부분을 하나하나 살피며 치환자를 열고 닫는 순서가 바뀌지 않았는지, 오타가 없는지 등을 살펴야 한다. 열고 닫는 순서는 특히 firefox에서 예민하게 처리함. 순서만 살짝 틀려도 본문 전체가 어긋나 버린다. IE에서는 그 정도까지는 아니었던 것 같은데.
예를 들어 <div><s_list><ul>은 반드시 </ul></s_list></div>의 순서로 닫아야 한다. 그런 것쯤 하고 얕봤다가 날밤 샌다.
9. 텍스트큐브 블로그 - favicon
마지막까지 속을 썩이는 favicon 문제.
포럼에서 본 해결책대로 외부 경로를 현재 사용하고 있는 블로그 주소로 설정하려고 계정 설정 페이지가 어디 있다는 건가 하고 한참을 찾았는데 관리자 - (우측의) 서비스관리 - 서버에 들어가니 외부 리소스 저장소 경로 입력칸이 있었다.
그러나 외부 경로 입력으로 문제 해결은 되지 않았고 아무리 favicon 등록 메뉴에서 등록을 해봐도 미리 보기도 안 떠서 캐시 정리도 해보고 임시 파일도 다 지우고 ftp 접속해서 textcube/image/icon_favicon_default.ico도 바꿔보고 했는데도 이상하게 텍스트큐브 기본 파비콘만 뜨길래 홧김에 firefox를 받아서 해봤더니 허무하게 잘 뜨더라. IE 기본 브라우저로 열어봐도 잘 뜨더라. 현재 쓰고 있는 브라우저 web-ma의 문제였음.
이 정도로 별짓을 해도 안 된다면 브라우저 문제일 수 있으니 재설치해보거나 기본 브라우저로 열어보는게 빠른 문제 해결의 길이 될 수 있음.
브라우저가 파비콘을 제대로 인식했다면 파비콘 등록 메뉴에서 미리 보기라는 글자 대신에 파비콘 그림이 뜬다. 미리 보기라는 글자에 링크가 걸려 있고 클릭하면 이상한 코드가 쫙 나오는 것은 비정상임. 그런 경우에도 제대로 작동만 한다면 상관은 없겠지만.
10. 유용한 사이트
http://forum.standardmag.org CSS DESIGN KOREA
http://forum.tattersite.com/ko/viewforum.php?id=12 텍스트큐브 포럼. 수많은 사람들의 생고생의 흔적들.
http://www.cadvance.org/ XHTML/CSS의 기본부터 배울 수 있는 곳.
http://plyfly.net/Docs/TextcubeSkinManual/index.html 스킨 제작 초보자들은 반드시 거쳐야 할 곳.
http://www.textcube.com/doc/skin/guide/ 치환자 파악할 때 좋을 듯.
+11. 넋두리
웹표준이고 뭐고 그냥 제로보드 써서 대충 편하게 홈페이지나 만들려고 했는데 그놈의 '표준'이라는 단어의 마력에 이끌려 다시 텍스트큐브로 돌아왔고 다시 이 짓을 했고 어떻게 했는지도 모르지만 완성은 했다.
이 짓을 다시 하면 사람이 아니다. 라고 말하고 싶은데 분명히 또 하게 되겠지. 해야 되겠지.
왜 고생을 해도 별로 느는 느낌이 들지 않을까.
언제쯤 모니터 앞에서 눈을 부릅뜨며 한숨을 백만번 쉬지 않아도 딱딱 맞아 들어가는 페이지를 만들 수 있을까.
엉엉엉.
아직 아는 것보다 모르는게 훨씬 많아요. (margin이랑 padding의 차이도 여전히 아리까리하다)
노력합시다.















댓글을 달아 주세요
우와 외계어다!
ㅋㅋㅋㅋ 네 스킨 언제나 멋져 +_+
내가 봐도 외계어야 ㅋㅋ 고마워요