2010/01/29 16:27







 



코딩 기간: 이틀(꼬박)
크로스 브라우징: 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의 차이도 여전히 아리까리하다)
노력합시다.

2010/01/29 16:27 2010/01/29 16:27

Trackback Address >> http://kristy.pooroo.net/textcube/trackback/8

댓글을 달아 주세요

  1. Egg 2010/01/30 01:18  address  modify / delete  reply

    우와 외계어다!
    ㅋㅋㅋㅋ 네 스킨 언제나 멋져 +_+




사용자 삽입 이미지





사용자 삽입 이미지





사용자 삽입 이미지



민음사에서 나온 '미래의 고전' 컬렉션.
오르한 파묵, 가즈오 이시구로, 코맥 매카시, 지넷 윈터슨 등 현재 가장 뜨겁게 주목받는 작가들의 대표작을 소개하는 젊은 문학전집이라는 캐치프레이즈를 달고 있다.

혁신적인, 세련된, 젊은 감성이라는 셀링 포인트를 매우 잘 표현한 커버 디자인이라는 생각이 든다.
아기자기한 일러스트, 휘갈겨 쓴 캘리그래피, 저명 인사의 오글거리는 추천글, 뛰쳐나올 듯 커다랗고 화려한 서체로 쓰여진 책 제목 등
대부분 거기서 거기인 책 표지들 중에서 단연 눈길을 붙잡고 손길이 가게 하는 강렬하고 깔끔한 디자인이다.
아무런 장식도 없는 점잖은 서체로 쓰여진 책 제목으로 진지한 분위기를 내면서도 포인트로 명랑한 원색을 써서 지나치게 어두운 느낌도 들지 않는다. 상큼함과 진중함의 조화가 '미래의 고전'이라는 캐치프레이즈와 어울려 책 내용에 대한 호기심과 흥미를 불러 일으킨다.
선택한 사진들도 특징 있고 어딘지 모르게 심오해 보여서 내용에 대한 호기심을 한층 더 자극한다. 특히 감명깊게 읽은 키친의 표지를 보고서는 책의 분위기를 잘 나타내는 사진에 감탄했다. 제목이 키친이라고 진부하게 부엌 정경이 다 비치는 사진을 쓰지 않고 음식이 차려진 식탁 사진을 통해 부엌의 일부분만을 보여주었지만, 배경으로 깔린 체크무늬 테이블보만으로도 햇빛이 비쳐들고 커다란 냉장고가 씩씩거리며 돌아가는 미카게의 따스한 부엌이 절로 연상되어 한참 동안 책을 집어들고 미소를 그칠 수가 없었다.

나츠메 소세키의 행인 표지를 보고서도 생각했던 것인데,
그리고 책 표지를 볼 때 뿐만 아니라 다른 상황에서도 느낄 수 있는 것인데,
무조건 크고 화려하다고 매력적인 것은 아니다.
(부인들은 남편들에게 뭐 크고 대단한 걸 바라는건 아니에요. 작고 반짝이는 거! - 박미선)
표현된 모든 요소가 적재 적소에서 각자의 역할을 다 하며, 그 모든 포인트가 조화롭게 어우러질 때.
그 표지는 눈길을 끈다.
제목이, 작가의 이름이, 저명 인사의 사진이 커다랗게 실린 표지만이 눈길을 끌고 지갑을 열게 하는 것이 아니라
자극적이지는 않지만 잘 짜여진 책 표지가 그 디자인의 탁월함만으로 이 책은 어떤 내용일까 하고 집어들어 표지를 열게 하는 매력을 가질 수도 있는 것이다.

멋진 디자인을 하려면, 무작정 크고 화려하려는, 내세우려는 욕심을 버려야 한다는 것을 뼈저리게 느낀다.
물론 멋지게 살기 위해서도 그렇다.

2010/01/23 11:38 2010/01/23 11:38

Trackback Address >> http://kristy.pooroo.net/textcube/trackback/3

댓글을 달아 주세요

  1. Vivvy 2010/01/23 16:49  address  modify / delete  reply

    아 나도 서점에서 이 시리즈 보고 사고싶어 갖고싶어! 를 외치며 한참 앞에 서있었는데. 고전은 워낙 민음사에서 나온 버전들로 다 읽는 편이였는데, 이 새로운 책 디자인 때문에라도 요 시리즈 하나씩 모으고 싶어.

    • 크리스티 2010/01/24 09:31  address  modify / delete

      그치ㅋㅋ 키친은 정말 덥썩 집에 데려오고 싶더라. 디자인의 힘을 느꼈어.

<<pre 1 next>>